Portal Pages - Building Pages

Modified on Thu, 17 Oct at 11:13 AM

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.



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

Datamining Reports

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 ControlDetails
Add a Border around a UI ElementAdds a thin line around the element.
AlignAlignment within the UI Element. Default, Left, Right, Centre.
UI Element Div NameAssign 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 ClassAssign 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 TestThis 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


OperatorAlternative OperatorLogic
==-eqEqual
!=-neNot equal
>-gtGreater than
>=-geGreater than or equal to
<-ltLess than
<=-leLess than or 
&&-andAnd
||-orOr
!-notNot



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.