Dynamically assign colors and icons to the badges

Good Morning all,
In the components changelog from 2022-02-10, badges with icons were added.

But I have absolutely no idea how to dynamically assign colors and icons to the badges. If you have an idea let me know how you solved it.
Thanks to you Jens

Hi @Jens_Rohleder, for the bg color you can either

  1. create a local palette by editing a badge’s style class, I posted an example here: Programmatically change the background color of a component - #2 by Mari

  2. put the badge variants with different background colors inside a Conditional Renderer component, and include the logic determining which color to render in the “Active render id” selection

For the icon, you can include the logic by binding the component’s “Icon name” property to a formula.

Hi @Mari

oh thank you very much I was also able to follow the tutorial a little bit. Unfortunately, I got stuck here, but I think it can only be a small thing.

@Jens_Rohleder you’re only missing the reference after the object to the property that holds the information on which value should be picked. For example {"warning": red, "success": green}["warning"] will give you red.

thank you sooooo much :0) it works

1 Like