Using CSS on a Page
  • 03 Oct 2022
  • 1 Minute to read
  • Dark
    Light

Using CSS on a Page

  • Dark
    Light

Overview

Custom CSS can be implemented into Page Components in a variety of ways. For instance, pre-existing CSS Documents can be uploaded and used as custom-defined classes that can be mapped to individual components.

Additionally, CSS can be written with predefined classes that are automatically mapped to their respective components should there be no errors within the code. Once the file is uploaded successfully, the component's aesthetic can be updated once the CSS has been applied to a Page in the Page Designer.

The following document demonstrates how to upload and apply a CSS Document to a Page

CSS Naming Conventions
Please refer to the CSS Styling article for additional information on how CSS. Note that in installations v.6.10 and before, changing the Name of a CSS Document in Decisions Studio will remove the styling from the component.

This occurs because the name change does not reflect on the File System source. In later installations, the platform can recognize this name change once the Form is edited, so the component can refresh. It is recommended that CSS is assigned by ID.

Example

  1. From Decisions Studio, navigate to System > Designers > Css, and Add the desired CSS File.
  2. After CSS File has been uploaded, navigate to a Designer Project. From the Global Action Bar, select CREATE REPORT, then CREATE a new Page
  3. From the Page Designer, navigate to the Properties > STYLE > Style Sheets section and select the newly uploaded Style Sheet.
  4. From Toolbox > FAVORITES, add a Report Viewer to the Page.

    Then, from the Report Viewer's Properties, under the REPORT SETUP, click PICK OR CREATE DEFAULT REPORT, and PICK the desired Report

  5. While still in the Properties of the Report Viewer, navigate to the VIEW category. Then, select the desired Control CSS Class from the drop-down.
  6. Save and close the Page Designer.
  7. Navigate back to the Designer Project that the Page was created in, then via Add Page/Dashboard, add the Page to the Designer Project. 
  8. Navigate to the newly added Page from the tabs above the Global Action Bar and verify that the CSS Sheet has been applied to the Page. 

For further information on Pages, visit the Decisions Forum.

Was this article helpful?

What's Next