Discussion

129
Views
Denis Jasik (DenisJasik)
PEGA
Front End Developer
Pegasystems Inc.
PL
DenisJasik Member since 2014 2 posts
PEGA
Posted: May 21, 2021
Last activity: June 1, 2021
Posted: 21 May 2021 8:58 EDT
Last activity: 1 Jun 2021 5:40 EDT

Switch control in Theme Cosmos

Current implementation of Theme Cosmos does not contain control that can be used as a switch control. However look of that control can be achieved by applying styling to the existing Checkbox control. For this purpose helper class named checkbox-switch needs to be set on the control configuration.

switch uncheckedswitch checked

Note: Mentioned helper class is a part of Theme Cosmos from version 8.6.1 and above. For versions 8.6 and lower helper class can be introduced manually by developer. File attached to this document contains CSS that needs to be added to application styles. It will allow to select helper class from the list.

 

Configuration

  • open CSS file attached to this document and copy code to one of the style files which are used in application
  • checkbox-switch helper class is now possible to be selected in Helper class picker

helper class picker

  • for checkbox that needs to be styled as switch add checkbox-switch helper class on the Presentation tab

checkobox-switch configuration

  • checkbox should be now styled properly

checkbox styled as switch

***Edited by Moderator Marissa to add the Developer Knowledge Share tag***
Pega Platform User Experience Front-End Developer Developer Knowledge Share