Portal Page Templates Basics (6.2.1+)

Portal Pages allow for a wide range of customization. They are configurable via:

  • Layouts that determine the structure of a page
  • Templates that provide a more basic set of controls

This article details how to add and tailor Portal Page Templates to your specific needs. It assumes basic knowledge of HTML and the various objects in Metric Insights.  The target audience is Administrators and Power Users with associated Portal Page Privileges.

For information on how to build a Portal page, go to Overview of Portal Pages.

Table of contents:

  1. Create a New Template
  2. Configure Template
  3. Enter Code
  4. Customize the Image Capture Setting  
  5. Add Variables
  6. Customize Image Size using the "Resize" Option

1. Create a New Template

Access Content > Portal Pages > Templates tab

The list page containing all available Portal Page Templates opens.

  1. Below the grid, click [+New Template]
  2. Name: The name you type here appears in the Templates list and drop-down lists in Metric Insights
  3. Internal name: Provide a name which is used to build URL
    • Letters, numbers, dashes and underscores are the only supported characters for Portal Pages' URL names
  4. [Save]

2. Configure Template

You may contact [email protected] to get Portal Page Template examples or configure your own Templates by adding the code yourself, as described below.

  1. To be able to use a Template, make sure it is enabled
  2. Enable Sync with Git to upload assets from a repository located in:
  3. Optionally, select a Preview Image
  4. Display without Metric Insights navigation bar: This checkbox allows switching from the default Portal Page layout. If this option is enabled, choose a personalized layout from the Layout drop-down
  5. [Save]

3. Enter Code

Access the Code tab

  1. Enter the HTML, CSS, and/or JavaScript Code in the provided field, or upload files manually from the Assets tab.
  2. [Save]

4. Customize the Image Capture Setting  

Access the Advanced tab

The Image Capture setting allows to configure the condition to take a Portal Page screenshot for an External Report.

  1. Timeout: Specify a time interval after which a screenshot is taken once the Portal Page 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 a Portal Page. The element can be set in the CSS Selector field; e.g., if you want a screenshot not to be taken until the Portal Page 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 a Portal Page. The element can be set in the CSS Selector field
  3. [Save]

5. Add Variables

Metric Insights allows you to define and add your own Variables to the code in order to have more control over how your Portal Pages are populated.

NOTE:

  • Variable names in the code must match the Names of Variables that are custom-added. Otherwise, they will be treated as "undefined" and the corresponding warning message will appear
  • Variable Names are case-sensitive, the maximum length of Variable Name is 255 characters
  • The maximum size of Variable Value is 64 Kb of text

Access Variables tab.

  1. Define your Variables' settings. For more details check the Modifying Portal Page Template with Custom Variables article
  2. View the list of Global Variables