Allow Runtime CSS File Name

Overview

This tutorial demonstrates how to apply different CSS documents at runtime on Forms, which allows Designers to dynamically style Forms at runtime.

Example

This example creates a Flow with two Forms: the first prompts the end user to pick a color from a drop-down list which changes the second Form's CSS depending on the user's selection. Upload the two following CSS documents into Decisions.

The first document sets the background color of the Button to green.

.MyButton{
	background-color: green;
}

And second, sets the background color of the Button to red.

.MyButton{
	background-color: red;
}

1. First create a new Flow in the Designer Folder by selecting Create Flow in the Folder Actions Panel.
   
2. Next, we Name the Flow and click CREATE to proceed to the Flow Designer.
   
   
3. In the Flow Designer, we add the Show Form step from the Favorite Steps category.
   
4. In the resulting window, we Name the Form and click Create to proceed to the Form Designer.
   
5. Build the Form to contain the following components: a Button, Label, and Drop Down List with a Static String List using "Green" and "Red."
   
   To learn more about how to create your first Form, please click here.

   
   
   
   

   

   
   
6. This completes the first Form. Save the Form and close the Form Designer.
7. Back in the Flow Designer, add the Create Data step from the Favorite Steps category.
   
8. In the Create Data step settings, click Show Editor under the Data Definitions option. Define ‘ButtonColor’ String data. Then, close the Data Definitions window. 
   
9. Next, a Rule is needed to evaluate user selection. Add a String Equals – Case Insensitive step from All Steps [Catalog] > Data > Text category.
   
10. Set up input data for this Rule. Define Value 1 as a Constant ‘Green’ value and Select From Flow the Selected Color input for Value 2.
    
11. On the True outcome from the Rule, add the Mapping Step from All Steps [Catalog] > Data category.
    
12. In the Mapping Step Inputs settings, locate the Button Color data and define Constant Mapping Type.
    
13. For the Constant value of the Button Color, enter the ID of the GreenButton CSS document in Decisions. Locate the GreenButton CSS document in System > Designers > Css Folder in the Portal, right-click it, and select Manage > Get Document ID option to retrieve this ID.
    
14. In the resulting window, copy the Document ID and close the window.
15. Paste the Document ID into the Button ColorConstant Value. 
    
16. On the False outcome from Rule, add a Mapping Step. In this Mapping Step Inputs Settings, define Constant Button Color with Value of the RedButton CSS document ID.
    
17. Next, create the second Form by adding another Show Form step from the Favorite Steps category.
    
18. Name the Form and click Create to proceed to the Form Designer.
    
19. In the Form Designer, add a Button control. In the Form Properties, locate the Style section, and check the Allow Runtime CSS File Name check-box. Define the Data Name Textbox as ButtonColor.
20. This completes the second Form. Save and close out of the Form Designer.
    
21. Back in the Flow Designer, connect the outcomes from both Mapping Steps to the second Form step.
22. In the Form step settings, locate Button Color Input and pick the Build Array Mapping Type. For Item 0, Select Value of Button Color variable defined in the Create Data step.
    
23. Connect the Form outcome to the End Step to complete the Flow. 
    

Debug

1. In the Flow Designer, select Debug in the top action panel. Select START DEBUGGING.
2. When the first Form shows, select Green from the drop-down list. Select Done. 
3. The second Form shows that the Button background is green.
   
   
4. Select CREATE NEW SESSION, the Flow runs again; this time, select Red from the drop-down list.
5. The second Form shows that the Button has a red background.