How to update the checkbox/control's color after its checked in Pega constellation?

User Experience
, ,
1

I understand that we are moving to configuration rather than customization in Pega constellation. Also, field types decide what control can be used within view configuration. Theme landing page which controls overall styling of the application in general. But I don’t see any option to specifically change a particular control styling based on a need. Let’s take an example, If business don’t want to go with default checkbox styling like box will be white in color before selection. Once it is checked, it has tick mark with a background color configured in Theme landing page.

Let’s say if business want to have checkbox to appear in white color before selection and post it is checked it has tick mark with a green color.Checkbox appearing in green.png despite having the application theming in blue. I just want to discuss/ understand the possible options here.

  1. Should I pushback to business saying this is good UI practice having specific color for a particular control?

  2. If this is really required, should I create a custom DX component for this control and load it in Pega application or Is there any easy option to achieve this?

  3. As a Pega developer, I’m not expertized in creating custom component using other technologies like JS. Is a front end developer needed in the project for creating and maintaining these custom controls/components?

2

@Connect@Abicom

Please find my reply inline:

  1. Constellation architecture focusses on having a consistent UX and thus we use themes to design the application. Thus is it not a good design practice to have specific color for a particular control. Also this might cause issues with accessibility. Existing themes are designed to support accessibility and raise alert if we go sideways.

  2. If it is really pushed , yes we to develop a custom control.

  3. Having a UI developer in the team to manage the custom components would be really helpful. To start you can use this link as reference - Constellation UI Gallery