LinkedIn
Copied!

Table of Contents

Creating non-autogenerated custom controls

Version:

Only available versions of this content are shown in the dropdown
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 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 the Show in authoring menus check box, and then select the menu in which you want to display the new control.

      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.

      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"/>.

      For more information, see Control form - Actions tab.

    6. If you want to pass parameters to the custom control, include the p:r JSP tag in the HTML source.

      For more information, see p:r JavaServer Page tag.
  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.

Complete the supplementary configuration of the new control:
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.