Styling and White-Label Guidance
Overview
Changes to the Decisions UI experience can be made through the Theme Editor. Theme Editor is found under System | Manage > Theme > Theme Editor. Decisions comes with dozens of different color and icon choices, as well as letting users apply custom colors. The Theme Editor is intended for a reasonable amount of Portal wide customization. Every aspect of the Portal's appearance can be changed.
The most important area of the UI to change in the Theme Editor is designer > header-background. This is the bar across the top of each designer.
Additionally, Decisions supports CSS for custom styles to make the application a true white label experience. CSS can be applied on a Project by Project basis so they can be tailored for specific end users.
It is not advised to edit the Portal CSS directly. Rather adding new .LESS files is recommended so that reverting to the basic style is easier to accomplish.
Decisions Portal CSS governs anything that is not overridden by a custom CSS file is managed by a .LESS compiler. Users can add .LESS files to the system directory or otherwise interact with them. On Windows installations .LESS files can be added here: C:\Program Files\Decisions\Decisions Server\wwwroot\styles\lessdefault. For container installations place them in [FILESTORAGELOCATION]\Primary\styles\themes, where FILESTORAGELOCATION is the path mapped in the container's .env variables.
Edits to the .LESS file will cause the .LESS complier to run and .CSS files to update.
To learn more about CSS options see:
Uploading Custom Fonts with CSS
UX Best Practices
Keep in mind the audience when building the user experience. For instance, is this application meant to be used primarily on mobile devices?
- Keep the UI simple: Only keep the necessary features and functionality. Too many options can distract end users and make it difficult to complete their tasks. If you are embedding the Flow Designer, the toolbox can be limited to support only certain Steps.
- Be consistent: Use the same icons and visual patterns throughout. This is especially important for non-technical end-users. For smaller screens, use icons instead of text for buttons or actions.
- Clear messages: If network connections drop, provide error messages that clearly explain what happened. If data is being sent, stored, or transmitted, make sure that the user understands what is happening. Always use loading indicators, embedded applications may take longer to load.