Skip to main content

It appears that merge syntax is not supported for CSS Class property like it is for Icon Property (see https://community.skuid.com/t/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!

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. 


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!


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}}