Creating specialty components in the Pega 7 Platform
A specialty component is configured as a section with the Specialty component setting enabled on the HTML tab of the Section rule form. The specialty component can be incorporated almost anywhere in your application. It supports rule specialization and resolution, and promotes reusability.
For specific examples of specialty components and sample code, see the following articles:
- Specialty component example: jQuery slider in a text input
- Specialty component example: jQuery UI autocomplete email picker
The Pega 7 Platform provides the infrastructure to easily integrate components into your user interface. This capability includes support for:
- Scalar and complex properties
- Single Value, Page, Page List, and Page Group properties
- Multi-instance components
- JSON-type data interchange
The configuration process has four main steps:
- Creating and defining a specialty component section
- Defining the specialty component parameters
- Entering the specialty component code
- Adding the component to the interface and defining its parameter values
The following example creates a jQuery slider that works with a text input.
- Create a section by clicking Create > User Interface > Section.
- Click the HTML tab, and clear the Auto-generated HTML check box on the HTML tab of a rule form, which is selected by default.
The HTML tab of a Section rule form with the Specialty component check box selected
On the Parameters tab, define scalar (
Single Value) or collection-based (Page List/Group) parameters. The specialty component uses these parameters to bind the property values required in a specific context, and it uses these clipboard values when the form is loaded and submitted.
The Parameters tab of a Section rule form with Single Value properties added
- Return to the HTML tab and write your specialty component.
The OnBeforeSubmit API function gets values from the external component and updates the Pega 7 Platform when the screen is submitted. OnLoad gets data from external code while rendering the screen. Use these APIs to reference the parameters that you specified on the Parameters tab.
- Save the rule when finished.
The HTML tab of the Section rule form with specialty component code
- Open the section in which you want to add the component, and open the the Cell Properties dialog box.
- Click the Magnifying glass icon next to the Use Section field to display the Section Parameters dialog box, and enter the values that you want to use in the context of this cell.
- Save and close the section.
The cell properties Parameters tab in a section