Changing a UI Builder component background color based on database value

[Nancy Aud2]

I am building a UI builder page that is using a repeater with a stylized text component inside. I would like to change the background color of that text component based on a specific value from the database. (ie... if the value is "X" make the background color red, if it is "Y" make it blue otherwise make it yellow.) Does anyone have any ideas on how to accomplish this?

[JagjeetSingh]

Yes bind the CSS property with state parameter and change the value of state parameter with your logic.

The parameter will hold the whole CSS value.

[Nancy Aud2]

I set my state to below just to see if I could turn it green.

{

  "color": "#00BB6659"

}

Dynamically bound to the Stylized Text CSS and nothing changed in the color.

[JagjeetSingh]

It should be like below. You missed * in the beginning.

*{
  "color": "#00BB6659"
}

[Nancy Aud2]

Thank you for the information. I don't have a way to add the "*". The client state preview is read only. 

[JagjeetSingh]

Yes the preview is read only. You can not modify the value from preview. You can update the state parameter directly.