Using CSS in a Page

Overview

Decisions can implement custom CSS into Page components in multiple different ways. Existing CSS documents can be uploaded and the custom-defined classes would then be mapped to each Page element. CSS can also be written with predefined classes from Decisions, which will automatically be mapped to the respective components if there are no errors in the code. Once the file is uploaded successfully, the component aesthetic can be updated once the CSS is applied to the Page in the Page Designer.

Example

In this example, a CSS document will be uploaded and applied to a Page.

1. Begin in the Decisions Studio and navigate to System > Designers > Css.
2. In Decisions Version 7, there are two ways to add a CSS document: right-clicking on the Css Folder in the Folder Tree and navigating to Add > Document and selecting ADD > Document from the Global Action Bar. Navigate as desired.
3. In the Document window, name and upload a CSS document. 
4. Click ADD DOCUMENT.
5. Once the CSS file is uploaded, navigate to a Designer Folder and select CREATE FORM.
6. In the resulting Create Form window, select and name the default Page [Using CSS]. Click CREATE.
7. In the Page Designer, navigate to the Properties panel > STYLE > Style Sheets section and select the newly uploaded Style Sheet.
   In this example, the name of the new CSS style is Bright and Youthful.

   

8. From the Toolbox > FAVORITES section, drag and drop a Report Viewer component to the Page.
   1. In the Properties panel > REPORT SETUP section, add a pre-existing Report. 
      Please navigate to Create a Report for more information on how to create a Report.

      

9. Next, add a Form Tile component from the Toolbox > TILES section. 
   1. Configure the Form Tile by navigating to INPUT > PICK TILE FORM.
   2. In the Form Tile Flow Designer, add a Button [OK] and a Text Box [Name] component. 
   3. Save and Close. 
10. Navigate to the Properties panel > VIEW > Control CSS Classdrop down to assign a CSS Class to any component on the Page.
    In this example, the Report Viewer component will be selected.  

    

11. Save and Close the Page Designer.
12. Navigate to the Designer Folder that the new Page was created in, right-click and navigate to Manage > Page/Dashboard > Add Page/Dashboard.
13. In the resulting Add Page/Dashboard window, select PICK PAGE. 
14. In the resulting Create or Pick Page window, select PICK, then navigate to the new Page. 
15. Click PICK, then SAVE.
16. The new Page has been added as a Portal Page in the Top Bar. Select the Page.
17. The new Page with CSS Styling on the Form Tile and Report Viewer components will display.