Customizing sections and controls with JavaScript
You can extend the functionalities of your application by adding custom JavaScript to the source code of a non-autogenerated section or a custom control. For example, you can add JavaScript to a section to launch a client-side validation of a specific field when the section is rendered.
- In Dev Studio, open a custom section or control that you want to modify.
- If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.
- On the HTML tab, in the text field, add your custom
scripts in one of the following formats:
- An inline JS script tag
- A JS file
- An HTML fragment
Note: Use the <pega:include>JSP tag to run the HTML fragment that contains your custom script when the system runs the HTML rule of the section or control. You can use the<pega:include>JSP tag to incorporate HTML fragments, JS files, and other HTML rules into the HTML of your non-autogenerated section or custom control.For example, the following JSP tag inserts the MyValidate HTML fragment into the currently processed stream:
<pega:include name='MyValidate' type='Rule-HTML-Fragment'></pega:include>.
For example: This script validates input for a number control: <script> /* Integer control: No dots allowed */ function validateinput(e) { if (e.target && e.target.type === "number") { if (e.target.getAttribute("validationtype").indexOf("integer") > -1) { /* remove all non-number characters (i.e. dots) */ e.target.value = e.target.value.replace(/[^0-9]/g, ''); } } } document.addEventListener("input", validateinput); </script> - On the rule form, click Save.
- Create or open an autogenerated section to include your custom section or
control.For more information, see Creating sections.
- On the Design tab, perform one of the following tasks to
include your section or control in the main section:
Choices Actions Embedding the non-autogenerated section - Expand the Structural list.
- Drag the Embedded section onto the work area.
- In the Section include modal dialog box, in the Section field, select By name, and then provide the non-autogenerated section's name.
Including the custom control - Expand one of the lists with controls:
- Data capture
- Pickers
- Actions
- Data display
- Pick and drag any control onto the work area.
- Click the View properties icon of the control.
- In the Cell properties window, near the control name, click Change.
- In the Custom list, select Other.
- In the list next to the control name, search for or enter your custom control's name.
- Click Submit.
- On the section form, click Save.
- Creating non-autogenerated sections
Create non-autogenerated sections with custom scripts to supplement the standard Pega Platform JavaScript with extra functionalities. For example, you can add custom client-side validation scripts to your section.
- Creating non-autogenerated custom controls
Improve the look and feel of your UI by performing advanced styling and adding custom behaviors to non-autogenerated controls. For example, with custom controls that use third-party JavaScript libraries you can render a wide range of versatile components, such as widgets and graphs.
Previous topic Static content bundles for Theme Cosmos Next topic Creating non-autogenerated sections