Conditional assigning of CSS classes

Hi,

I want to assign a CSS class to a field in a datatable depending on its content. How do I do that?

Example: the font in a date field should be colored red if the date is in the past, green if it is in the future, and black if it is today’s date.

Regards Ronald

As far as I remember this can be done only server side using a class and WebFormItem functions “addCSSClass()” and “removeCSSClass()”.
I wish I was wrong and that there was another way of doing this on the frontend.

cf WebFormItem | Qodly Developer Center

I don’t think it’s possible to do this in the way you mentioned. If you want to use the addCSSClass() and removeCSSClass() functions, you need a WebFormItem. To get a WebFormItem, you have to manually assign a server-side reference. In this case, it’s not feasible to assign a reference to a specific cell in a table. I’ve also looked into doing this sort of thing with tables and matrices but haven’t found any method to achieve it.

Hello to you,

With the current Qodly version, you can already achieve some conditional formatting.
The “Matric and Datatable” demo app on qodly.com comes with some examples.

1) With CSS, you can conditionally apply a style

image

And obtain this result:
image

2) Using text formatting in text component or input text component

image

And obtain this result:

Of course this is still limited and some upcoming feature will ease your journey.

2 Likes