Introduction

This article explains how to switch from a Responsive Web Offline navigation profile to Responsive Web (online) profile in a Mendix application. This workaround enables navigation from an offline profile to an online profile without experiencing profile interference or cached resource conflicts.

Environment

Studio Pro (all versions)

Instructions/Procedure

Implement a nanoflow with a custom JavaScript action to clear the session and redirect to the target profile:

1. Create a new nanoflow in Studio Pro (for example, ACT_SwitchToResponsive).
2. Add a Get Remote URL action to retrieve the target URL for the Responsive profile.
3. Add a Create Variable action and name it RedirectURL to store the retrieved URL.
4. Create a new JavaScript action named JS_GoToResponsive with the following configuration:
   • Add a parameter url of type String

   • Add the following code to the action:

     import "mx-global";
      import { Big } from "big.js";
      /**
       * @param {string} url
       * @returns {Promise.<void>}
       */
      export async function JS_GoToResponsive(url) {
          localStorage.clear("session");
          window.open(url, "_blank");
          return;
      }

5. Add the JS_GoToResponsive JavaScript action to the nanoflow and pass the RedirectURL variable as the parameter.

   

6. Configure a button, menu item, or navigation element to trigger the nanoflow.
7. Test the implementation by navigating from the Responsive Offline profile to the Responsive profile.

Outcome

The application clears the session data and opens the Responsive (online) profile in a new browser tab, preventing interference between the offline and online profiles.

Additional information

Mendix documentation: Navigation Profiles