Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Adding a Checkbox control

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

Check boxes present a user with an option or a list of options, from which the user can make a single selection. A cell in a layout can present a property as a TrueFalse type using a Checkbox( pxCheckbox ) control.

Upgrading a Checkbox control

If a section contains a deprecated or outdated check box control, or another control for which there is an improved alternative, a warning displays, along with an Update Controls button. Click Update Controls to automatically update deprecated controls in the section. Automatic update is not available for all controls.

If you have a use case that requires a specific configuration of a standard control, such as a check box, you can make a copy of the control and save it using a new name. For example, if you use a Yes/No radio button frequently, you can save a copy of pxRadioButton as pxYesNoRadioButton. Configure pxYesNoRadioButton to display Yes/No radio buttons, and use this control wherever you prefer. Do not modify the Control Modes and UI Element settings.

Adding a check box

  1. On the Design tab, from the Pickers list, drag Checkbox onto the work area.

    Drag the control to the cell or header that is to contain the property value. When the pointer changes shape to indicate that a single cell is selected, release the mouse button to drop the control

    If the cell is not empty, the dropped control replaces the current contents of the cell.

  2. Click the View properties icon to display the panel.
  3. Complete the top fields of the Cell properties panel.

    Your updates to this panel update the rule form upon clicking Apply. If the panel is pinned, the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned, click Apply to apply your inputs

Cell Properties panel - Top Fields

FieldDescription
Open icon (Appears only when this field is in a section included within the current open rule.) Click to open the section that immediately contains the field.
Property Select or type a property reference that identifies a single text value and has a Property Type of TrueFalse.

Alternatively, you can drag a property name from the lists of properties visible in the Application Explorer. Typically, this works for Single Value properties belonging to in the Applies to class of the current rule (or a higher class). If the container in which this field sits has a non-blank Using Page value, you can drag a Single Value property from within that embedded page property.

Click the Open icon to review the property (if the reference is to an existing property in the Applies To class of this rule or a parent of that class). If the property is not found, the New dialog box for the property form appears.

You can reference properties on any page identified on the Pages & Classes tab, using the normal notation pagename.propertyname for pages other than the page corresponding to the Applies To class of the rule.

If this field is in a cell of a section that includes parameter declarations on the Parameters tab, you can enter the notation param.NAME here, to use a parameter value for the field, where NAME identifies a string parameter. Make sure that the NAME parameter is declared on the Parameters tab, and that your application provides a non-blank value for the parameter value in all possible situations where the section appears. See Sections - Completing the Parameter tab.

For a harness, the property generally must be on the primary page of the rule - the page corresponding to the Applies To key part of the rule. However, a section within the harness may have a different Applies To class, and that section can include properties from its own class.

Control Accept the default pxCheckbox control. When placed in a SmartLayout field, the adjoining Label cell is populated by the standard .pyTemplateCheckbox property with a label value of Check Box. When placed in a repeating grid, the value appears above the control in the header cell.

Click the Open icon to review the control identified in this field.

> Customizing the control

The control's default parameters are the ones you'll most likely use in your UI design. If you wish, you can customize the control within the context of the section that contains it. For example, you can:

  • Add a caption, tooltip, and True and False labels
  • Add behaviors and actions, such as on Change, Refresh Section, Set Value, Post Value, or Set Focus. You can specify multiple actions for a single control. The actions execute in sequence. See Control Form - Completing the Control tab for descriptions of the available parameters and how to define behaviors.

Your edits apply only to the control within the section that contains it and do not update the underlying rule. You an add multiple controls of the same type within a section, each with its own custom settings. See Control Form - Completing the Control tab for descriptions of the available parameters and how to define behaviors.

Do the following to customize an auto-generated control in a section:

  1. Open the section or harness that contains the rule.
  2. Select the cell containing the rule and open its Cell Properties panel.
  3. In the panel, select the Gear icon next to the Control field. This displays the control Parameters dialog. See Control Form - Completing the Control tab for descriptions of the available parameters and how to define behaviors.
  4. Modify as necessary. You cannot edit the Control Modes and UI Element settings.

    To immediately render your changes, click OK in the dialog. If satisfactory, save the section. The system generates the XML representing your edits and stores it in the section.

Behavior Displays only if dynamic behavior for this control was configured prior to PRPC Version 6.3. In PRPC Version 6.3 and above, click the Gear icon next to the Control field to configure dynamic behavior.

To modify an existing dynamic form action based on user updates or values for this field, click the Gear icon next to the Behavior field to open the Client Event Editor. Complete the Client Event Editor to select an event ( OnBlur, OnChange, or OnClick ) and the resulting form action.

Click the help icon on the Client Event Editor for assistance. For general information on this capability, see Harness and Section forms Help - Client Event Editor.

Client event support is not available for harnesses, sections, or flow actions that use directives.

3. Complete the Cell properties panel - General tab

For descriptions of the fields and options in this tab, see Adding a Text input control.

4. Complete the Cell properties panel - Presentation tab

For descriptions of the fields and options in this tab, see Adding a Text Input control - Complete the Cell Properties Panel - Advanced tab.

Instead of creating a new custom format in the skin, you can adjust elements in a cell by applying Cascading Style Sheet (CSS) helper classes. For example, you can use a CSS helper class to center an element in a cell or to double the standard right margin for the element.

  • Cell read-write classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-write mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.
  • Cell read-only classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-only mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.
  • Inline style (not for production use) – You can use this field to define an inline style by entering CSS code. However, entering an inline style results in a guardrail warning. For maintainability and reuse, the recommended approach is to use read-write or read-only classes.
For more information, see CSS helper classes.

UI Gallery

The UI Gallery landing page contains a working example of this element. To display the gallery, in Dev Studio, click ConfigureUser InterfaceGallery UI elements.

Copying, deleting, duplicating, or moving a check box

Use these Windows operations to speed development:

  • To move a cell containing a check box, hold down the SHIFT key, select the cell, drag and drop it in another cell, in the same one layout or another layout.
  • To cut, copy, or paste a check box in a cell, right-click in the cell to access a context-menu.

About Flow Actions

About Harnesses

About Sections

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us