Hey guys...!
Welcome back to my new post where I am going to give you an idea on the UI part in PEGA. User Interface is the main part of an application. This is where we can customize the look and feel of any application. This is where you can make the user feel comfortable. So let's see some important UI elements in PEGA.
Some important things you should know in User Interface Category are:
- Portal
- Harness
- Skin
- Section
Usually, All these rules are present inside one another. Inside the portal, Harness will be called inside which skin is called, and then Section is configured with a Layout that is customized with fields we need.
Let's see them in detail-
1. Portal:
Portal rules specify skins, gadgets, menus, and toolbars that provide the HTML which renders the Process Commander user interface. The appearance of the Process Commander user interface is based on several factors that are coordinated by portal rules.
The Process Commander portals support two kinds of users:
a. Application developers create the applications in the Developer Portal, an OOTB work, test, and development environment in which developer performs unit testing to evaluate an application from many user perspectives, the Developer portal gives us the capability of launching a new browser session without requiring the developer to log off and log back on as the target user.
b. Application users utilize a User portal to enter, update, resolve, and monitor work objects. PRPC includes the end-user and work manager portals. These user portals are routinely customized to reflect the terminology, layout, facilities, and styles appropriate to each user say, manager, employee, etc..,
2. Harness:
The harness is an instance of the Rule-HTML-Harness rule type.
It is used to define the appearance and processing of user forms used in your application to create work items and process assignments.
Pega Platform includes more than a dozen standard harness forms for entering, reviewing, updating, and processing work items and assignments. Your application can override the standard rules to extend and tailor them to specific needs.
Before creating or editing harness, section, or flow action forms, set the Using skin preference to the skin that application users are expected to use. This provides the closest approximation during the development of the run-time look and feel of the form.
3. Skin:
A skin defines the responsive behavior and formatting, such as colors, fonts, images, and layouts used in a Pega application. A skin generates the styling for the application. A skin also defines the responsive breakpoints applied to dynamic layouts. Responsive breakpoints enable your application to work on various devices, such as tablets and mobile phones.
For example, most companies have a corporate color scheme that their applications must follow. You implement the color scheme in a skin, removing the need for architects to manually specify the color scheme every time they use a UI element.
A skin applies formatting through the use of mixins and formats.
a. Mixin
A mixin defines a set of style attributes that can be reused in user interface elements. Mixins allow for defining efficient and clean style repetitions, and an easy way to update the styling. For example, you can create a mixin that defines your corporate color scheme that is then reused for buttons, menus, and headers. If your corporate colors change from blue to orange, you only need to update the mixin with the new color, and any UI element that uses the mixin gets changed.
b. Format
A format defines the styling of a specific UI component. A component is an element that you can style within the skin for eg. a control like a button or a layout.
You can define various style formats for each component. For example, you can define a style for all buttons. You define style formats in the skin and reference the formats on property panels in sections, harnesses, and controls. For example, you can define how inline grids or double grids are displayed to the user.
Every component can have one or more formats defined. These formats are then used throughout the application to control the appearance of the user interface. All components have a default format called either Standard or Default OOTB.
4. Section:
users interact with an application and perform tasks through user forms. A user form can be a data entry form in which users provide information for filing an insurance claim, a display of the legal terms and conditions users must accept before opening a bank account, or a list of bank account transactions during the past month.
In Pega, you build user forms with sections. Sections group information and functionality by context and purpose. Inside a section, you organize UI elements with layouts. Layouts contain rows and columns, defining a set of cells. A cell can be empty or contain various fields and controls.
When you create a view in the Dev Studio, you are using sections to build the view. By default, the fields in the section are organized into a layout that contains a single column. When you add an embedded field such as a field group (list), the list properties are organized into their section.
Layouts:
Sections use dynamic layouts that arrange items in a flexible form, automatically adjusting to screen size. Section rules generally use two types of layouts:
a. A Dynamic layout is a general-purpose layout used to organize a single set of fields. Dynamic layouts support responsive behavior to support use on multiple devices such as computers, tablets, phones. As the screen size changes, the layout shifts its contents to wrap content on-screen.
b. A Repeating layout is used to organize lists, tables, and other repeating structures. Repeating layouts reference a page list or page group, either by referencing a clipboard property or a data page. As the screen size changes, elements display or are hidden to maximize the value of the displayed content.
In Layout, We configure the section with fields as an input field, checkbox, dropdown, radio button, etc.., that we like to show up to the User.
That's it for this post guys. I hope you are enjoying my posts by getting enough knowledge of PEGA. Kindly let me know your thoughts in the comments. Thank you, guys 🙏
check out my previous posts:
Start your journey with PEGA
Handling Data in PEGA
Also, check out PDN ❤ to make your understanding deeper as it is the only best resource you can find online.
As always, I will see you guys in my next post. Bubye 🖐
Top comments (0)