Skip to main content

We use conditional rendering quite a bit on our pages.  In Spark, there’s a bit more nesting of components and the wrapper component is proving to be a powerful solution for laying out pages and standardizing site UI.  Conditional rendering impacts the entire contents of the wrapper (or other containing component), which means that redundant components need to be added to additional wrappers if there is an outside style that need to be changed


A simple use case is being able to display a colored border or changing the background if there is a condition where highlighting a page section is necessary (like an error condition).  In V1 I would typically handle this by using merge syntax to dynamically inject a class or a style override based on either a Salesforce formula field or a Skuid UI field, but since these properties have been moved to the DSS, this kind of dynamic styling is tough.  


A conditional change of DSS variants would probably be the best approach to keep this declarative.  Another idea would be to have a setting on the outside element to determine if rendering should cascade.  In this case you could have an outside wrapper that either displays or not, but you can decide if it affects the inner elements.  This second approach feels more complicated both to support in the Skuid infrastructure and from a solution perspective.

John, Conditional Styling (basically conditional application of Style Variants to components) is a feature that’s on the 2019 roadmap, we’ve had that targeted for a while.


Awesome.  I really like where this is headed.