Creating non-autogenerated custom controls
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.
- In the header of Dev Studio, click .
- On the New tab, specify the label, context, and ruleset for the control, and then click Create and open.
- On the HTML tab, define the control:
- Clear the Auto-generated check box.
- 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. - 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.
- 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. - Optional: To use autogenerated actions in the custom control, include the
following JSP:
<pega:include type="fragment" name="pzActionSetAttributes"/>. - If you want to pass parameters to the custom control, include the
p:rJSP tag in the HTML source.
- Optional: To pass parameters to the custom control, on the Parameters tab, define the parameters that pass data between the application and the control.
- Click Save.
- 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 Configuring a custom control by using the rule form.
Previous topic Creating non-autogenerated sections Next topic JavaServer Pages tags