Portal Page Templates (prior to 6.2.1)

Portal Pages allow for a wide range of customizations. They are configurable via Layouts, which determine the structure of a page, and Templates, which provide a more basic set of controls for your end-users to select options via single and multi-select, and by entering simple (unformatted) or rich (formatted) text.

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, and is written for Administrators of Metric Insights.

1. Access Admin > Portal Pages > Templates tab

To add a new Template, at the bottom of the screen click [+ New Template].

The Add Portal Page Template pop-up opens.

2. Name your Template

  1. Name: appears in the Templates list in Metric Insights (see example in Step 1)
  2. Internal name: is used to build a page URL
  3. Save your entries

3. Configure your Portal Page 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. Optionally, select a Preview Image
  3. Optionally, switch from default Catalog Layout to a custom Layout (for details, refer to Layouts for Portal Pages)
  4. If you opt to use a personalized Layout, choose one from the drop-down
  5. Enter the HTML, CSS and/or JavaScript Code in the provided field
  6. Save to make changes effective

4. Modify your Template with custom Tags

[Release 6.2.4]: 'Tags' renamed to 'Variables'

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

NOTE:

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

4.1. Add custom Tags to the Template

  1. Add your Tags to the Code
  2. Define your Tags' settings in the corresponding section:

4.2. Assign Tag Types

Clicking [+Tag] opens the Tag's settings.

Configuration options vary based on the Type assigned to a Tag:

  1. Text
  2. Select
  3. Multi Select

4.3. Specify Tag settings based on their Type

Settings will vary for different Tag Types. Therefore, we recommend looking into different options before adding any Tags to your Templates.

4.3.1. How to configure a Text Tag

Text Tags 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.

  • Required settings: Name
  • Optional settings: Use WYSIWYG Editor, Default Value, Additional Options

4.3.2. How to configure a Select/Multi Select Tag

Select/Multi Select Tags 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.

  • Required settings: Name, Type, Source
  • Optional settings: Additional Options

4.4. Custom Tags will appear in the Portal Page Editor

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

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

  • "Select/Multi Select" Tags will have a dropdown listing all Metric Insights elements that can be embedded into a Portal Page with this Tag.
  • "Select" Tags will allow Users to embed only ONE element with one Tag whereas "Multi Select" Tags enable embedding Multiple elements.

5. Customize image size with the "resize" option

The size of the Images embedded into Portal Pages, can be modified with the resize/Y feature.

To change the size of the image, append /resize/Y at the end of the image URL. You can any of the two options:

  1. resize/Y/width/<width value>
  2. resize/Y/height/<height value>

Example: URL of the resized image as displayed in browser https://<instance name>.metricinsights.com/content/index/preview/element/842/segment/0resize/Y/width/268

6. Use case: configuring a Portal Page with custom Tags

Below is an example of a Portal Page built with a customizable Template.

The process is as follows:

  1. Add Tags to the Template
  2. Embed content using pre-configured Tags
  3. Verify how content is displayed on a Portal Page

6.1. Add Tags to a Template

  • As described in Section 4 of this article, we have added 5 custom Tags to the Template that will allow us to embed 5 elements into our Portal Page: 3 Folders, 1 Dataset Report and 1 Visualization from an external platform.
  • Dataset Reports allow adding various components (one or several Tables, Charts or External Visualizations). You can get the embed code for each component from Dataset Report Component Editors (See details in Get the Embed Codes for Dataset Report Components)
  • Tags should be named in such a way that allows you to easily understand and remember which elements are going to be embedded.

6.2. Embed content using pre-configured Tags

Custom Tags are associated with a specific Template. Thus, to be able to embed content via Tags, it is necessary to add the required Template to the Portal Page you are building.

  1. In the Add Portal Page pop-up, specify the Template you want to use for this Page.
    • Access the Add Portal Page pop-up via Admin > Portal Pages > click [+Portal Page] at the bottom of the Portal Page list.
    • For details, go to Overview of Portal Pages
  2. All custom Tags that have been added to the Template will show in the Portal Page Editor.

6.3. Verify how content is displayed on a Portal Page

Below is an example of a Portal Page that was created for the Sales Operations team, based on the the Template shown above.