Creating colorful design  table display

Can we have text css like these for Outsystems for showing status?
Could you confirm what i can do to work on it.



Heres my table which i feel needs an upgrade with UI/UX


Solution

Hi @saif sheikh ,

If you checked OutsystemUI theme there are many classes for this purpose.


You can add "background-green-dark text-black" class.

Also you can override or make your own css and applied it.


Solution

I think for this case, I think you are looking g for something like the Tag Pattern.

Look for the tag widget. And you will have a lot of options to use.


https://www.outsystems.com/outsystemsuiwebsite/PatternDetail?PatternId=233

Kind Regards,

Márcio

Hi Márcio CarvalhoDeepa Tiwari 

Based on your inputs, added tags to my UI. Could you please assist me how to write its logic.

For example, if the 'status' is ready for Audit, i need to show green tags, while if its incomplete or pending i need them to be red.


Revmaxclaimsummarypage (2).oml

Solution

You go to the colour input of the tag widget and you do your condition

To not be hardcoded I recommend you to create a static and see what are the different statuses you can possibly have.

Final Result:

Kind Regards,

Márcio

Solution

Hi @saif sheikh ,

If you checked OutsystemUI theme there are many classes for this purpose.


You can add "background-green-dark text-black" class.

Also you can override or make your own css and applied it.


Solution

I think for this case, I think you are looking g for something like the Tag Pattern.

Look for the tag widget. And you will have a lot of options to use.


https://www.outsystems.com/outsystemsuiwebsite/PatternDetail?PatternId=233

Kind Regards,

Márcio

Hi Márcio CarvalhoDeepa Tiwari 

Based on your inputs, added tags to my UI. Could you please assist me how to write its logic.

For example, if the 'status' is ready for Audit, i need to show green tags, while if its incomplete or pending i need them to be red.


Revmaxclaimsummarypage (2).oml

Solution

You go to the colour input of the tag widget and you do your condition

To not be hardcoded I recommend you to create a static and see what are the different statuses you can possibly have.

Final Result:

Kind Regards,

Márcio

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.