CSS Styling Form Controls

Last Updated: 03/28/2018 Introduced in Version: 3.5

This tutorial demonstrates how to style Form Controls in Decisions using CSS. Cascade Style Sheets may be applied only in HTML version of Decisions. The ability to create and use custom CSS styles was introduced in Decisions version 3.5.

Example

In this example we are going to demonstrate how to apply custom CSS styles to the Form Controls in Decisions.

Note: this tutorial is created in the HTML version of Decisions.

We begin in the Designer Folder with clicking Create Flow on the Folder Actions Panel.

 

In the resulting window we name the flow and click OK to proceed to the Flow Designer.

 

 

In the Flow Designer we can Quick Add Show Form step from the Favorite Steps category. To access the quick add menu, click on the output line on the start step. Once show form has been selected, rename, and click on Add to add this step to the flow.

 

Select the Show Form step in the quick add dialog.  Name the form and select Create within the Default Editor for Step dialog to go into the Form Designer.

 

In the Form Designer add a few LabelsText Boxes, and a Button action to our Form. Save the Form and close the Form Designer.

 

Back in the Flow Designer, connect the Button outcome from the Show Form step to the End Step in our Flow. This will complete our Flow.

 

 

Save the Flow and close Flow Designer. In the Designer Folder locate thumbnail for our Flow, and from the Action menu, click Run Flow.

 

Our Form opens and we can see that our Controls on the Form have no styling. We can click Button to close the Form.

 

Next, we are going to demonstrate how to apply custom CSS styles to the Controls on the Form. Navigate to the System > Designers > CSS Folder in the Portal. This Folder is where we can add our CSS documents. Click Add on the Folder Actions Panel.

 

In the resulting pop-up window we Name our Document. In Decisions version 4.0 we have the ability to either drag a file and upload it or we can choose the file from the computer’s folder tree. For this demonstration we will select Choose File

Our, previously created, uploaded simple CSS file looks like this:

cssstyles

After we pick the CSS file we click OK to save the Style Sheet, and close the pop-up window.

 

Next, we navigate back to our Flow with the Form and click Edit action on the thumbnail. In the Flow Designer we select Show Form step and click Edit Form action on Edit Step Actions Panel.

 

Then, in the Form Designer we scroll down to the Style section of the Form Settings. Here we can select Style Sheets that we uploaded to the CSS Folder to apply to this Form. Select the MyDemoCSS Style Sheet that we uploaded previously.

 

 

Next, we select a Control on the Form (f.e. Button). All controls have CSS Class Setting under View category. Here we select the desired CSS Class from the Style Sheet that we applied to this Form to affect this control.

 

We will apply CSS Classes for all control elements on our Form. When finish, we Save the Form and close Form Designer.

Back in the Designer Folder we locate a thumbnail for our Flow and from the Action menu we click Run Flow.

 

When our Form opens we can see that our CSS Document affects controls on the Form. Click Button to close Form.

Additional Resources