CSS Styling Form Controls
  • Updated on 14 Sep 2016
  • 3 minutes to read
  • Print
  • Dark
    Light

CSS Styling Form Controls

  • Print
  • Dark
    Light

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.
2018-02-28_132922-1024x568.png

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

2018-02-28_133105-1024x615.png

In the Flow Designer we can Quick AddShow 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.

2018-02-28_133150-1024x768.png

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.
2018-02-28_143651-1024x519.png

In the Form Designer add a few LabelsText Boxes, and a Button action to our Form . Save the Form and close the Form Designer.
2018-02-28_134212-1024x519.png

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 .

2018-02-28_134336-1024x519.png

Save the Flow and close Flow Designer. In the Designer Folder locate thumbnail for our Flow , and from the Action menu, click Run Flow.
2018-02-28_134638-1024x519.png

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

2018-02-28_134358.png

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.
2018-02-28_134722-1024x519.png

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

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

Next, we navigate back to our Flow with the Form and click Edit action on the thumbnail . In the Flow Designer we selectShow Form step and click Edit Form action on Edit Step Actions Panel.
2018-02-28_135135-1024x570.png

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.

2018-02-28_135236-1024x519.png

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.
2018-02-28_135324-1024x519.png

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.
2018-02-28_141311-1024x519.png

When our Form opens we can see that our CSS Document affects controls on the Form . Click Button to close Form .
2018-02-28_141406.png

Was this article helpful?