Creating custom controls by using third-party JavaScript libraries

Create custom controls to add new features to your application. By using third-party JavaScript libraries, you can render a wide range of versatile components, such as widgets or graphs, with less effort.

  1. In the header of Dev Studio, click Create > User Interface > Control.
  2. On the New tab, specify the label, context, and ruleset for the control, and then click Create and open.
  3. On the HTML tab, define the control:
    1. Clear the Auto-generated check box.
    2. Select Show in authoring menus, and then select the menu in which you want to display the new control.
    3. To define what image the authoring menu displays next to the control, click the Show Image View icon, and then select an image from the Image Catalog.
    4. In the HTML source field, enter the HTML code for the new control.
      • You can refer to the UI Gallery for examples of controls that use third-party JavaScript libraries. To access the Gallery, click Configure > User Interface > Gallery > UI Elements. The example controls are in the Extending your Pega UI section.
      • JSP tags in your code must refer to the third-party library that you use. For more information about JSP tags supported by Pega Platform, see JavaServer Pages tags.
      • For more information about configuring actions in custom controls, see Control form - Actions tab.
  4. On the Parameters tab, define the parameters that pass data between the application and the control.
  5. Click Save.
What to do next: Complete the supplementary configuration of the new control:
  • Upload the library file and all related CSS and JS scripts to the application. For more information on adding text files, see Text File rules.
  • If your control triggers an unregistered request error message, you need to secure the control. For more information, see the Community article Configuring a custom control by using the rule form.