Table of Contents

Creating custom controls by using third-party JavaScript libraries


Only available versions of this content are shown in the dropdown

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 configuring actions in custom controls, see Adding action sets to a control.
  4. On the Parameters tab, define the parameters that pass data between the application and the control.

  5. Click Save.

Complete the supplementary configuration of the new control:
  • Upload the library file and all related CSS and JS scripts to the application.
  • 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.

Have a question? Get answers now.

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