Skip to main content
OutSystems

How to Reuse Web Screens in Mobile Apps

Question

Is there a way to reuse screens from web apps in mobile apps?

Answer

We recommend trying to migrate the existing functionality by developing it directly in the mobile application.

However, because that’s not always an alternative, it is possible to integrate existing web screens in mobile apps using an iframe that embeds the web screens:

To achieve this result, you must do the following:

  • Use an iframe in the mobile app that sends appropriate request headers when fetching the web screens;
  • Update the web app to automatically log in the end-user of the mobile app.

Use an iframe in the Mobile App

Create a block containing an iframe to display the web screens as follows:

  1. Create a new block called InternalBrowser;
  2. Add the following CSS class in the property Style Sheet of the block:

    .internal-frame {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 100px;
    }
    

    You might need to tweak the CSS class internal-frame depending on the specific web screens to embed in the mobile app.

  3. Add an HTML Element to the block, set the tag to iframe and the attribute class = “internal-frame”;

  4. Add a client action FetchIframe to the block. On the action FetchIframe, add a JavaScript node with a parameter Source and the following code that fetches the web screen with the appropriate request headers:

    var iframeGetter = new XMLHttpRequest();
    iframeGetter.onload = function () {
        document.getElementsByClassName("internal-frame")[0].setAttribute("src", $parameters.Source);
    };
    iframeGetter.open("GET", $parameters.Source);
    iframeGetter.setRequestHeader("X-CSRFToken", require("Communication").CSRF.getCSRFToken());
    iframeGetter.send();
    

    The FetchIframe action sends correct HTTP headers that protect the request and that allow the Session_GetMobileAppLoginInfo action to validate the login information.

To use the block in your mobile app you just need to pass in the Source parameter the URL of the web screen that you wish to embed.

Automatically Log In the End-user in the Web App

Add an OnException handler to the UI Flow that contains the web screens that will be embedded in the mobile app. The flow of the OnException will handle security exceptions and validate if the current end-user is already authenticated in the mobile app. If so, it will automatically login the user in the web app. Add the following logic to the OnException handler:

  1. Add a SecurityException handler to detect requests from end-users that aren’t yet logged in;
  2. Reference the action Session_GetMobileAppLoginInfo from the PlatformRuntime_API extension and use the action to retrieve the login information of the end-user from the mobile app;
  3. Test if Session_GetMobileAppLoginInfo.userId <> NullIdentifier(). If True, the end-user is logged in and the web app will proceed to automatically log in the end-user. If False, the end-user is not logged in and the web app will redirect to an error page;
  4. In the True branch, use the system action Login with the following values obtained by the action Session_GetMobileAppLoginInfo to automatically log in the end-user:

    UserId = IntegerToIdentifier(Session_GetMobileAppLoginInfo.userId)
    Persistent = Session_GetMobileAppLoginInfo.isPersistent
    
  5. After the action Login, use an External Site to redirect to GetExceptionURL(), that returns the URL of the web screen that was requested.

Links in Web Screens Back to the Mobile App

If the web screen to display in the iframe of the mobile app has links back to the mobile app, make sure that the links have the attribute target = “_top”. Otherwise you might get a “cascade syndrome”, as shown below, because by default the link will open inside the iframe and not in the top window.

  • Was this article helpful?