Programmatically change the background color of a component

Is there a way to programmatically change the background color of a component? My app has color-coded cards that are displayed in a list. The color indicates the nature of the card: news, announcements, actions, etc. The list is fed from a single API point. How can I accomplish this? Thank you

Hi, if you have an internal property that matches the category, you can

  1. Create a new color palette:

  1. Bind the background color to a formula that uses an internal property of the card component:

For example the formula {news: "blue", announcements: "red"}[internalProps.title] will give you a blue card if the title is “news” and a red one if the title is “announcements”. If the categories you’re using aren’t bound to any internal property, you can create a new one for this purpose in Component Template Editor.

1 Like

Your instructions worked perfectly. Thank you very much.

1 Like