“How do I dynamically style a component?” is frequently asked. Most guidance requires section refreshes and/or sub-optimal design choices. Here I will describe a design pattern with these characteristics:

• The good…
  • Free of section refreshes.
  • Condition-flag driven.
  • Styled in CSS Helper Classes.
  • Duties are well-separated. Code is (close to) where it belongs.
• The bad…
  • Maybe too many moving parts for the average developer.
  • Creating the CSS Helper Classes requires a good understanding of CSS.
• The ugly….
  • Working around a limitation of the current OOB JavaScript declare expression implementation, requires a utility custom control and small general purpose JavaScript.
  • Uses a CSS specification still in (late) draft. It is however supported by all modern browsers.

I worked really hard to describe the approach directly in this post's content only to be blocked by the malicious code guardian on submit. <eyeroll>Must have scared it with some XML inside a code block.</eyeroll>

Consequently you'll have to open the attached PDF instead. Sorry folks.

Despite the length of the attachment, this is relatively easy to setup once digested. Hope it helps someone, and also hope it gives the Pega UI design folks some ideas!

Thanks to @RichardMarsot for his previous attention.