Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Customizing harnesses globally with JavaScript

Updated on February 7, 2022

Customize all harnesses in your application by modifying the default JavaScript code.

For global changes in your application, you can include the customized scripts in the UserWorkForm HTML fragment rule, which is called during the loading of a harness.

Caution: Pega does not provide support services and troubleshooting for custom JavaScript code, such as scripts that override the default application behavior.
Before you begin: Create custom JavaScript code that you can use later to override the code in some of the Pega Platform rules.
  1. In the header of Dev Studio, in the Search field, search for and open the UserWorkForm HTML fragment rule.

  2. Click Save As.

  3. On the New tab, in the Context section, specify the context of the fragment rule:

    1. In the Development branch list, select the branch.

    2. Select the check box with your application name.

    3. In the Add to ruleset list, select the ruleset that is specific to your application.

    Note: Do not change the name of the fragment rule.
  4. Click Create and open.

    Result: The HTML fragment rule is now available to the application ruleset.
  5. On the HTML tab, in the text field, enter your custom JavaScript code.

    For example: To change the default busy indicator image, perform the following actions:
    1. Create a binary file with your custom image.
    2. On the HTML tab of the UserWorkForm HTML fragment rule, in the text field, add the following snippet in HTML Source:
       pega.ui.busyIndicator.prototype.createIndicatorImage = function() {
       if(this.oSpan == null)
       var oSpan = this.oSpan;
       if (this._message && this._message.length > 0) oSpan.innerHTML = "<img src = 'webwb/CustomPreloader.gif'   alt='loading' />" + " " + this._message ;
       else oSpan.innerHTML = "<img src = 'webwb/CustomPreloader.gif' alt='loading' />";
  6. In the upper-right corner of the screen, click Save.

    Result: All of the harnesses of your application now include the custom script, which runs whenever a harness is loaded.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us