LinkedIn
Copied!

Table of Contents

Custom JavaScript in application design

Version:

Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

You can add custom JavaScript to supplement the standard Pega Platform JavaScript code to meet specific design or usage requirements for your application. For example, you can use custom scripts to modify the content of an HTML document dynamically, add custom client-side validation scripts, error messages, and more.

You can add custom JavaScript to UI components in the following ways:

As a JavaScript text file inside a harness rule
Harnesses are auto-generated, so you cannot edit the harness HTML manually. If you want to include your custom scripts inside a particular harness, you can add custom JavaScript saved as a text file to a harness rule by referencing the file in the Scripts and styles tab of the harness.

For more information, see Adding scripts and style sheets to a harness.

As inline JavaScript inside the UserWorkForm HTML fragment rule
If you want to include your custom scripts inside every harness of the application, you can add a JavaScript function directly to the UserWorkForm HTML fragment rule, which accepts customized script and loads it during every loading of the harness.
The UserWorkForm HTML fragment rule is part of the WorkFormStandard HTML fragment rule, which generates default HTML for every user form.

For more information, see Changing global harness behavior with JavaScript.

As JS script tags, JS files, or HTML fragment rules inside an HTML of a custom section or control
If you want to load custom JavaScript in a custom section or control, you can add your scripts to the HTML source of the section or control. You can include inline JS script tags, JS files, and HTML fragment rules to modify the default code.

For more information, see Customizing sections and controls with JavaScript.

You can call custom JavaScript functions in the following ways:

When an HTML rule is loaded
The function runs when a document is loaded on a web page.
From an event in a control
The function runs every time a specific event occurs. You can configure the event with a Run script action in a control. For example, scripts can be triggered by events such as loading, element focus, or mouse movement. For more information, see Adding action sets to a control.
Did you find this content helpful?

Have a question? Get answers now.

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