• To define domain-specific data requirements.

• To transform your business data into dazzling assets by changing the outlook of your data.

• To avail an extensive range of advanced charts.

• To drill down up to any granularity level with the help of SDK methods.

• To dynamically customize UI and UX of the current charts.

• To deliver clear insights at the speed of thought by altering multiple widgets and applying various filters to your governed dashboards.

• 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.

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 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.

Workspace once created under the Designer module works as a placeholder for multiple dashboards. If you compare a dashboard with a document/file, then the Workspace created to store them is like a folder. The creation of a new Workspace and understanding the various credited options to an available Workspace under the Designer module are aimed to be explained through an illustration. Check out the given walk-through on the complete flow of Workspace creation.

Workspace once created under the Designer module works as a placeholder for multiple dashboards. If you compare a dashboard with a document/file, then the Workspace created to store them is like a folder. The creation of a new Workspace and understanding the various credited options to an available Workspace under the Designer module are aimed to be explained through an illustration.

• Right click on the dragged component.

• Select the Dataset property option.

• Select the created connection from the list.

To create a dashboard the user needs to go through multiple pages and use various options provided under the Designer module. It begins with adding a new Dashboard and goes all the way to create a data connection, drag multiple charting components, associate the created data connections with the dragged charts, preview the dashboard data, and finally save the created dashboard.

• Navigate to the Designer homepage.

• Click the New drop-down menu.

• The user gets two options:

The Export to Local Disk option exports the selected dashboard to the local disk.

• Select a dashboard using the Manage option.

• Choose the Export to Local Disk option from the More Actions context menu.

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.

Help

• Navigate to the Designer homepage.

• Click the Help option.

• Navigate to the Dashboard canvas page.

• Click the Preview icon.

• The selected Dashboard opens in the Preview

This section covers two ways to add a new Dashboard.

• Navigate to the Designer homepage.

• Click the New drop-down menu and select Dashboard.

Or

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 Dashboard canvas.

• Click the Data Connectors icon.

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

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.

• 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.

​

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

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

​

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 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.

• 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.

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

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.

• A dialog box appears next to the major options of the Designer Page. It begins from the .

• 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.​

• 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.

• Select a workspace from the Workspaces list.

• Click the Rename icon.

• The Rename window appears to assure the action.

• Provide a new name for the dashboard.

• Click the Rename to save the new name.

​

• A message appears to assure the success of the renaming action.

• The selected workspace gets saved with the new name.

​

The users can open the desired dashboard into the designer workspace once they have created and saved it to a workspace.

• Click the Manage option on the Designer homepage.

• Select and click on a workspace from the list of Workspaces.

• Select a Dashboard from the list of all the saved dashboards under the selected workspace.

• Click the Open in Designer icon.

• The selected dashboard opens in the designer workspace.

The Preview action option opens the selected dashboard in the preview mode.

• Navigate to a saved dashboard using the Manage option.

• Select a dashboard and click the More Actions icon.

• Choose the Preview action from the context menu.

​

• The selected dashboard opens in Preview mode.

The designer module is a complete package to create governed dashboards with pre-built charting capabilities that make it simple enough for business users to understand their business data, yet robust enough to accommodate complex custom scripting. High-level visualizations backed with accurate predictions and real-time updates are available at seamless speed to provide precise insights to users and help them make informed business decisions.

The Designer module comes preloaded with a wide range of charts, features, and data integration capabilities that empower the users to create informative and appealing visual representations of their data.

• Extract and consolidate live data from a variety of data sources ranging from an Excel spreadsheet to a Data Store connection.

• Merge two data connectors of diverse nature such as excel, and a data service based on an underlying criterion.

• Users can compare metrics, create calculated fields, and use them as input, on top of the merged dataset.

• Get real-time data updates in seconds using the WebSocket URL.

​

• Click the Data Connectors icon to display all the available data sources.

• Click the Create New Connection icon provided next to the Data Service connector.

• A new connection gets added under the Data Service connector type.

  • Name: Name the connection.

  • Data Connectors: Select a data source from the drop-down menu.

  • Data Sets: Select a data service from the drop-down menu.

• Click the Data Connectorsicon using the Designer canvas.

• A new screen opens, displaying the following data connection options:

• Select a data connection type and click the Create New Connection icon.

• A new connection appears below.

• Configure the required details to create a data connection.

• Click the Manage option from the Designer Homepage Left Menu Panel.

• Select a Workspace from the list of available Workspaces.

• A list of available Dashboards inside the selected Workspace opens.

• Select a Dashboard from the list.

• Click the Action menu icon for the dashboard.

• Click the Info icon from the Action menu.

• The Dashboard Info window opens displaying the related information such as Last Updated Date and Last Updated By.

• Click the Component Library icon from the right edge of the window.

• Various categories of the available charting components get displayed (The Charts category gets selected by default).

• Select and drag a component on the canvas.

• Navigate to the Dashboard Designer homepage.

• Click New or click the Add option.

• Click Workspace from the context menu.

• Click the Data Connectors icon to display all the available data sources.

Pushing a Dashboard to VCS

Previously created dashboards can be renamed using this option. This part provides steps on how to rename an existing dashboard.

• Select a dashboard using the Manage option.

• Click the Rename icon from the More Actions context menu.

• Click the Data Connectors icon to display all the available data sources.

• Click the Data Connectors icon to display all the available data sources.

The users can move the created dashboards from one workspace to another using this option. This section explains the steps to move dashboards.

• Select a dashboard using the Manage option.

• Click the Move to icon from the More Actions context menu.

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:

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.

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.

This section describes steps to delete an existing Workspace and restoring the deleted workspace.

Removing a Workspace

• Select a workspace from the Workspaces list.

• Click the Remove icon.​

• The Remove dialog window appears to confirm the deletion.

• Click the Remove option.

​

• The selected workspace gets removed from the list.

• The removed workspace gets added to the Trash Workspace.

Restoring a Deleted Workspace

• Click the Manage option.

• Navigate to the Trash workspace created under the list of all the workspaces.

• Select a deleted workspace that you want to restore and click the Restore icon.

The Save as Template option has been provided under the More Actions menu for each saved dashboard. By clicking this option it will create the selected dashboard as a Card in the Templates section.

• Navigate to the saved Dashboards list using the Manage option.

• Select a Dashboard from the list.

• Click the More Actions icon for the selected dashboard.

• Click the Save as Template option from the More Actions context menu.

• The Save as Template dialog box opens.

• Provide the Template Name in the given space.

• Click the Save option.

• A notification message appears to inform the completion of the action.

• Click the Templates option provided under the Open option from the Designer homepage.

• The Dashboard Templates page opens listing all the available dashboard templates.

• The recently saved dashboard template gets listed under the Dashboard Templates page.

The Designer module contains three types of Save options for a Dashboard. They are as explained below:

Saving a Dashboard

• Click the Save icon from the Designer canvas header menu.

• A pop-up window appears with the following details:

• Dashboard Name: The name of the selected dashboard gets displayed.

• Workspace: Select a workspace via the drop-down menu.

• Click the Save option.

• A success message appears to assure the same.

​

• The dashboard gets saved to the selected workspace.

Save As: Save to Another Workspace

• Click the Save to Another Workspace icon from the Designer canvas header menu.

• The Save As pop-up window appears asking to save a copy of the selected dashboard.

• Name: The dashboard name gets displayed as Copy_of_ the original Dashboard Name.

• Two consecutive notification messages appear.

​

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

Save to Local Disk

A dashboard can be saved to a local disk via the Save to Local Disk option.

• Click the Save to Local Disk icon from the Designer canvas header menu.

• The selected dashboard gets saved to the local system.

​

Deleting a Dashboard

Users can delete a dashboard by following the steps explained over here.

• Select a dashboard using the Manage option.

• Click the Delete icon from the More Actions context menu.

• A pop-up window appears to confirm the deletion.

• Select the Remove option from the pop-up window.

​

• A message appears to notify the completion of the action and the selected dashboard gets removed from the list.

​

Restoring a Deleted Dashboard

By default, the dashboard gets moved to the Trash Workspace. The users can open the Trash Workspace and restore the dashboard to the desired workspace.

• Click the Manage option from the Designer homepage.

• Navigate to the Trash workspace created under the list of all the workspaces.

• Select a deleted dashboard that you want to restore Click the Restore icon.

• The Restore window appears.

• Select a workspace using the drop-down menu.

• Click the Restore option.

​

• A success message appears to assure the restoration.

​

• The dashboard gets restored to the selected workspace.

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.

Sharing a Workspace

• Click the Data Connectors icon to display all the available data sources.

• Click the Data Connectors icon.

Dashboards need to be published for end-users to access them. This section explains the steps to publish dashboards.

Publishing to Portal

• Click the Manage option on the Designer homepage.

• Select and click on a workspace from the list of Workspaces.

• Select a Dashboard from the list of the saved dashboards under the selected workspace.

• Click the Publish to Portal icon.

• The Publish dialog box appears to assure the action with the dashboard name and description.

• Select Folder Location using the drop-down icon.

  • The supported folders are My Documents and Public Documents.

• Two consecutive notification messages appear to assure the completion of the action.​

• The selected dashboard gets published at the desired place.

Republish

• For the published dashboard, the below-given dialog box appears while clicking the Publish to Portal icon.

• Select an action option out of Re-Publish or Publish as New.

  • The Republish option if selected displays the following details:

Publish as New

• The Publish as New action allows the user to publish the selected dashboard as new.

• Select Use(s) or User Group(s) using either USER LIST or USER GROUPS tab.

• Select the desired user(s) or user group(s) using check marks in the given check boxes.

​

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).

Sharing a Dashboard

• Open the Manage option.

• Open a Workspace from the list of workspaces.

• Select a dashboard from the list of dashboards.

• Click the Share Dashboard icon for the selected dashboard.
• The Manage Access window opens for the selected dashboard.

• Select permissions using the checkboxes provided for the Grant Permissions.

• Use the User List or User Groups option to select user(s)/user group(s) to share the dashboard.

• Search for the user or user group using the search bar.

• Use the checkboxes to select the user(s) or user group(s) you want to share the dashboard. ​

• Click the Share option.
• A success message ensures that the dashboard is shared successfully. ​

• Open the Share Dashboard window again for the same dashboard, the user to whom it has been shared will be listed under the Granted Permissions section.

• Navigate to the target user's account, and access the Designer module. Open the Manage section. The shared dashboard gets notified by the letter 's' next to the dashboard name. Even the workspace will be notified with 's' next to it indicating that it is a shared workspace.

Excluding Users

• Navigate to the Share Dashboard window.

• Choose permissions from the Grant Permissions section.

• Go to the User Groups tab.

• Search for a specific user group using the search bar.

• Open the Exclude User tab.

• Select users whom you wish to exclude by using the checkboxes.

• Click the Share option.

Revoking the Privilege(s)

• Navigate to the Manage Access window for a shared dashboard.

• The user(s)/ user group(s) to whom the dashboard has been shared appears under the Granted Permissions section.

• Select a user or user group from the Granted Permissions section.

• Click the Revoke icon.

• A notification message appears.

• The selected user or user group's privileges would be revoked for that dashboard. The selected user or group will be removed from the Granted Permissions section.

The following enhancements are provided for Data Sheet as a Data source connection:

Add Row

Provided the Add Row (+) option to add a new row in the Data Sheet.

Ability to Freeze Columns

The Freeze Column option can be enabled from the Properties tab provided for the Dataset.​​

Edit the Frozen Column

• Navigate to the Dataset Properties and select a column.

• Enable the Frozen Column option from the Properties tab of the Dataset.

​​

• The selected column gets frozen and becomes non-editable in the Preview mode.

• Add a new row using the Add new Row option, the cell added under the frozen column is editable.

Pagination Property

Provided pagination within the General Properties option. By enabling the Pagination option from the General properties, the page number gets displayed on the Data Sheet component.

Delete Row

Introduced the Delete Selected Row option with a confirmation message before a row gets deleted in the Preview mode.

Save Option Update

The Save option gets updated in red color when something is edited in the datasheet.​​

The page focuses on the various options provided for a saved dashboard while using the Manage option.

Manage and share your work with others. This section explains how to edit, save, and publish the dashboards created by users.

Generally created dashboards are saved under a workspace. Based on the requirement, the users can edit the dashboards by adding some modifications and saving them to the disk. This tutorial explains how to edit, open, and save dashboards.

The created and saved dashboards can be shared among the users for a purpose. There are options provided to move and publish dashboards.

The below given description helps you how to access those options in the Designer:

• Navigate to the Designer homepage.

• Click the Manage option.

• A list of Workspaces gets displayed.

• Choose a workspace.

• A list of all the saved dashboards under the selected workspace gets displayed.

• Options provided next to a dashboard name can be used to manage or move that dashboard.

Options provided to a Dashboard:

Options provided under the More Actions:​

List is a component used to filter data. All available items are displayed as a list. Users can select multiple items simultaneously by holding the CTRL-key. Select items will determine the data that is displayed in any associated chart(s).

Default Component Image

Properties of the List Filter

Background

• Background Color: Select the desired color for the component's background. This allows you to customize the visual look to match your design preferences.

• Opacity: Adjust the transparency of the background color. A lower value makes the background more transparent, while a higher value makes it more opaque.

• Shadow: Enable or disable the shadow effect on the component. This adds depth and contrast to the component's appearance.

General

• Component Name: Assign a unique identifier to the component for easy reference within your design or code.

• Show Search: Enable this to allow users to search within the list, enhancing usability for long lists.

• Left, Top: Specify the position of the component on the screen by setting the Left and Top values.

• Height, Width: Define the size dimensions of the component. Adjust these to fit your layout requirements.

Title

• Title Box Color: Defines the background color of the title box.

• Show Title Box: Toggles the visibility of the title box.

• Show Title: Toggles the visibility of the title text.

• Title Bar Height: Adjusts the height of the title bar.

Style

The Style properties panel provides various fields to customize the appearance of the component:

• Font Color: Sets the color of the text for clarity and aesthetic cohesion.

• Font Size: Determines the size of the text, enabling readability adjustments.

• Font Style: Offers style options such as italic or normal for text appearance.

• Font Weight: Controls the thickness of the text, ranging from light to bold.

Modified List filter after changing its Properties

Hierarchical Combo Box is similar to Check Box and Combo Box but here the list will be arranged hierarchically and users will be allowed to select multiple items simultaneously.

The Best Situation to Use Hierarchical Combobox

When users should be given the option to select 1 or more cities that will be used in the table/chart (instead of displaying data for all cities)

Default Component Image

Properties of the Hierarchical Combo Box Filter

Background

General

The General Properties help tailor the component behavior and appearance to suit specific requirements, improving user interaction and data visibility control.

• Component Name: Specifies the identifier for the component, allowing for easy reference.

• Left, Top: Sets the position of the component on the chart by adjusting its coordinates.

• Height, Width: Determines the size of the component, enabling customization of its dimensions.

• Initial Visibility: Controls whether the component is visible at the initial load of the chart.

Background

The Background Properties panel offers options to enhance the visual layout of the component through the following fields:

• Shadow: Enables a shadow effect for the component, creating a sense of depth and focus.

• Shadow Color: Sets the color of the shadow, allowing for customization to match the overall design theme.

• Shadow Transparency: Adjusts the transparency of the shadow, providing control over how prominent or subtle the shadow appears.

Style

The Style properties panel provides various fields to customize the appearance of the component:

• Rollover Color: Defines the color that appears when hovering over a cell, enhancing interactive feedback.

• Selection Color: Sets the color for highlighting selected cells, making them visually distinct.

• Background Color: Allows setting a specific color for the component's background.

• Panel Background Color: Customizes the background color of the panel area for a cohesive look.

Hierarchical Combo box filter variant after changing its properties

The Radio Button component helps to filter data on other components.

Default Component Image

Properties of the Radio Button

General

General

• Component Name: Allows users to set a unique identifier for the radio button component.

• Left/Top: Specifies the position of the radio button within the interface, in terms of left and top margins.

• Height/Width: Defines the dimensions of the radio button.

• Initial Visibility: Toggles the initial display state of the component; if not enabled, it won't appear on the first preview.

Background

• Shadow: Enable or disable the shadow effect on the component. This adds depth and contrast to the component's appearance.

• Shadow Color: Choose the color for the shadow effect. This can be matched with your design aesthetics or contrast requirements.

• Shadow Transparency: Control the transparency level of the shadow. Adjust this to blend the shadow with the background seamlessly or make it more pronounced.

Modified Radio Button after changing its properties

The KPI tile charting component displays the sum of quantity for progressive evolution. KPI is a measurable value that demonstrates how effectively a company is achieving key business objectives. The users can get a quick view of prominent trends, indicators, and values based on the various metrics of the business. Proper use of KPI helps in reducing the number of components used in the dashboard for multiple parameters for better performance. It contains the Sparkline component and Trend in build in it.

Best Situations to Use a KPI Tile

To provide information about the current performance of a company or organization at a glance

Default KPI Tile Image

Properties of the KPI Tile