What is Busy Indicator in Pega:
busy indicator in pega is the most common form of providing a system status for users when something is happening or loading. busy indicators use animation to capture attention and inform users of an activity’s progress. busy indicators look and animate in ways that reflect the status of a process. they are never simply decorative.
Steps to Change the Pega default busy Indicator:
1. Create Binary file rule:
- Create a Binary File rule in Designer Studio by selecting +Create > Technical > Binary File
- Binar File record configuration:
| Label | The Binary File rule label and identifier |
| App Name | The directory where the image is stored in the Pega 7 Platform system |
| File Type | The binary file extension (do not include a period “.”) |
- Click Create and Open
- Click Upload File to open the file browser.
- Browse for an image of the type specified in the New/Save as form, and then click Upload File.
- If the file is treated as a sprite, select the check box, and then enter the icon width and height.
- Click Save
- When the file save is successful, the image that was imported & added to the Image Library is displayed.
2. Customize UserWorkForm:
- Search & Select UserWorkForm in Search bar
- Save-as the UserWorkForm in the available Application ruleset
- In HTML source area, Include below code for customize the busy indicator
| <script> pega.ui.busyIndicator.prototype.createIndicatorImage = function() { if(this.oSpan == null) this.initialize(this._sNode); var oSpan = this.oSpan; if (this._message && this._message.length > 0) oSpan.innerHTML = “<img src = ‘webwb/busyindicator.gif’ alt=’loading’ />” + ” ” + this._message ; else oSpan.innerHTML = “<img src = ‘webwb/busyindicator.gif’ alt=’loading’ />”; } </script> |
- js code file link for change busy indicator: https://drive.google.com/drive/folders/1aCsDa7KNyYBbGcG5hfnNSyjhFRDBCWLA?usp=sharing
- Save & run any castype or Open any rule record to check if the busy indicator was changed
Youtube Video:
