search

formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.88k stars 1.06k forks source link

Dynamic Colors #5519

Closed AnthonyPhan closed 2 months ago

AnthonyPhan commented 7 months ago

Hi All,

Im trying to change the background color of a component based on its value. Is there a way to achieve this within the formio builder?

I tried setting the className field using handle bars syntax but this does not seen to be interpolated (e.g. {{ data.calcualtedClassName }}

ZenMasterJacob20011 commented 2 months ago

You can use the logic tab to add custom css to a component based on the value of the component or another component.

  1. Go to logic tab in component
  2. Add logic and set the trigger to javascript. Set result equal to the changing data that will trigger this logic
  3. Set the action to type property, set component property to container custom class
  4. Set the text to {{data.yourComponentKey}}

Here is a jsfiddle of this behavior

It should be noted that logic does not trigger when using components in the form builder. To have the logic trigger you must use the form outside of the builder e.g. Formio.createForm()