Dynamic CSS on Form Control

charlesjohnson

Hi,

I would like the ability to have dynamic CSS applied to a dropdown Form control. The control will have four options: Approved, Pending, Combine, and Declined.

Based on the selection, I would like the text color to change. For example, if Approved is selected, the text color is green, Pending would be yellow, Combine blue, and Declined would be red.

Is this possible?

Cody_Decisions

Hey there,

I would be glad to help you out here. Fortunately, this is possible within Decisions by utilizing a combination of Rules/Truth Tables, Active Form Flows (AFF), CSS File Document IDs, and having the Allow Runtime CSS File Name option enabled on the Form itself. One possible solution is detailed below.

First, you will need to ensure the Allow Runtime CSS File Name option enabled on the Form. Doing this will create an additional input field for the Form which can take in CSS Document IDs. By inputting the corresponding CSS File ID here, we can apply CSS to the Form dynamically.

Once a value is changed on the dropdown, we can trigger an AFF to exit the Form using an Exit Form Step and travel down a new path we specified to be "Change Color".

Within the main Flow, we can force the Form to travel down the "Change Color" path whenever a selection is changed within the dropdown. This path includes a Truth Table which we can use to match the selected value with the respective CSS File IDs. It will continue this loop until the user uses the "Done" button.

You can obtain the CSS Document ID by navigating to Configuration -> CSS in the Project, right-clicking the respective CSS File, and selecting Get Document ID.

Once the Form is passed the output CSS ID from the Truth Table, the dropdown text color will be changed with it respective color.

I've attached the example project below for reference which also contains the CSS files I used.

DynamicCSS_Example.zip

Hopefully this helps!

-Cody