• Navigate to the Designer homepage.

• Click the New drop-down menu.

• The user gets two options:

  • Workspace: Clicking this option redirect the users to create a new workspace/place holder for the dashboard.

  • Dashboard: By clicking this option, the users get redirected to the Designer Canvass to create a new dashboard.

This section covers steps to access the Designer module from the Platform Apps menu.

• Navigate to the Homepage of the platform.

• Click the Apps menu icon.

• Click the Designer module.

• The Designer homepage opens.

The Designer homepage displays a list of tasks in the left panel that users can perform on a dashboard.

• The users can add a new Dashboard/Workspace,

• Manage the existing Dashboard(s)/Workspace(s),

• Set preferences for a dashboard,

• Save the dashboard with a different name

• Open it from the local disk if saved there

• Exit the Designer plugin.

The Designer Homepage also contains Guided Tour.

The user gets guided across various important sections of the Designer plugin. The tour begins from the Designer Homepage.

• Click the Take a tour option provided on the top right side of the Designer homepage.

• A new dialog box opens initiating the landing page tour.

• Click the Next option to move ahead in the guided tour.

• Click the Prev option to go back to the guided tour.

• Click the End Tour option if you want to end the tour at any given point (The End Tour option will get highlighted by default at the end of the guided tour).

• Navigate to the Designer homepage.

• Click the Open option from the given options.

• The Open from Local Disk appears.

• The user gets directed to open the downloaded files (.bvzx) from the local disk.

• The selected dashboard (.bvzx file) opens inside the designer workspace.

The Designer canvas page offers an icon to access the supported charting components for the dashboard creation.

• Navigate to the Dashboard canvas.

• Click the Component Library icon.

• A panel opens displaying various charting options to choose from.

Help

• Navigate to the Designer homepage.

• Click the Help option.

• The Help content gets displayed to understand the Designer plugin.

Preferences

• Navigate to the Designer homepage.

• Click the Preferences option from the left panel.

​

• The Preferences for a dashboard canvass appear.

• Set the desired preferences either by enabling it through a checkmark or selecting it from the provided menus.

• Click the Save option.

• The selected preferences get applied to the dashboard canvass.

• The available preferences for a dashboard are as described below:

• Navigate to the Designer homepage.

• Open the Manage option.

• Open an existing dashboard from the list of available dashboards (You can find the list of dashboards inside a Workspace).

• Click the Save As option from the left panel.

• The Save As window appears to confirm the action.

• The original dashboard name appears with the “Copy_Of” prefix (the users can edit the name as per their wish).

• Select a workspace from the drop-down menu.

• Click the Save option.

• A copy of the selected dashboard gets saved in the chosen workspace.

• Navigate to the Dashboard canvas.

• Click the Data Connectors icon.

• A page opens displaying various options to establish data connections.

• Navigate to the Designer homepage.

• Click the Exit option.

• If work is not saved, the user gets an option while closing to leave or cancel the action of exit. Select the Cancel option if you require to save the work, or else choose Leave to close the designer.

• The user gets directed to the Platform homepage.

Dashboard Canvas Page

• Navigate to the Designer homepage.

• Click the Add Dashboard icon on the homepage.

or

• Click the New drop-down icon on the homepage.

• Select the Dashboard option.

• The Designer space/Canvas opens with a Designer Canvas space, header menu panel, and a right-side menu panel.

The user can access wide range of charting components, filters, and Grid components available in the Designer module from the Designer canvas page to create a dashboard.

Refer to the following image to understand the various components provided on the Designer Canvas:

1. Tab: Place where dashboard design takes place. Drag and drop charts and components here to create dashboards.

2. Mobile : Displays Dashboard screen like a Mobile device.

3. Tablet : Displays Dashboard screen like Tablet.

4. Large Screen : Displays Dashboard screen like Desktop.

5. Save to Local Disk : Saves the created dashboards to your local disk.

6. Save to Another Workspace (Save As) : Saves a copy of the original dashboard to another workspace or the same workspace.

7. Save (Dashboard) : Saves the created dashboards in a workspace.

8. Preview : Displays the preview mode of the dashboard.

9. Full Screen : Maximizes the dashboard for a better view.

10. Data Connectors : Connects to a wide range of data sources.

11. Component Library : Includes a compelling range of charts, filters, and data grids.

This section aims to give an overview of the Dashboard Designer focusing on the two main screens that appear under the Designer module: Homepage and Designer Canvas.

• Navigate to the Designer homepage.

• Click the Manage option.

• The user gets directed to manage the following tasks for a Workspace or Dashboard:

Tasks for a Workspace

• Search in Workspaces: Searches for a specific Workspace.

• Reload Workspaces: Reloads all the Workspaces.

• New Workspace: Adds a new Workspace.

• Rename: Renames the selected workspace.

• Remove: Removes the selected workspace from the list and move to the Trash Workspace.

• Share: Shares the selected workspace to a user or user group. The rights to access an already shared workspace can be excluded by using the same option.

• Empty the Trash: Removes all the workspaces from the Trash workspace.

​

Tasks for a Dashboard

To access the options, the users need to select a dashboard from an existing workspace as displayed in the following image:

• Search: Searches for a Dashboard

• GIT Export: Export a dashboard to GIT and get a pushed version from the GIT repository (Push to VCS and Pull from VCS)

• Open in Designer: Opens the dashboard in Designer to Edit or modify

• Publish to Portal: Publishes the Dashboard to the portal

• Remove: Deletes the Dashboard

• Actions: Applies the various actions on a dashboard

The users get the following options while clicking the More Actions icon provided for a Dashboard.

1. Preview the dashboard

2. Export to Local Disk

3. Rename the Dashboard

4. Delete Dashboard

5. Move the Dashboard from one Workspace to another Workspace

Every component in the dashboard is considered as an object. The Designer canvas page offers an icon to access the Dashboard Objects and the various related properties to manage the dashboard components.

• Navigate to the Dashboard canvas.

• Click the Manage Dashboard Components icon.

• A panel opens displaying various icons for the used dashboard objects (The following image displays empty dashboard, so no objects are mentioned).

The user can avail a guided tour to the Designer canvas page using the Guided Tour icon provided on the right side panel.

• Navigate to the Designer Canvas page.

• Click the Guided Tour icon.

• Click the Next option to move forward.

• It redirects the users on the icon to open the Dashboard Canvas page.

• Click the Prev option to go to the back page.

• Click the End tour option to close the guided tour window at any given point.​

The Global Properties feature in the Dashboard canvas empowers users to apply appearance properties at the dashboard level. These properties facilitate the seamless alignment of various dashboard components, ensuring a consistent and visually harmonious display.

Accessing the Global Properties Icon

• Navigate to a Dashboard within its canvas framework.

• Use right-click to get the Dashboard context menu.

• Click the Properties option from the context menu.

• The Dashboard Properties gets listed in a context menu.

• Select the Global Font and Themes option.

• The Global Properties icon can be accessed within it.

• By clicking on the Global Properties icon, the Global Properties Selection window opens displaying a list of the Global Properties that can be set or modified at the dashboard level.

Various Global Properties

The Global Properties feature streamlines the design process and saves time by providing a single point to manage appearance settings for the entire dashboard.

A dashboard is provided with the below-given Global Properties:

Enable Global Property for Background

Apply a border for all the dashboard components and set color and radius of the border for all components enabling the Global Property for Background.

Enable Global Property for Title

The Global Properties for the dashboard title ensure consistent branding and visual coherence throughout the entire dashboard. It helps the user to effectively convey the purpose behind the selected dashboard by aligning the Title display together with Title Bar height, Font color, Font Size, Font Style, font Weight, and Font family. It also allows to enable decoration for the inserted Title text.

Enable Global Property for Sub Title

The Global Sub-title Properties feature in the Dashboard application enables users to apply appearance properties at the dashboard level for sub-titles. By utilizing Global Sub-title Properties, users can ensure consistency and visual harmony across all sub-titles in the dashboard.

Enable Global Property for X Axis

By utilizing Global Properties for the X-axis, users can ensure consistency and visual coherence across all charts and graphs in the dashboard that use the X-axis. It helps to bring in uniformity for all the dashboard components containing X-Axis in terms of Label appearance and readability.

Enable Global Property for Y Axis

Ensure consistency and visual coherence across all the charts in the dashboard by utilizing Global Properties for the Y-axis. It helps to standardize all the dashboard components containing Y-Axis in terms of Label appearance, readability, and text decoration.

Enable Global Property for Legend

The Global Properties for Legend allows the user to customize the appearance properties of the legend to align with your design preferences.

Enable Global Property for Formatter

The Global Properties for Formatter allows the user to standardize various formatter related properties .

The user must click the Save option after setting or modifying the desired set of Global Properties to apply them on the selected dashboard.

The Designer canvass is provided with specific properties.

• Navigate to the Designer canvas.

• Use the Right-click anywhere on the canvas to get the Dashboard properties.

• Select the Properties option from the context menu.

• Various Dashboard level properties get listed in the displayed context menu as shown in the below-given image:​​

Gradient

Border

Global Font And Themes

​

• Select the Global Font And Themes option from the context menu.

• Click on the Designer themes icon.

Screen Size

The Size Properties option helps to

​

Steps to set the Screen Size

• Click the drop-down icon for the Screen Size field.

• A context menu appears displaying various options to set the Screen Size.

Language Mapping

​

Please Note: By clicking on the Select a Mapping icon, the Language Mapping Selection dialog box opens.

Steps to Map a Language

• Navigate to the Language Mapping Selection dialog box.

• Select a language mapping option using the Mapping List drop-down menu.

• Click the Save option.

Cache

Use a checkmark in the given box to enable the Enable Cache option for the data service. If cache is enabled for a dashboard with a data service as a data source it will do the following tasks:

• While loading the dashboard, for the first time data will hit from database.

• The same dashboard while loading again it will load the data from the Cache.

Report Burst

Use a checkmark in the given box to Enable Report Burst. By enabling the Report Burst option from the Dashboard properties displays the Report Burst option for a published Dashboard. Refer the Report Burst section from the Options for a Published Dashboard section for more details.

The scripting mechanism makes the creation of complex dashboards easy and quick. The users get an icon to access the scripting window on the Designer Canvas page.

• Navigate to the Dashboard canvas.

• Click the Component Variable and Script icon.

• The user gets redirected to the scripting window displaying the Components and Connections tabs to open the related panel for the each option. The Components tab opens by default.

This page describes the steps to access the Context Menu Properties:

• Drag multiple components into the designer canvas (At least three components to avail all the properties).

• Select multiple components from the canvas(at least three).

• Use right-click to open the context menu.

  • The following properties will be listed in the context menu:

    • Align Left: All the selected components get aligned to the left.

    • Align Right: All the selected components get aligned to the right.

    • Align Top: All the selected components get aligned to the top.

    • Align Bottom: All the selected components get aligned to the bottom.

    • Align Horizontal: All the selected components get aligned horizontally.

    • Align Vertical: All the selected components get aligned vertically.

    • Equal Space (Horizontal): All the selected components get equal space horizontally.

    • Equal Space (Vertical): All the selected components get equal space vertically.

    • Equal Height: All the selected components get an equal height.

    • Equal Width: All the selected components get an equal width.

    • Manage Group: The user gets redirected to manage the group.

    • Lock Selected: All the selected components get locked.

    • Unlock Selected: All the selected components get unlocked.

    • Delete Selected: To delete the selected components.

    • Duplicate Selected : To duplicate the selected components.

    ​

• Each dragged component gets some Context Menu Properties as shown in the below image:

The Designer module provides visually captivating and appealing themes under the Dashboard Properties, so that the users can effortlessly and instantly transform their dashboard’s appearance. The user can seamlessly switch between different themes with an intuitive drop-down menu.

Steps to Apply Various Themes on a Dashboard

• Navigate to a Dashboard within its canvas framework.

• Use right-click to get the Dashboard context menu.

• Click the Properties option from the context menu.

• The Dashboard Properties gets listed in a context menu.

• Select the Global Font and Themes option.

• Click the Designer Themes icon.

• The Dashboard Theme Selection window opens.

• Click the Theme List drop-down option to access the list of all the available dashboard themes.

• Select a theme from the drop-down list.

• The selected theme appears in the Theme List field.

• Click the Save option.

• The selected theme gets applied to the dashboard.

Available Pre-defined Themes

The supported themes are as given-below (Click on each tab to open the embedded theme display).