TABLE OF CONTENTS
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.
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 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.
- Control the style of the text
- Add the text/header content
- The Common Controls are covered here
- 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.
- Title: Text which appears above the report
- Report Id: Enter the ID of the report, or use the picker button
- DMR Results Filter: Choose what filters should be applied
- Results for only this user: This
Pie charts/bar charts
Action Cards
Alerts or Call Outs
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.
| Common Control | Details |
|---|---|
| Add a Border around a UI Element | Adds a thin line around the element. |
| Align | Alignment within the UI Element. Default, Left, Right, Centre. |
| UI Element Div Name | Assign a NAME to the Div that contains this UI element to enable targeting with JavaScript. New JavaScript code can be added in the Custom JavaScript/CSS section of the Portal Page Editor. |
| UI Element Div Class | Assign a CLASS to the Div that contains this UI Element. New classes can be created in the Custom CSS area of the Portal Page Editor. |
| Show/Hide If Test | This is detailed below in the Show/Hide Section |
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
| Operator | Alternative Operator | Logic |
|---|---|---|
| == | -eq | Equal |
| != | -ne | Not equal |
| > | -gt | Greater than |
| >= | -ge | Greater than or equal to |
| < | -lt | Less than |
| <= | -le | Less than or |
| && | -and | And |
| || | -or | Or |
| ! | -not | Not |
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.