Modifying Portal Page Template with Custom 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

1. Adding Variables to the Template

Open the Template Editor (Content > Portal Pages > Templates tab > Template's Active Name link) and access Variables tab.

[+Variable] to open the Variable Editor screen.

2. Configuring Variable

  1. Name: Here you can define the name of the Variable that is shown in the list
  2. Description: In this field you can type instructions for the User
  3. Type: Select the Variable Type from the drop-down menu. Check the Variable types description below
  4. Execute additional JavaScript at runtime: Activate this checkbox to open a field where the JavaScript code can be added. It will be run with the Variable

3. Variable Settings Based on its Type

Settings will vary for different Variable Types. We recommend looking into different options before adding any Variables to your Templates.

3.1. Text Variable

Text Variables can be used to configure and modify the appearance of page headings or subheadings, text blocks or element URLs.

Integrated WYSIWYG Editor enables rich text editing.

  1. Use WYSIWYG Editor: Activate this checkbox if you want to edit the Variable in WYSIWYG Editor
  2. Use JSON Editor: Activate this checkbox if you want to edit the Variable in JSON Editor
  3. Default Value: The text you type here will be shown in the Variable text field as an example

3.2. Select/Multi Select Variable

Select/Multi Select Variables can be used to embed other Portal Pages, Metric Insights Elements and Folders into a Portal Page.

Dimensions, Dataset Data and Static sources are not embedded directly, but implemented in the Code as JavaScript variables that will allow Users to further manipulate Portal Page data.

  1. Source: Select the object you want to embed
  2. Additional Options: If you choose "Static" or "Dataset Data" option in the Source drop-down menu, here you can specify the contents of the list that will be shown in the Portal Page Editor by typing a JSON array

3.3. File Variable

File Variable can be used to download an image file that will be used for Portal Page layout.

3.4. List Variables

List Variables allow storing multiple values inside a single Variable.  These Variables are used for custom menu creation.

The entered data is converted to an array of JSON objects with the field names as keys and the user input as values.

  1. Use JSON Editor: Activate this checkbox if you want to edit the Variable in JSON Editor
  2. Default Value: It is possible to add a Default array of Variable parameters by typing the code here
  3. Additional Options: Enter a JSON array of Variable parameters:
    • Provide parameters as strings or as JavaScript objects
    • Parameters passed as JavaScript objects have three properties:
      • name: parameter name
      • type:  specify parameter value input type:
        • "textarea" for text input
        • "select" for a drop-down list (available values are specified in options property)
      • options: if type is set to "select", provide an array of available options

Example of Additional Options: 

[
 "title",
 "url",
{
"name": "description",
"type": "textarea"
},
{
"name": "display",
"type": "select",
"options": ["left", "right", "top"]
}
]

3.4.1. Configure List Variable

Open the Content tab of the Portal Page Editor (this has to be the Portal Page that uses Template you are creating).

  1. Provide values for Variable parameters
  2. Click [+ Add] to add entries to your Variable

3.5. Color Variable

Color Variable can be used to provide the color picker that shows the HEX code of chosen color.

4. Custom Variables Will Appear in the Portal Page Editor

Having added Variables to a Template, Users can employ these Variables to control the content that is displayed on a Portal Page. All customer-configured Variables are shown in the Portal Page Editor (access the Editor via Content > Portal Pages).

All Variables that have been previously added to the Template will be displayed in the Portal Page Editor according to their pre-configured settings:

  • File Variable will have an Upload button which allows loading image files from the PC
  • Color Variable shows the chosen color and its HEX code in the field below
  • Select/Multi Select Variables will have a dropdown menu with all Metric Insights elements that can be embedded into a Portal Page with this Variable
  • Select Variables will allow Users to embed only ONE element with one Variable whereas "Multi Select" Variables enable embedding Multiple elements