How to develop a UI in PEGA to collect a list of items — using Table Layout
This is the second article on the User Interface development in PEGA using the traditional methodology as opposed to the modern low-code approach. I’ve already explained the fundamentals of the traditional UI development approach for PEGA applications built on section-based architecture in the following article.
This article should be regarded as an extension to the above. Before you read on, I would strongly recommend you to go through the first article (if you’ve not done already) to build a decent foundation, and then come back here.
In the previous article, I’ve covered how to collect the details of an entity (Insured) from a user with the help of a user form. The intent behind this article is to illustrate how you can develop a UI featuring a table layout to efficiently collect the details of a group of entities e.g. a group of dependents (of an insured person covered under a group medical insurance).
Let’s dive into it!
Step# 1— Add a step in Case Type
I’m going to use the same Case Type — Medical Insurance, created in the previous article. I’ve added a step in the first stage to collect the details of dependents as shown below for which I’m going to develop the UI.
Remember to Save the Case Type.
Step# 2— Data Modelling
Since, a dependent person can have multiple attributes such as — name, relationship with insured, DoB, etc., it can be looked at as an entity that can be modelled in PEGA with the help of a Data class and relevant properties.
I’ve created the following data class: MyOrg-Data-Dependent to model a dependent.
In addition, in the above Dependent data class, I’ve created the following properties that represent the attributes of a dependent.
As a last step in the data modelling exercise, I’ve created a page list property, named DependentsList, in the Work class associated with the Case Type (MyOrg-MyDiv-Alpha-Work-MedInsurance).
Note that I’ve specified the MyOrg-Data-Dependent class as the Page definition in the property ruleform which means that each page (or element) in the page list would be an object of the MyOrg-Data-Dependent class. Hence, the page list would represent a group of dependents.
Insight — A page list property in PEGA can be paralleled to an array of class objects. The page list — DependentsList — can be viewed as an array of the objects of the MyOrg-Data-Dependent class.
Step# 3 — Configure the rules
As explained in the previous article as well, you need to configure the following rules in PEGA to develop the UI for a user step-
- Flow rule
- Flow Action
- Section
Let’s start with the flow rule.
a) Flow Rule Configuration
As described in the last article, select the process in the Case Type, and click on the Open Process link to open the associated flow rule.
Double-click on the “Collect Dependent Details” Assignment shape to view its properties.
Keep or change the flow action name. I’ve changed to AddDependentsFA.
Thereafter, create the flow action as described in the last article.
b) Flow Action Configuration
On the flow action ruleform, provide a name for the section. I’ve given AddDependentsWrapper as the name.
Then, create this section rule, and convert it to full section editor by following the approach illustrated in the previous article.
c) Section Configuration
I’m going to allow user to add a group of dependents in a tabular format. PEGA provides the Table layout for arranging the fields in the tabular format.
From Structural menu in the tool bar, select-and-drag the Table layout, and drop it in the existing Dynamic Layout
Double-click on the Table layout to view its properties
Since, this table layout is intended to add a group of dependents, you need to execute it in the context of the page list — DependentsList — that represents an array of objects of MyOrg-Data-Dependent class. In other words, you need to use the DependentsList page list as the data source of the table layout.
In order to do it, in the Data source section, make sure that Source field is set to “Property”, and select .DependentsList in the List/Group field as shown below.
In the same modal dialog, change to the Operations tab, and select Inline radio button for “Row editing” as shown below. This would allow user to edit a dependent information by clicking on the respective row in the table layout.
Submit the above modal dialog.
Next, you need to add the fields in the table layout to allow a user to enter the details of a dependent, such as — Full Name, Relationship with Insured and Date of Birth.
Let’s start with the Full Name field. The first row within the table is meant for the label of the field, and the second row is intended for the control (explained in the last article) associated with the field.
First, I’m going to define the label of the field. Select the cell in the first row, and click on the gear icon to view its properties.
Enter Full Name as the label, and submit the modal dialog.
Thereafter, I’m going to add a Text input control for the field from the Data capture menu of the tool bar (as described in the previous article). Drag and drop the Text input control inside the cell in the second row of the table as shown below.
Then, select the same cell, and click on the gear icon to view its properties.
Since, I want to store the dependent’s Full Name value (entered by a user in the UI field) in the .FullName property of the MyOrg-Data-Dependent class, I’ve referred the same property in the modal dialog as shown below.
Submit the above modal dialog. The Full Name field is added in the table layout.
Next, let’s add another field — a dropdown list — to collect the relationship of dependent with the insured. Select the entire first column in the table, and insert another column after the first through the icon available in the tool bar in the header as shown below.
First define the label in the second column by following the approach illustrated above.
Then, add the dropdown control from the Pickers menu (of the toolbar) in the second column.
Configure the dropdown control to refer the .Relationship property of MyOrg-Data-Dependent class as shown below. I’ve also included a placeholder.
And, I’ve defined the data source of the dropdown in the form of a Local List in the property ruleform as shown below. Remember to Save the property ruleform after defining the local list.
I’ve already covered how to configure a drop down control and define a local list as its data source in the previous article.
Lastly, let’s add one more field for dependent’s date of birth as shown below, with the same approach.
Use the Date time control for the Date of Birth field. Configure the control to use the .DateOfBirth property of MyOrg-Data-Dependent class as given below.
I’ve explained the other configuration aspects of the dropdown control in the last article.
Save the section rule.
Step# 4— Save the rules
- Save the Section rule — AddDependentsWrapper, if not done already.
- Switch back to the Flow Action ruleform — AddDependentsFA — and save it.
- Change to the flow rule — CreateForm_Default. Submit the Assignment Properties modal dialog, if not done. Verify the flow action name in the modal dialog before submitting. And, save the flow rule.
Step# 5— Verification
In the previous article, I’ve shown the three ways to verify your changes —
- Through [Save and run] button on the Case Type — Medical Insurance
- Via the Create menu in the header
- From the User Portal
You can verify in either of the ways. I’m going to do it through the Create menu.
Fill the insured details in the first screen, and Continue.
It would take you to the next screen to add dependents as given below.
Use the Add item link above the table to add a dependent row.
You can add as many dependent rows as required.
Double-click on a row to edit it.
Select a row, and click on Delete link above the table to remove it.
Click on [Create] button, and launch the clipboard tool to review the DependentsList page list in memory.
Make sure to select the thread related to your case instance in the clipboard.
And, look for the pyWorkPage node. Expand it to view DependentsList page list as shown below.
Expand the DependentsList node to view the elements/pages in the page list.
For each dependent added to the table in the screen, a corresponding element/page is included in the DependentsList page list. Click on the individual element in the page list to view the respective dependent information entered by user in the screen.
Step# 7— Optional: Add custom buttons to add/delete item
Optionally, you can add your own buttons to add or delete a dependent row from the table.
Go to the section rule. In the table layout, select the cell with the standard Add Item and Delete buttons, and click on the trash icon in the header toolbar to remove the standard buttons.
Now, let’s add custom buttons.
I’m going to start with the button to delete dependent row. The delete row button is going to appear against each row. Add a new column after the Date of Birth column in the table using the approach explained above. And, drag & drop the button control in the new column as shown below.
Note — Button control is available in the Action menu in the header.
Remove the default label of Button from the new column.
View the properties of the button. Since, I want the button to appear as a trash icon without any caption, I’ve removed the button caption, changed the Image source to Icon Class, and have specified the Class value of pi pi-trash as shown below.
In the same Cell Properties modal dialog, switch to Presentation tab, and change the Control format to Simple to remove the button border.
Finally, you need to define the button behavior by creating an action set. An action set is a combination of an event and the action to be performed on the trigger of the event. Since, the button is supposed to delete a dependent row on the click, the event, in our case, is the button click, and the action is to delete the row. Change to the Actions tab, and click on the [Create an action set] button.
Click the “Add an event” link, and select the Click event from the list.
Thereafter, click on the Add an action -> All actions.
And, select Delete item action from the list.
This completes the action set.
Submit the modal dialog.
Next, let’s add another button to add a new dependent row. I’m going to add it at the bottom of the table. Drag and drop another button control in the Action Bottom part of the table as illustrated below.
Configure the button as given below. I’ve defined the button caption of “Add Dependent”. Since, I want a plus icon to display along with the button caption, I’ve changed the Image source to Icon Class, and have provided the Class value of pi pi-plus.
Again, I’ve changed the Control format to Simple to remove the button border.
Because, the button is supposed to add a new dependent row on a click, I’ve created an action set using Click event and Add Item action, as given below.
Submit the modal dialog, and save the section rule.
Let’s verify from the User Portal this time. Launch the User Portal, and create a Medical Insurance case, as described in the previous article.
Fill the insured details in the first screen, and continue.
You would see a custom button to add a dependent as shown below.
Click on it, and add a dependent row. You would view a custom trash icon in the row to delete it.
Well, that’s all for now. Stay tuned for more learning.
To learn more about Pega, be sure to Follow on Facebook & YouTube
Facebook:
YouTube:
