Allow Runtime CSS File Name
  • Updated on 14 Aug 2017
  • 3 minutes to read
  • Print
  • Dark
    Light

Allow Runtime CSS File Name

  • Print
  • Dark
    Light

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’* .
greenButtonCss.png

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

Next, we add this CSS documents to Decisions .
To learn how to add CSS document to Decisions please click here .
cssUploadedToDecisions.png

Then, in the Designer Folder we click Create Flow on the Folder Actions Panel.
createFlow-1.png

Next, we Name the Flow and click Ok to proceed to the Flow Designer.
2017-12-22_141919.png

In the Flow Designer we add Show Form step from Favorite Steps category.
2017-12-22_141951.png

In the resulting window we Name the Form and click Create to proceed to the Form Designer.
2017-12-22_142035.png

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.
firstFormCompleted.png

Back in the Flow Designer we add Create Data step from the Favorite Steps category.
2017-12-22_142450.png

In theCreate Data step settings we click Show Editor under Data Definitions option and define ‘ButtonColor’ String data. Then, close Data Definitions window.
2017-12-22_142554.png

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.
2017-12-22_142937.png

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

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

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

For the Constant value of the Button Color we need to get theId 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.
getDocumentIdGreen.png

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

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

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 .
addSecondMappingStep.png

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

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

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.
checkAllowRuntimeStyle.png

Data Name textbox shows up and we define it as desired (ButtonColor) .
This completes our second Form . We save it and close Form Designer.
defineDataName.png

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.
pickValueForCss.png

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.
debugFlow3.png

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

Then, we click Done
clickDoneFirst.png

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

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

The Button on the second Form will have red background.
buttonRed.png

Was this article helpful?