Allow Runtime CSS File Name

Last Updated: 04/10/2018 Introduced in Version: 4.0

This tutorial demonstrates how to allow different CSS documents at runtime on the Form. This feature is implemented in Decisions 4.0. With this feature we can style our Forms dynamically at runtime.

Example:

In this example we are going to create a simple Flow with two Forms: on first Form user will be able to pick a color and on a second Form depending on the user selection we are going to use different CSS documents to style a Button control.

For this example we have two simple CSS documents that we are going to upload to Decisions.

First document sets a background color of the Button to ‘green’.

And second sets a background color of the Button to ‘red’.

Next, we add this CSS documents to Decisions.

To learn how to add CSS document to Decisions please click here.

Then, in the Designer Folder we click Create Flow on the Folder Actions Panel.

Next, we Name the Flow and click Ok to proceed to the Flow Designer.

In the Flow Designer we add Show Form step from Favorite Steps category.

In the resulting window we Name the Form and click Create to proceed to the Form Designer.

Our Form is designed to have a dropdown control for user to be able to select a color from two options: ‘green’ or ‘red’.

To learn more how to create your first Form please click here.

This completes our Form. We can save the Form and close Form Designer.

Back in the Flow Designer we add Create Data step from the Favorite Steps category.

In the Create Data step settings we click Show Editor under Data Definitions option and define ‘ButtonColor’ String data. Then, close Data Definitions window.

Next, we are going to evaluate our user selection with a Rule. We add String Equals – Case Insensitive step from All Steps [Catalog] > Data > Text category.

Then, we set up input data for this Rule. For value 1 we define Constant ‘Green’ value, and for the value 2 we Select Value of user selection (selected Color).

On the True outcome from our Rule we add Mapping Step from All Steps [Catalog] > Data category.

In the Mapping Step Inputs settings we locate Button Color data and define Constant Mapping Type.

For the Constant value of the Button Color we need to get the Id of GreenButton CSS document in Decisions. We locate GreenButton CSS document in System > Designers > Css Folder in the Portal, right-click it, and select Manage > Get Document ID option.

In the resulting window we copy Document ID and close the window.

Then, we paste Document ID into the Button Color Constant Value.

On the False outcome from our Rule we add Mapping Step as well. In this Mapping Step Inputs Settings we define Constant Button Color with Value of the RedButton CSS document ID.

Next, we add another Show Form step from Favorite Steps category.

Name the Form and click Create to proceed to the Form Designer.

In the Form Designer we add Button control. Then, on the Form Properties we locate Style section and check Allow Runtime CSS File Name check-box.

Data Name textbox shows up and we define it as desired (ButtonColor).

This completes our second Form. We save it and close Form Designer.

Back in the Flow Designer we connect outcomes from both Mapping Steps to the second Form step.

In the Form step settings we locate Button Color Input, pick Build Array Mapping Type and for Item 0 we Select Value of Button Color variable defined in Create Data step.

Then, we connect Form outcome to the End Step in our Flow. This completes our Flow. To test it we click Debug Flow on the top panel of the Flow Designer.

First Form, pops up and we pick ‘Green’ from the drop-down list.

Then, we click Done

Second Form pops-up and we can see that our Button background is green.

If we re-run this Flow and pick ‘Red’ on the first Form

The Button on the second Form will have red background.

 

 

 

Additional Resources