White Label Reports

Change the appearance of the Reports room, including typography, color, and border radius.

Overview

You can customize Visier to align with your application's branding, creating a seamless user experience.

Note: This capability is currently limited to the Reports room only.

White labeling options

Visier's white-labeling options offer granular control over application branding, categorized by visual customization and functional customization.

Visual customization

These categories define the specific types of visual elements you can customize using CSS variables.

  • Typography:

    • Font family: Change the overall font.

    • Font size: Adjust text size.

    • Font weight: Modify text boldness or lightness.

  • Color:

    • Text foreground: Control text color.

    • Background: Set background colors.

    • Border: Define border colors.

    • Hover: Specify colors for elements when a user hovers over them.

    • Semantic colors: Customize colors for specific meanings, such as: success, error, warning, info, danger.

  • Border radius: Adjust the roundness of corners on UI elements.

Levels of application

The levels dictate the scope of visual customization, from broad application-wide changes to very specific component level adjustments.

  • Global (primitive): This is the broadest level, affecting the entire application. Changes at this level act as fundamental building blocks.

  • Brand: Applies to all components that use brand styles.

  • Component: Allows customization of a specific component, overriding global and brand settings for that element.

  • Component state: This is the most granular level, allowing customization of a specific component when it is in a particular state.

Functional customization

Uses dedicated configuration objects to control the structure and content of the UI, such as tab display text and visibility.

Visual customization variables

Category and Level

Variable name

Description

Example

Global

Typography

--visier-font-family

Controls the font family of all visible text.

"--visier-font-family": "Times New Roman, serif" will apply Times New Roman as the font across the entire application.

Global

Typography

--visier-font-weight-regular

--visier-font-weight-medium

--visier-font-weight-semibold

--visier-font-weight-bold

Scale of the font weights. These variables control the text boldness or lightness of all visible text.

"--visier-font-weight-regular": 500,

"--visier-font-weight-medium": 600,

"--visier-font-weight-semibold": 700,

"--visier-font-weight-bold": 800,

Global

Border Radius

--visier-radius-base

Controls the roundness of corners on UI elements.

"--visier-radius-base": "3px" will adjust the base unit for all border radiuses to 3px. Increasing this value makes all elements in the application appear rounder.

Global

Color

--visier-color-brand-1

--visier-color-brand-2

--visier-color-brand-3

--visier-color-brand-4

Scale of brand colors, ranging from darkest to lightest. These variables control the colors of UI elements that use the brand color, such as primary buttons and toggles.

"--visier-color-brand-1": "#0C63E7" will apply hex color #0C63E7 to UI elements that use --visier-color-brand-1.

Global

Color

--visier-color-gray-1

--visier-color-gray-2

--visier-color-gray-3

--visier-color-gray-4

--visier-color-gray-5

--visier-color-gray-6

--visier-color-gray-7

--visier-color-gray-8

--visier-color-gray-9

Grayscale, ranging from darkest to lightest. These variables control the base tones used throughout the UI such as text, borders, highlights, hover states, or shadows.

"--visier-color-gray-1": "#7C858E" will apply hex color #7C858E to UI elements that use --visier-color-gray-1.

Component

Color

--visier-color-bg-primary

Controls the primary background color.

"--visier-color-bg-primary": "#FDFDFF" will set the primary background color to hex color #FDFDFF.

Component

Color

--visier-color-button-primary-bg

--visier-color-button-primary-fg

--visier-color-button-secondary-bg

--visier-color-button-secondary-fg

These variables control the background or foreground colors of an individual button component.

"--visier-color-button-secondary-fg": "#FFFF00" will set the text color of secondary buttons to hex color #FFFF00.

Component state

Color

--visier-color-button-primary-bg-hover

--visier-color-button-primary-fg-hover

--visier-color-button-secondary-color-bg-hover

--visier-color-button-secondary-color-fg-hover

These variables control the background or foreground colors of an individual component in hover state.

"--visier-color-button-primary-bg-hover: #008000" will change the background color of primary buttons to hex color #008000 specifically when a user hovers over them.

Functional customization objects

The following functional customization options are nested under the reporting key to target the Reports room tabs.

tabLabelTextOverride

Property

Description

Type

Example

owned

Overrides the text for the Owned by me tab in the Reports room.

string

owned: "Custom Reports" will apply the new text string to the tab.

shared

Overrides the text for the Shared with me tab in the Reports room.

string

shared: "Team Views" will apply the new text string to the tab.

published

Overrides the text for the Published tab in the Reports room.

string

published: "Official content" will apply the new text string to the tab.

tabUiVisibility

Property

Description

Type

Example

owned

Controls visibility of the Owned by me tab in the Reports room.

boolean

owned: true will show the Owned by me tab.

shared

Controls visibility of the Shared with me tab in the Reports room.

boolean

shared: false will hide the Shared with me tab.

published

Controls visibility of the Published tab in the Reports room.

boolean

 

How to white label the reports room

White labeling is applied using the whiteLabelingConfig object within the additionalAppsConfig object in Visier's SDK embedding script. This allows you to configure the application's appearance. For more information, see additionalAppsConfig fields.

Note: Before white-labeling, ensure you've successfully embedded the Visier application into your environment. For detailed embedding instructions, see Embed the Full Visier Application.

The following code sample is an example of customized CSS variables and functional configuration.

Copy 
visier('bootstrap', visierConfig, async function(app) {
    const containerId = ...;
    const url = ...;
    const maxRetry = ...;
    const additionalConfig = {
        whiteLabelingConfig: {
            cssValues: {
                "--visier-font-family": "Helvetica, Open Sans, sans-serif",
                "--visier-color-brand-1": "#FF8C00",
            },
            tabLabelTextOverride: {
              reporting: {
                owned: "Custom Reports",
            },
        },
            tabUiVisibility: {
              reporting: {
                shared: false,
            },
        }
        },
    };
    app.embedApp(containerId, url, maxRetry, additionalConfig);
});

additionalAppsConfig fields

The following fields in the additionalAppsConfig code snippet allow you to white label the embedded Visier application.

Field Description Type Required

 

whiteLabelingConfig

A parent object containing the configuration settings for white labeling the application.

object

Optional

 

cssValues

An object representing a range of CSS key-value pairs to apply to the UI.

object

Optional

 

tabLabelTextOverride

An object used to change the display text for specific Reports room tabs.

object

Optional

 

tabUiVisibility

An object used to control the visibility of specific Reports room tabs.

object

Optional

Identify customization variables

To effectively white label your application, you'll need to identify the specific CSS variables that control different UI elements and components in the application. You can do this using your browser's developer tools.

  1. Right click on the page element that you want to customize, and select Inspect.

  2. In the developer tools panel, use the Select an element tool to click on the desired UI area, for example a button.

  3. In the Elements > Styles tab, scroll through the applied CSS rules and styles. Look for CSS variables that start with --visier. These are the variables you can override using the whiteLabelingConfig object. For example, by inspecting the Create report button we can see the variables that are being applied, such as --visier-color-button-primary-bg for the background color and --visier-color-button-primary-fg for the text color.

  4. Optional: You can temporarily modify the CSS variables directly in the developer tools to see the immediate effect. This helps confirm you've found the correct variable.

  5. Once you've found the correct variable, add the customized key-value pair to the whiteLabelingConfig object in your embedding script.