Table of Contents

Article

Creating specialty components in the Pega 7 Platform

You can use specialty components that are provided by the Pega 7 Platform to extend the extensive UI capabilities of the platform by adding external components, gadgets, or widgets that are built with third-party technologies. These components, gadgets, or widgets include those built with jQuery, Adobe Flash, charting libraries, JavaScript, CSS, or HTML. You can use a specialty component when business users or designers require a very specific experience that is not available as a standard configurable capability 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:

Creating specialty components

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:

  1. Creating and defining a specialty component section
  2. Defining the specialty component parameters
  3. Entering the specialty component code
  4. Adding the component to the interface and defining its parameter values

The following example creates a jQuery slider that works with a text input.

Creating and defining a specialty component section

  1. Create a section by clicking Create > User Interface > Section.
  2. 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.
  3. Select the Specialty components check box. The HTML Source area displays a template that contains sample JavaScript. This sample provides instructions for defining a specialty component instance.

The HTML tab of a section rule.

The HTML tab of a Section rule form with the Specialty component check box selected

Defining the specialty component parameters

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.

The Parameters tab of a Section rule form with Single Value properties added

Entering the specialty component code

  1. 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.
  2. Save the rule when finished.

The HTML tab of the Section rule form with specialty component code.

The HTML tab of the Section rule form with specialty component code

Adding the component to the interface and defining its parameter values

  1. Open the section in which you want to add the component, and open the the Cell Properties dialog box.
  2. 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.
  3. Save and close the section.

The cell properties Parameters tab in a section.

The cell properties Parameters tab in a section

Published October 4, 2012 — Updated December 9, 2016


100% found this useful

Related Content

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.