TABLE OF CONTENTS

• Overview
• Example Portal Page
• Layout Rows
• UI Elements
  • Text / Heading
  • Image
  • Horizontal Lines
  • Datamining Reports
  • Pie or Bar Chart
  • Action Cards
  • Alerts or Call Outs
  • 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

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 
• DMR Results Filter: Choose which filters should be applied to the results
  • Results for only this user: Filter the report to only show rows where the User Migration record is included. This is useful for listing items which are linked to a user. E.g. a user's applications or devices. Note that the report must include MigrationId field for this to work. This column can be hidden.
  • Results based on DMRs own filters: Retain the filters saved within the report 
  • Remove any filters and show all results: Remove all filters saved in the report and display all records
• 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: Filter the report to only show rows where the User Migration record is included. This is useful for listing items which are linked to a user. E.g. a user's applications or devices. Note that the report must include MigrationId field for this to work. This column can be hidden.
  • Results based on DMRs own filters: Retain the filters saved within the report 
  • Remove any filters and show all results: Remove all filters saved in the report and display all records
• 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%'
• Category Column: This is the column in the Datamining Report which will be used to create the slices (pie chart) or columns (bar chart)
• contains the data to display in the chart. Note that it uses this internal name of the field. 
• Value Column: 

Tip: To change the chart labels to only show the value (and not the column name) set Labels Template to #= value#

Action Cards

Alerts or Call Outs

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.