Skip to main content
LinkedIn
Copied!

Table of Contents

Customizing sections and controls with JavaScript

Version:

Only available versions of this content are shown in the dropdown

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.

Ensure that the section or control that you want to modify with custom JavaScript is non-autogenerated. For more information, see Creating non-autogenerated sections and Creating non-autogenerated custom controls.
  1. In Dev Studio, open a custom section or control that you want to modify.

  2. If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.

  3. 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
      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>.

    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>
    
  4. On the rule form, click Save.

  5. Create or open an autogenerated section to include your custom section or control.

    For more information, see Creating sections.
  6. 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
    1. Expand the Structural list.

    2. Drag the Embedded section onto the work area.

    3. 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
    1. Expand one of the lists with controls:

      • Data capture
      • Pickers
      • Actions
      • Data display
    2. Pick and drag any control onto the work area.

    3. Click the View properties icon of the control.

    4. In the Cell properties window, near the control name, click Change.

    5. In the Custom list, select Other.

    6. In the list next to the control name, search for or enter your custom control's name.

  7. Click Submit.

  8. 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.

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.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us