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

• Creating auto-generated custom controls
• Controls