Make your pro-code app full screen

While pro-code apps offer much more UI/UX flexibility than traditional App Studio apps and dashboards, it can be a struggle to size them responsively. Oftentimes, we want to allow viewers to access content in a user-friendly way by clicking on an app or dashboard. Unfortunately, embedding a pro-code app leaves us subject to Domo’s native layout and formatting, which often involves unwanted padding and unresponsive card heights. In this article, I'm going to cover how to automatically open a pro-code app in full screen, while still allowing users to access it through Domo as usual.

How pro-code apps work behind the scenes

A pro-code app actually runs on a separate web address from the card details, and Domo embeds that address inside a frame element. This is true whether you are viewing the app in the card details page, an App Studio app, or a dashboard. Then, when you embed the card in an app or a dashboard, Domo adds padding around the card and fixes the height, even when “auto-width” is selected. Unlike the width, the card’s height is not responsive to the screen size.

The solution is to open the app using its own address, which removes Domo's frame.

Balancing UI and UX

The issue with opening a pro-code app in its own web address is that the link is not easy for viewers to access. Clicking on an app or dashboard takes you to that app or dashboard, not the app’s specific address. We can solve this problem by running a script in our app which automatically opens the app’s source URL. This allows users to access the app from wherever they typically find their reports, and we get to present the app with a fully responsive UI.

When to avoid going full screen

There are cases when we need to interact with Domo outside of the pro-code app. Your team may have specific places where they do not want the app to automatically open in full screen, and those need to be built into the script as exceptions. An example of one of these places is the card editor, where we want to be able to change the card itself. The script provided in the following section contains an example of how this exclusion would be done.

Adding the script

To apply this to your app, put a short script at the very top of the app's index.html, before any other script loads. If the app is inside Domo’s frame element, the script has Domo navigate to the app's source URL instead.

<script>
  // Full-screen redirect
  (function () {
    if (window.self === window.top) return; // Already full screen

    // Skip in the card editor
    if (new URLSearchParams(location.search).get("wiring") === "true") return;

    // Skip after the viewer presses Back
    try {
      if (Date.now() - Number(sessionStorage.getItem("fullscreen-jump") || 0) < 60000) return;
      sessionStorage.setItem("fullscreen-jump", String(Date.now()));
    } catch (e) {}

    // Open the app's source URL
    window.parent.postMessage(
      JSON.stringify({ event: "navigate", url: location.href, isNewWindow: false }),
      "*"
    );
  })();
</script>