Configure Fancy Check box in Pega

• Checkbox styling control is a utility that lets you style the OOTB (out of the box) checkbox control.
• This utility provides a toggle switch with animation styles for the checkbox.
• Styling controls can be built using OOTB checkbox control and hence will be compatible with any pega versions.
• We can add more colors or animation effects by making few changes to the provided style sheet.

Steps to Configure Fancy Checkbox:

1. Import Checkbox styling control:

• Configure–>Application–>Distribution–>Import
• Select checkbox styling control RAP
• Checkbox styling control file download link
  https://drive.google.com/drive/folder…
• Click Next and after successfully completion click Done

2. Add Checkbox Ruleset:

• In Application definition, Add ruleset “FancyCheckbox:01-01” in your application rulesets

3.Add Style Sheet:

• Go to your Application Skin
• In “Included styles” tab, add “FancyCheckbox” style sheet in Additional style sheets area

4.Configure Section:

• App explorer–>Casetype–>User Interface–>Section–>Select your section you want to add Fancy check box
• Add Boolean (checkbox) property into the layout
• Go to cell properties panel–>presentation tab–>advanced presentation options
• Add toggle-switch CSS class in cell classes
• when checked, the default color is blue
• For other colours change the CSS class in below format

1. toggle-switch switch_green
2. toggle-switch switch_yellow
3. toggle-switch switch_orange
4. toggle-switch switch_greenred

Save and Run the Casetype

Youtube Video:

Share this post: on Twitter on Facebook on Google+