TABLE OF CONTENTS

• Overview
• Example Portal Page
• Layout Rows
• UI Elements
  • Text / Heading
  • Image
  • Horizontal Lines
  • Datamining Reports
  • Pie or Bar Chart
  • Action Cards
    • Configuration Settings
  • Alerts or Call Outs
    • Configuration Settings
  • Landing Page Auth Redirect
  • Buttons
• Common Controls
  • UI Element Controls
  • Show/Hide Logic for both UI Elements and Rows
    • Logic Operators
    • Evaluation Examples
• Further Support

Overview

The look and feel of Portal Pages is defined by the assigned wrapper. The content of Portal Pages is provided by UI Elements. This solution article explains the different types of UI Elements which can be added to Portal Pages. 

Note that the following pages are not UI Elements and cannot be added directly to a Portal Page (although links to these pages can be added to Portal Pages). These are covered separately:

• Web-based Dashboards Help
• Portal Forms (Surveys) Help
• Test Sign-Offs (UATs)

Example Portal Page

The example below shows the configuration and resulting output of a Portal Page with five UI elements.

1. Text/Heading
2. Action Card
3. Bar Chart
4. Pie Chart
5. Pie Chart

Layout Rows

The Layout Rows are containers for UI Elements. Layout Rows use predefined cell classes, which ensure that the distances between cells are appropriate for the entire row. Each Layout Row can contain between one and six UI Elements. The number of containers per row is controlled by the +/- buttons. The entire row can be moved up or down with the Drag button.

An example of a 3 Column Layout Row:

UI Elements

To add a UI Element a Portal Page must have been created. This article walks through the creation of new Portal Pages.

Once in the Portal Page Editor, drag the required UI Element into the Editor.

Note that the Common settings for each UI Element are covered in a separate section on this page.

• Text / Heading
• Image
• Horizontal Lines
• Datamining Reports
• Pie or Bar Chart
• Action Cards
• Alerts or Call Outs
• Landing Page Auth Redirect
• Buttons

Text / Heading

Once the Text / Heading UI element has been dragged into a Column Row, select this to edit its properties.

1. Control the style of the text
2. Add the text/header content
3. The Common Controls are covered here
4. The Row Show/Hide If Test allows the element to be shown or hidden. More information here

Image

• Image Resource Id: Use the target button to pick an image. The image must have be uploaded into Administration -> Project Resources first. More information on Project Resources
• Image URL: Enter the URL of an image if the image is not available in Project Resources
• Image Alt Text: The text which will be shown if the image cannot be displayed
• Custom Image Class: The CSS class which will be applied to the image
• Maximum Height: The maximum display height of the image (pixels)
• Maximum Width: The maximum display width of the image (pixels) 
• Add a Border around the image: Adds a small rounded border to the image
• Round the corners of the image: Rounds the corners of the image 

Horizontal Lines

Adds a horizontal line to the page.  They are useful to breakup two elements visually.

Datamining Reports

Adding a Datamining Report will display a table of data in the Portal page. It requires that the report has been saved.

• Title: Text which appears above the report
• DMR Report ID: Enter the ID of the report, or use the picker button
• DMR Internal Name: If an Internal Name has been set in the report, this can be entered instead of the Report Id. The advantage of using the Internal Name is that the Portal Page is 'portable', meaning it can be used in a different instance of ManagementStudio (along with the DMR) without needing to modify it. Note use either the Report ID or the Internal Name, not both
• DMR Results Filter: Choose which filters should be applied to the results
  • Results for only this user: Only show the user's data. Note that this requires that the Portal Page is authenticated so that the system can apply an appropriate filter. The data must include MigrationId field for this to work, though this column can be hidden.
  • Original Data Source (Keep Filters): Retain the Source and Filters saved within the report
  • Set Data Source to All (Keep Filters): Set the Source to All Items but retain the Filters saved within the report
  • Set Data Source to All (No Filters): Set the Source to All Items and clear any Filters saved within the report 
  • Reuse DMR cached on page: If any given Datamining Report is used multiple times on a Portal Page with different filters applied, this setting can be used on each instance to improve performance.
• Display the DMR in compact mode: Displays the report with smaller margins
• Add Search, Sort and Page: Adds extra controls to the report
  • Add Filter Row: Adds filters to the top of each column; the Add Search, Sort and Page option must be enabled
• Select Top X Rows: Only display the top X rows of the report
• Columns: Specify which columns to display, uses the internal names
• Filter: Apply a filter to the report. The examples in the table below show how filters can be used when a Datamining Report is added to a Portal Page:

• Bootstrap Table Style: Apply a style to the table. Examples

Datamining Report Tip: To add a link to a page to directly download the report in Excel format, use the syntax:

<a href='[MS-Url-DMR-XXX]?format=Excel'>Download Report</a>

• XXX is the ID of the report

Pie or Bar Chart

Charts use saved Datamining Reports to display data visually. This example shows a vertical bar chart with the count of applications in each Process.

The settings used to create this chart:

• Title: Text to appear on the chart
• Title position: Where the title text appears
• Chart type: Pie Chart/Horizontal Bar Chart/Vertical Bar Chart 
• DMR Report Id: The ID of the report which contains the data to display in the chart
• DMR Scope: 
  • Results for only this user: Only show the user's data. Note that this requires that the Portal Page is authenticated so that the system can apply an appropriate filter. The data must include MigrationId field for this to work.
  • Original Data Source (Keep Filters): Retain the Source and Filters saved within the DMR
  • Set Data Source to All (Keep Filters): Set the Source to All Items but retain the Filters saved within the DMR
  • Set Data Source to All (No Filters): Set the Source to All Items and clear any Filters saved within the DMR
  • Reuse DMR cached on page: If any given Datamining Report is referenced multiple times by different charts with different filters applied, this setting can be used to improve performance.
• DMR Filter: Apply filters to columns. Syntax examples:
  • Applications_Process = '5. Live'
  • Applications_AppVendor like 'micro%'
  • Applications_Process = '5. Live' AND Applications_AppVendor like 'micro%'
  • See the DMR Filter help for DMRs above for further examples
• Category Column: This is the column in the Datamining Report which will be used to create the slices (pie chart) or columns (bar chart). An example could be a Devices report where the Device Type is the Category Column. This would show pie chart slices or bar chart colunms of the Device Type.
• Value Column (Optional): This should only be populated if a calculation is required to create the chart. For example, if the Average Disk Space need to be displayed for each Device Type, the populate the Value Column with the internal name of the column in the DMR showing the disk space. Note that this must be a number without any letters (E.g. 143.2 is fine, 143.2 GB is not)
• Calculation: Choose what type of calculation should be performed for each slice/bar. In the example where the average disk space should be displayed for each device type. choose Average here.
• Colour Column: If coulours have been setup in the Datamining Report, this field can be populated with the internal name of that column. The same colours will then be applied to the chart.
• Legend is visible: 1 in screenshot
• Labels are visible: 2 in screenshot 
• Tooltips are visible: 3 in screenshot  

• Labels Background: Set the colour of the background of the labels
• Labels template: Changes the chart labels format. To only show the value (and not the column name) set it to #= value#

• Tooltips Template: Changes the format of the tooltips. For example, changing it to {0}% would add a percentage character to the end of each tooltip

Action Cards

An Action Card enables you to incorporate an image, text, and a button within a box on a Portal Page. The screenshot above shows a three column row with an Action Card in each column. The button can open another Portal Page, open a Portal Form (also known as a Survey), open a web link, run a PowerShell script or various other functions. 

Configuration Settings

Alerts or Call Outs

Configuration Settings

Landing Page Auth Redirect

This feature allows organisations to point all users at a URL which will redirect to them to different Portal Pages depending on the Blueprint the user in.

Buttons

Common Controls

UI Element Controls

Common controls are available in the side panel for all UI Elements in the Page Builder when editing Portal Pages. They apply to all of the UI Elements:

• Text / Headings
• Images
• Horizontal Lines
• Datamining Reports
• Pie charts/bar charts
• Action Cards
• Alerts or Call Outs
• Buttons

When a UI Element is selected the available settings are displayed in the Common panel. 

Show/Hide Logic for both UI Elements and Rows

Although the logic for both Show/Hide and Row Show/Hide is identical, they differ in that one toggles the visibility of a UI element, while the other affects the entire row.

For a UI Element or Row to be visible, the condition must evaluate as true.

Logic Operators

The evaluation does not support dates and wildcards..

Only keywords associated with the logged-in portal user or project-specific keywords are available for evaluation.

Evaluation Examples

A use case for this function would be to show or hide options when a user logs in to a portal page.

Is the user in a DU? If not show the DU Selection Action Card.

        "[UM-DeployUnit]" == "" 

Is the user in a DU but has no slot booked? Then show the Self Schedule Action Card.

        "[UM-DeployUnit]" != "" && "[UM-DeployUnitSlotStart]" != "" 

Is the User Migration CustomFlag1 ticked?

        "[UM-CustomFlag1]" == "True"

Or

Is the user in the Process called Scheduling? Show a Row with a "Scheduling" Graphic Banner

            "[UM-Process]" -eq "Scheduling"

Is the user in Sub Process called "Ready for migration"? Show a Row with a "Waiting For Migration" Graphic Banner.

        "[UM-SubProcess]" -eq "Ready for migration"

Further Support

If you require further support, please visit ManagementStudio's Service Desk to search the knowledge base or create a new support ticket.