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
  • 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:

1 Comment

Add yours →

  1. Hi thanks for the great post and video!! I have tried the steps but for some reason I am seeing both the checkbox as well as the toggle button side by side. I am using Pega 8.6 version with cosmos. Please advice if I am missing any step.


© 2024 Pega Tech

Theme by Anders NorénUp ↑

error: Content is protected !!