@RichardMarsot , thanks for your advice. Good to know that Cell read/write style can be set dynamically. However, binding a property which contains CSS class name is not a good solution from the architecture perspective, because UI logics are introduce into business logic layer. JSP tag approach is not ideal, but it is better than property binding in my opinion. Highlighting cells/rows conditionally are very frequent requirements from end users. I wish Cosmos UI authoring tool provide convenient way for implementing these dynamic styling requirements in the near future..
Posted: 1 year ago
Posted: 13 Jul 2021 13:31 EDT
Richard Marsot (RichardMarsot)
Director, Front End Engineering
@Chunzhi_Hong using a property ref as helper class is a recommended best practices when using different styles depending on some property value - for example a status badge. Instead of using multiple instances of the same component with different when rules or condition expressions, it is better to use a helper class based on prop ref.
the prop ref that generates the classname is a transient property and use a declare expression backed by a decision table. As such changing the presentation (e.g. classname) can all be done outside of the ui and in the decision table.
Using JSP tags is not a good approach and will generate a guardrail warning as more of the UI is not generated on the client.
If you mainly want to toggle the background of a cell depending on a when rule, you can also in the nested section have 2 dynamic layout that are using visible when on the when condition.
@RichardMarsot and @Chunzhi_Hong I am also looking for solution to the same problem which is discussed here. I am able to follow the steps and able to add class to td- for that particular cell in table.
Now, I struck in highlighting the entire row based on that class. I would be great if you help with some CSS/JQuery which refers to that class and make that entire row bold/highlight in different color.