Join the Team Forms community
E
R
A
T
C
How to dynamically change the theme of a panel component？
Hi Damon,
Dynamically changing the colour of a panel component can be a little tricky but is possible using custom CSS classes (note that this is a paid feature). You can achieve this using the steps below.
Define some custom CSS classes for the different panel colours. Notice how I am using css selectors to target the card-header.
.red-panel .card-header {
background-color: red;
}
.green-panel .card-header{
background-color: #aceab3;
}
In your panel component enter a JavaScript expression to dynamically assign a class to the panel based on value of another field in your form. This setting is available under the data tab of the panel component.
customClass = data.status === 'rejected' ? 'red-panel' : 'green-panel'Open the json settings for your panel component and manually add "redrawOn": "data", into the settings.
The last step is a temporary work around and won't be required in the future.
Hi Damon,
Dynamically changing the colour of a panel component can be a little tricky but is possible using custom CSS classes (note that this is a paid feature). You can achieve this using the steps below.
Define some custom CSS classes for the different panel colours. Notice how I am using css selectors to target the card-header.
.red-panel .card-header {
background-color: red;
}
.green-panel .card-header{
background-color: #aceab3;
}In your panel component enter a JavaScript expression to dynamically assign a class to the panel based on value of another field in your form. This setting is available under the data tab of the panel component.
customClass = data.status === 'rejected' ? 'red-panel' : 'green-panel'Open the json settings for your panel component and manually add "redrawOn": "data", into the settings.
The last step is a temporary work around and won't be required in the future.
Thank you, Anthony! Worked like a charm.
Just some additions:
"This setting is available under the data tab of the panel component."It's under the "Custom CSS Class" field under Display tab.
3. Open the json settings for your panel component and manually add "redrawOn": "data", into the settings.This has to be redone every time the panel is edited in any way.
Thanks for the additional details.
I've raised in issue internally to have the "re-draw On" property available in the panels settings. This will hopefully mean that the setting will not get re-set any time you make a change and you will not need to modify any json directly.