Overview of Apps (Portal Pages)

Portal Pages have been renamed to Apps in v7.1.0.

NOTE: For information on App (Portal Page) configuration in MI verisons prior to 7.1.0, see Overview of Portal Pages (prior to v7.1.0).

Apps enable the development of single webpages and multi-page websites hosted on Metric Insights. They are incredibly flexible, allowing you to utilize the basic toolset for building websites: HTML, CSS, and JavaScript.  The tools permit a User to create highly curated experiences around content from any source supported in Metric Insights.

Apps can be embedded directly into your existing Metric Insights Portal, or you can use the Layout function to create your own branded portal or website in which to embed these Pages, with no visible Metric Insights UI.

1. Control the Use of Apps

Access Admin > System > System Variables

NOTE: See Setting System Variables for details on System Variables configuration.

The use of Apps can be controlled by the System Variables shown above:

  1. Enter App  in the search field
  2. Set APP_FILE_UPLOAD_LIST to a comma-separated list of allowed file extensions for App Assets uploading
  3. Set APP_FOR_MOBILE to the value of Name used in URL of the App which should be displayed to mobile users when accessing Metric Insights via the mobile app
  4. Set ENABLE_APP_BUILDER to 'Y' to enable the App Builder
  5. Set ENABLE_R_SHINY_WITHIN_APPS to 'Y' to enable R Shiny functionality within the Apps
  6. Set LOGIN_ERROR_APP to the value of Name used in URL of the App which should be displayed to users upon unauthorized login
  7. Set MOBILE_BANNER_APP to the value of Name used in URL of an App that will display a banner when accessing MI from a mobile device, encouraging the user to download the mobile app
  8. Set MOBILE_APP_POPUP to the value of Name used in URL of an App that will display a popup when accessing MI from a mobile device, encouraging the user to download the mobile app

2. Example of App Tabs

  1. The traditional Homepage in Metric Insights appears as Catalog.
  2. Apps appear as tabs. Any of these Apps can be selected as a User's default Homepage upon entry into the system.

3. Create a Simple New App for Use in MI

Access Content > Apps

  1. [+New Page]
  2. Use App Builder: Specify whether to use the App Builder
  3. Name: Enter an App name
  4. Name used in URL: Enter a name to be used in the App URL
    • Note: Letters, numbers, dashes and underscores are the only supported characters for Apps' URL names
  5. Template: If you want the App to be populated from a Template, choose one
  6. [Save]

4. Configure App

It is possible to migrate Apps by using Import/Export Utility. For more information, refer to Importing Objects with Import/Export Utility and Exporting Objects with Import/Export Utility.

  1. Can be used as External Report: Activate the checkbox to use the App as an Object for External Report creation
  2. Optimized for Mobile: Activate this checkbox if the App is optimized for mobile devices. Only Apps that have this checkbox activated will be displayed in the mobile application.
    • NOTE: App must be developed for mobile devices; otherwise, “Optimized for Mobile” won't work.
  3. Sync with Git: Toggle on to enable the App for Git synchronization
    • If on, the Code tab switches to Git Sync where you can configure syncing for uploading App assets as an alternative to a manual upload.
  4. Display without Metric Insights navigation bar: Activate the checkbox to display the App without the MI navigation bar at the top of the page
    • If checked, specify the following:
      • Embed URL: A way to access the page and use it for embedding
      • Layout: A way to establish navigation on the page
  5. Optionally, exclude the page from Homepage navigation bar and search
  6. Version Identifier displays a unique hash of each App, which is used to identify the App version and track changes. Click on its value to see the version history
  7. Proceed to the Code tab to add additional information; e.g., HTML, CSS, and JavaScript, embed objects
    • Code files can be imported from the Assets tab

For more information on adding New Layouts, refer to Layouts for Apps.

All External layouts are client-specific and must be custom-designed. Contact [email protected] for assistance if you do not already have a layout for your website.

4.1. Basic Example of Finding the Code to Embed an Object

  1. Access Preview of a desired Tile
  2. Click Share icon
  3. [Embed this instead]
  4. Scroll down to the bottom of the grid, [Copy Code] 

To locate the Embed codes for any Metric Insights object, refer to Embedding Overview.

4.2. Understanding Embedding Сode Options

  1. Element View: Type available:
    • Tile: Displays the element exactly as it appears in the Catalog View
    • Preview: Displays the same image used for the Homepage Preview
    • Live Dashboard: Displays the element as seen in the Viewer, but without the Viewer’s navigation bar
    • Viewer: Displays the element as seen in the Viewer, including all interactive features
  2. Determines if clicking on an element will open that element in Metric Insights; i.e., a Tile in MI vs. visualization in an external BI tool
  3. Determines if clicking on a link will open that link in a new browser tab

4.3. Syntax of Embedding Codes for Creating Custom Embed Codes

Once you copy some embedding codes, you can easily duplicate and create new codes without going into Metric Insights to Copy code. See Rules and examples here.

4.4. Example Results (with Custom Formatting Added)

5. Sharing Apps

  1. The access restriction toggle is enabled by default, meaning that the User who:
    • is not in share Access list (specified below) AND
    • does not have edit access to the App AND
    • is not Admin
  2. Will see the Access Denied message that can be customized.
  3. Optionally specify the User types which will see the App in their navigation bar

For more information on App security, refer to Granting User Access to a Portal Page article.

5.1. Add Groups and Users Manually (via Apps)

  1. [Add Group/User]
  2. Select Group/User
  3. Specify if the App will display when the User initially signs on to Metric Insights
  4. Specify if the App will display when the User initially signs on to Metric Insights via the mobile app
  5. [Save]

User may override their Starting Location by using the My Setting menu option under their name. Once a User has set their Starting Location via the My Setting options, it cannot be overridden on either the User Editor or the App.  See more information on Set Portal Page as Your Start Location

For each Group chosen from drop-down, all Group members inherit App Access.

5.2. Sharing with Groups and Users Manually (via Group or User Editors)

Access the Apps section on Power User tab on either Group Editor or User Editor. For Regular Users, access the Other Access tab

  1. [+ App for Group/User]
  2. Select App from a drop-down
  3. Specify whether to grant edit access for Power Users
  4. [Save]
  5. Click on the gear icon near the App name
  6. Specify whether the Page is displayed to the User immediately after signing in to Metric Insights
  7. Specify whether the Page is displayed to the User immediately after signing in to Metric Insights via a mobile device
  8. [Save]

On User Editor, App Sharing is inherited from Groups will display as well as those individually assigned to an individual User:

Starting location assigned on User Editor will override assignment inherited from either Group or App Editors.

If User sets Starting location on their My Settings screen, this choice overrides any settings on User, Group, or App Editors.  See Setting Portal Page as your Start Location

5.3. Copy Access Rules from Another App

You can view the Share options for your chosen App using the Edit icon to access that App Editor > Sharing tab.

Any updates to the Share options in App B will now automatically be applied to App A.

5.4. Assets: Add Images or Animations for Use in Apps

Access Content > Apps > Global Assets

You can:

  1. Create [New Folder] for uploading style sheets, JavaScript files, or images
  2. Upload files located locally via [Select Images, JavaScript and CSS assets that are needed to construct Apps]
  3. Upload files by dropping them on the page
  • It is highly recommended that all custom files are uploaded into Assets to ensure a seamless experience with the Apps functionality. Assets are used with both Apps in Metric Insights and with external Apps.

6. Configure Advanced Settings

  1. Toggle on to enable receiving POST requests from sites other than the current MI instance
  2. Support v6 App Code: Enable this option if your App contains v6 code and you want to make it compatible with v7
  3. Asset Browser Cache Setup: Set up cache lifetime for Assets
  4. Custom Domain: Enter a Custom Domain for the App

For image collection, you can decide when the system should take a screenshot of App or how much time an App can take to load before the system takes a screenshot of that Page:

  1. Timeout: Specify a time interval after which a screenshot is taken once the App is opened
  2. Screenshot on: Select a condition of taking a screenshot. Note that a screenshot will be taken when the selected condition is met or after the time interval specified in the Timeout field has elapsed
    • Only on Timeout: A screenshot is taken after time interval specified in the Timeout field
    • Element Removed from Page: This condition is appropriate if you want a screenshot to be taken after some element disappears from an App. The element can be set in the CSS Selector field; e.g., if you want a screenshot not to be taken until the App is fully loaded, enter .loading to the CSS Selector field
    • Element Added to Page: Select this condition if you want a screenshot to be taken when some element appears on an App. The element can be set in the CSS Selector field
  3. [Save]