User Interface

 

[Portal 🡪 Harness 🡪 Container 🡪 Section 🡪 Layout]

✪      Pega is a low-code platform. Low-code describes an application-building development environment that uses graphical user interfaces … (App Studio)

User Interface components:

⮚      Portal rule: [Portal > Harness > Container > Section > Layout]

Is the web channel interface (appeared soon after sign-in to PRPC) that determines the layout and appearance of ‘user and developer workspaces’ and is an instance of Rule-Portal class

●       Dashboard: Displays recent operational information about the state of work and processes in Case Manager Portal of PRPC

●       Contains single Harness

●       OOTB Portals: Developer (Final – can’t be overridden) & pyCaseManager7 (editable)

Developer portal is also called Designer Studio till V7, Dev Studio from V8

●       Portal customization steps (using predefined rules):

☞      Better use the below predefined rules as it is

Access Group > Portal > Harness (Data-Portal) > Header (pyPortalHeader Section) > Left panel (pyPortalNav Section) > Central panel (pyPortalContent Section) > pyDashboard7 (Harness)

⮚      Harness rule: [Harness > Container > Section > Layout]

It defines the work object form (also Rule form & Portal form) of type Rule-HTML-Harness

☞      Work object forms (also called application related Screens i.e. web pages)

●       Harness contains n number of Containers which can again contain n number of Sections which in turn contains Layouts consisting Controls & Properties

●       Container is an element to contain n number of Sections in it. When you try to create a harness, default layout is screen layout. A harness can contain only one screen layout

●       When you try to create harness it contains a screen layout by default. We can change it as Container by drag drop it from Structural menu

●       Harnesses can be nested

●       Some of very important OOTB Harness types:

1.      New harness (Flow > Process tab):

🡪    Called in Flow > Process tab

🡪    Gives as brand new screen to capture initial WO (Case) info from user

🡪    Creates Case through Done button by AddWork activity

🡪    NewDefaults stub activity is invoked on New harness renders

🡪    Imp Sections on it: pyEnterCaseDetails / pyNewCaseHeaderInner

2.      Perform harness (Flow > Assignment shape): Allows a user to perform an action on assignment by selecting a Flow action (either Local & Connector actions)

🡪    Called in Assignment shape

🡪    Updates Case through Finish Assignment activity called in its submit button

🡪    PerformDefaults stub activity is invoked on Perform harness renders

🡪    Imp Sections on it: pyCaseActionArea

3.      Confirm harness (Flow > Process tab): Gives read-only confirmation display of WO (like acknowledgement)

🡪    Called in Flow > Process tab

🡪    Gives read-only confirmation display (like acknowledgement)

🡪    Confirmation text can be customized by Assignment shape itself

4.      Review harness: It appears when try to open the pending WO

🡪    Gives read-only info of the Closed Case

5.      Reopen harness: It appears when try to open the closed WO

🡪    It reopens resolved Case

⮚      Section rule: [Section > Layout > Cells]

It defines the content as reusable horizontal component (portion) appeared on the Harness, is of type Rule-HTML-Section

●       General path to create Section rule:

🡪    Create menu > User Interface > Section

🡪    Enter Label & Identifier

🡪    Enter Context (Application, RuleSet Name, RuleSet Version & Class)

☞      Follow the same path to create any other rule

●       Section contains Layouts (n number), that in turn contains n number of cells (Controls & Properties)

☞      Controls (as front end) represent HTML & Properties (as back end) represent Variables

☞      Caution: Controls & Properties must be compatible

●       Sections can be nested

●       Layout (an element, not a rule):

🡪    Layout is a UI element that aligns (organizes) the controls and properties within a section through Cells

🡪    Layout behavior is defined through its Properties panel & Cell behavior is defined through its Cell Properties panel

▪         Some of its characteristics (Attributes) for both Fields & Layouts are like –

Label / Place holder [A symbolic value (in grey mode) used in place of a real value] / Helper text (formerly Tooltip) / Visibility / Disability / Required / Localize (language specific, ex: చిరునామా for address field) / Read only / Width / Min / Max / Text align (left or right) / Container & Label formats / Actions against Client events …

Colors / Images / Icons / Menus & Navigations / Nested Layouts & Sections

★      Place holder: The short hint is displayed in the field before the user enters a value

★      Helper text (formerly Tooltip):  The short hint is displayed over the field when you hover over it

★      Visibility: It shows or hides the field

★      Disability: Can’t be usable and clickable

★      Localize: Language specific

▪         Some of its Layout characteristics are like –

★      Layout format: Aligning the fields into column structure

Inline: Column after column format

Inline grid double: 2-Column format

Inline grid triple: 3-Column format

★      Container format: Box format (like Colors, paddings …)

★      Pagination (also Paging): is distributing records across pages within a Web page [Appears in repeating dynamic layouts only]

☞      the sequence of numbers assigned to pages in a book or periodical within a page (container page)

★      Defer load contents: To delay loading at run time

●       Types of Layouts:

1)      Dynamic Layout: Horizontal - Responsive behavior (HTML5 feature) through its <Div> tag

2)      Column Layout: Vertical - Responsive behavior

3)      Repeating Layouts:

🡪    Table (Repeating Grid Layout): To hold list of records in embedded format [through its <Table> tag of HTML]

🡪    Repeating Dynamic Layout: To hold list of Sections in embedded format [through its <Div> tag of HTML]. So it can be used for all devices for responsive behavior (adjusted according to screen size)

4)      Layout Group:

 

 

🡪    We can group other layouts, Sections, Accordions, Menus, Mobile tabs etc…

1.      Layout Group (Accordion): only one Section is expanded at a time while remaining are collapsed (All Sections in it are in row format)

2.      Layout Group (Menu): All Sections in it are in dropdown format as menu options

3.      Layout Group (Tab): All Sections in it are in tabbed format

5)      Screen Layout: Used in Portal Harness

🡪    It defines the overall structure of Portal Harness (single screen in the Portal). When you try to create harness it contains a screen layout by default. A harness can contain only one screen layout

🡪    Screen layout (default) is used define the overall structure of Portal Harness (single screen in the Portal development). whereas Container is used to define our Screen (application related web pages) structure

6)      Free form Layout: Deprecated, fixed columns

7)      Smart Layout: Deprecated, free columns – but not flexible

●       Sections are usually defined in Data- classes (not in work classes)... a)      Create Data class and create Section in it b)      Create a Page property in work class and specify the above Data class as Page definition ●       Use this Data class Section in our Work class Section by Page context & better map (initialize) .pyLabel = “ “ in Data Transform  to load Section on UI

⮚      Control rule (front-end) in Pega:

Defines the presentation style of the Property and is of type Rule-HTML-Property – whereas Property rule (as back-end) is just like a variable that stores the data

●       Some of important Controls (called HTML elements):

🡪    Text boxes, Text Areas, Button, Links …

🡪    Checkbox: Single selection of TWO choices

☞      To configure slider Checkbox button as:

Use CSS class (in Cell read-write classes field): iOS iOS-slider or right-aligned phone ios-slider or iOS rf

🡪    Radio buttons: Single selection of FEW choices

🡪    Dropdown: Single selection of fixed LIST choices (LOVs)

Note: Cascading dropdown list is a series of dependent dropdown list controls in which whenever the parent dropdown changes, the dependent child dropdown should be updated & refreshed automatically with corresponding LOVs

🡪    Auto complete: Single selection of HUGE choices (LOVs) with a partial list of text-matched choices

🡪    Accordion: is the UI control through which only one Section is expanded at a time while remaining are collapsed

🡪    Tooltip Control (in V8):

It shows the section as a pop-up Smart Info (with dynamic data) on mouse hover

Note:

Smart Label Control (prior to V8) is replaced by Tooltip Control (in V8) whereas

Tooltip Control (prior to V8) is replaced by Helper Text Control (in V8)

Clickable check box: It provides the close button on pop up to get it closed

●       Caution: Controls & Properties must be compatible

☞      Property rule (as back-end): Just like a variable that stores the data temporarily in Clipboard page (later it gets saved into db), is an instance of Rule-Obj-Property

Ex: Emp ID, First Name, Last Name, DOB, Age …

●       The default format of DateTime (on Clipboard):

20210713T032301.331 GMT [i.e. “dd/MMM/yyyy hh:mm:ss” “IST”]

☞      Field Value rule: To make applications Language specific (Localization) such as defining the Labels, Place holders, Captions, Helper texts, Tooltips, LOVs etc., is an instance of Rule-Obj-FieldValue

o   Localization (or Internationalization): It defines the Application in local languages for target users using Filed Value rules. It’s symbolic expression is i18n (18 = 18 letters)

⮚      Skin rule: It defines the presentation of content in Application & generates the CSS styles, and of type Rule-Portal Skin

●       Mixin (Reusable style variables): is a combination of typography (style and appearance of printed matter), border, and background styles and can be used everywhere in the Skin

⮚      Navigation rule:

●       To define the structure of Menu bar as multi-level links, is of type Rule-Navigation

●       Provides the list of multi-level links as Menu bar structure such as Button menu, Link menu

●       Each Navigation rule represents one Level

⮚      Paragraph rule: It provides rich-text editing to include it in Section, Correspondence, Smart Label control so on, of type Rule-HTML-Paragraph

⮚      HTML rule (Hand coded complete HTML form):

To define the screens completely with hand coded HTML or JSP, of type Rule-Obj-HTML

⮚      HTML Fragment rule (Hand coded reusable piece of HTML form):

Is just like 'HTML Rule' but it is reusable piece of code (HTML, Java Script, CSS, JSP), of type Rule-HTML-Fragment

●       Stream Processing:

☞      Conversion process of UI rules (from d/b) into HTML Forms (to end user)

☞      Best practice is to organize the fields into n number of Sections to avoid Stream processing issues