Using CSS in a Page

Last Updated: 05/18/2018 Introduced in Version:

There are two ways to use CSS in Decisions. Existing CSS documents can be uploaded and the custom-defined classes can be mapped to each page element. The other method is to carefully craft your CSS document using the predefined classes of Decisions, which will be automatically mapped to their respective form components.

CSS files can be used to change the appearance of a page and page elements by simply uploading your custom CSS file and selecting it in the form designer.  You must have a report built to use data to build your dashboard. To learn how to do this please refer to: Creating Your First Report.

 

In this example we will upload a CSS document and apply it to a page.

First we navigate to System > Designers > Css.

 

There are two ways to add a CSS document in 5.0. The first way (yellow highlight in the following screenshot) is selecting the arrow to the left of Css in the folder tree. Css > Add > Document. The second way (boxed in red in the following screenshot) is selecting Folder View in the top action panel, this will switch to Folder View and populate a bottom action bar with options to Import/Export, Manage, Add, All. Select Add and a Document dialog will show.

 

In the Document dialog, give your Document a Title and upload your CSS document using the Drag file here or Choose File features.

 

 

Once the CSS file is uploaded in the Studio navigate to your Designer Folder. Create a Page by selecting All > Manage > Page > Add Page.

 

Within the Add Page dialog, select create, a new Create New Page. Create a Name and select CREATE.

 

 

In the Page Designer navigate to Properties > Style and check the box of the CSS file to be used.

 

 

Drag Tile Part, a Report Viewer, a Flow Run Part and a Label to the Page. For reference on Tile Parts and Flow Run Parts: Run Flow from Tiles. If the form used in your Flow Run Part has CSS it will display on your Page.

 

Before applying CSS your page may look like the following screenshot. Notice the Form is displaying CSS that was added specifically to that Form. The Label, Tile Parts and Report Viewer are all using default settings.

 

Assign the Page Elements the CSS class you prefer them to have. To do this select the element and within Properties > View > Css Class drop down menu all the classes defined in your CSS Document will be populated here.

 

 

To view your CSS changes outside of the Page Designer add the Page to a Folder. Select the Designer Folder then Add > Folder. In the Add Folder dialog, Name the Folder and select SAVE.

 

 

To display the Page within the Folder select Manage > Page > Add Page in the bottom activity panel. Select the Page just created using CSS.

 

 

The Page will display within the folder. Our CSS gives the Tile Part a border and a color when hovered over. The selected row in Report Viewer highlights blue. The Label is given the font color and style declared in the CSS Document.

 

Additional Resources