Skip to main content

Creating non-autogenerated custom controls

Suggest edit
Updated on April 22, 2022
Applicable to Theme Cosmos applications

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.

  1. In the header of Dev Studio, click CreateUser InterfaceControl.
  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 the Show in authoring menus check box, and then select the menu in which you want to display the new control.For example: Select the Data Capture menu to group it with the Text input and Date time controls.
    3. To define the image that 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 custom code for the new control.
      Note: You can refer to the UI Gallery for examples of controls that use third-party JavaScript libraries. For more information, see Accessing the UI Gallery. The example controls are in the Extending your Pega UI section.
    5. Optional: To use autogenerated actions in the custom control, include the following JSP:

      <pega:include type="fragment" name="pzActionSetAttributes"/>.

    6. If you want to pass parameters to the custom control, include the p:r JSP tag in the HTML source.
  4. Optional: To pass parameters to the custom control, 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:
Did you find this content helpful? YesNo

Have a question? Get answers now.

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

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

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us