How to bind dynamic variable to the background color ?

[vincent_wasteels]

In a repeated element fetched from a REST API , I want to use the hexadecimal color code from the data fetched in the background color of the item.

Any idea ?

[vincent_wasteels]

I tried with the embed HTML component, but can’t find a way to retrieve $props inside it :

<script>
let id = $props.orientationId;
let color = $props.orientation.color;
$('#cardOrientation-'+id+' .cardOrientation-heading').css('background-color', color);
$('#cardOrientation-'+id+' .cardOrientation-relatedMesures').css('color', color);
</script>

[jason]

Hello @vincent_wasteels, welcome to the community.

There’s no way to set a dynamic value for a background color right now. Your workaround using Embed HTML should work. Can you share your project link?

[vincent_wasteels]

Ok , do you know if it is in the roadmap ?

The link to the project :
https://studio.plasmic.app/projects/ajDfwtmjeNR7jYxfpFhaiK/-/card-orientation?arena_type=component&arena=ZvLSmpKsMLP3

it throws an js error once published, $props is not defined

Thank you!

[sarah_ahmed]

You can add a style attribute and set a dynamic value on it that uses $props. Here’s how:

1. Click on the node you want to style in the outline tab.
2. In the Settings tab on the right, find the “HTML attributes” section. Click on the + button next to it and find the “style” attribute.

3. Set a dynamic value on the style attribute:

Use the following code:

{
  backgroundColor: $props.orientation.color
}

Here’s the output:

[vincent_wasteels]

@sarah_ahmed thanks a lot, this is exactly what I was looking for