PROGRESS BAR - UI CONTROL
Controls in PEGA
Controls are instances of Rule-HTML-Property class. They are part of the User Interface category. We use controls to define how properties appear on user forms, correspondence, and other HTML forms, for both display and for accepting user input. For properties of mode Single Value, a control can be identified in the Control field of the Property rule form. Pega also provides a set of Standard auto-generated controls like pxButton, pxCheckbox, pxIcon and many more. For non-auto generated controls, you can enter HTML source directly into the HTML Source text area.
Progress Bar
A progress bar is a graphical control element used to visualize the progression of any event or progress. Let us create a non-auto generated progress bar conrol which progresses with each filled user input in a section.
1. Open Designer Studio. In the Records explorer, expand User Interface and select Control.
2. Create a control - P4EProgressBar
3. Uncheck the auto-generated checkbox in the HTML tab.
4. Since we have to include the css file required for the control in the HTML, Let us create the css file.
5. From Records Explorer expand Technical >> TextFile
6. Include the css styles required for your control in your text file.
7. Include the css link file in the Control's HTML source to fetch the styles.
8. Add the HTML code for your control in the Source code box.
NOTE: The tools.getActive() method used in the code plays a vital role in fetching the property value from Pega clipboard.
Similarly, we have numerous methods which integrate the code to Pega properties.
Here are a few examples of code for different types of progress bar. Similarly, you can experiment with your own styles.
9. Now since the control is ready, let's include it in a section and see how it works.
10. Open the section where the progress bar is to be added. Drag and drop any OOTB control - eg. Label - into the layout where the control has to be placed.
11. Open the Label properties and click change to change the type.
12. From the List of controls select other.
13. In the Label field, drop-down and select your control name.
14. Let's create a property called Percentage and call it here.
15. Here we want the progress bar to load only when the user clicks on the First checkbox.
16. Open the cell properties and in the Actions tab define an Action set to refresh the section and run a data transform.
17. This data transform defines the percentage value of how much the progress bar has to load for each question.
You can set any number of properties and percentage values to be loaded. If necessary condition to redefine the progress bar can also be included.
All the configurations are done. Let's test it by running the case. I have attached the test output video for reference.
It works like a charm!!
Similarly, a lot of new controls can be designed and added in Pega.
Files we used in this exercises for your practices
HAPPY LEARNING!!!