Add CSS Class property merge syntax support

  • 2
  • Question
  • Updated 1 year ago
  • Answered
It appears that merge syntax is not supported for CSS Class property like it is for Icon Property (see https://community.skuidify.com/skuid/topics/navigation-item-icon-property-not-applying-merge-syntax).  I've tested with Field Editor, wrapper, page region, etc. and none of them appear to support merge syntax.

Would like to see this added, have come across several use cases for this recently. Thank you!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
What are some examples of merge syntax that you'd like to use for the CSS Class property? For Field Editor Sections / Columns / Fields I can definitely see Row merges being useful to do conditional styling based on properties of the given row, but I'm wondering about what your examples are for other components. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Zach - Here's a few that I've come across:

1) Styling Field Editors based on row props/values is one of them.  However, rather than put a cssclass on each individual field editor on a page, I'd like to conditionally apply a class to the page itself in a master page (single point of maintenance).  Currently, there is no CSS Class property on the page itself (possibly there should be??) so I was going to put everything inside of a wrapper and do conditional CSS on the wrapper.

2) User Preferences - Being able to conditionally apply a class to a wrapper would allow an easy way to customize minor differences in styling across the page based on user preferences.  For example, yesterday some users wanted the "help" icons removed (less distracting).  I can apply a sk-icon-help { display: none; } rule and then conditionally apply the class to the page/wrapper/etc.

3) Tables, Templates, RTF, etc. could also conditionally be styled based on row properties.  Similar need to #1.

I think the main reason for having "all" components apply merge syntax on CSS Class is for consistency (better than some do and some don't I think).  This is, of course, unless there is another reason not to (e.g. perf hit, etc.).  

Thanks!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Hey Skuid... this would be super helpful!

a css property like this would eliminate the need to run jQuery on pageload:

{{#$Model.Notifications.data.0.Red_Alert__c}}warning-text{{/$Model.Notifications.data.0.Red_Alert__c}}