Design a Dashboard.

Learn to design a dashboard chart.

Last published at: August 22nd, 2025

This function enables you to design dashboard charts for data visualization. 

You must navigate to the Manage Config. - Dashboards menu option. 

 

The Manage Dashboard is rendered on a new page, as shown below. Click the Help icon for more information on the context. 

 

 

How to design a dashboard using System widgets?

Select the Actions—Create menu option. A pop-up is displayed for configuration. Provide the dashboard name and display order number. Select the checkbox to Open Designer. Click the Create button to start. The sample reference image is shown below. 

 

The dashboard designer canvas is shown below. The left pane contains the dashboard widgets, categorized as Bar Chart, Line Chart, Numbers, Pie Chart, SQL widgets (Bar, Line, Pie, Numbers), Custom, and System. The top menu bar has functions to create, edit, remove, save, preview, and export dashboards as XML files. The culture flag on the top right corner helps translate the text information into a different language. 

Note: System widgets are pre-configured to fetch specific types of data related to definitions, instances, errors, and other relevant information. Some widgets are customizable with a data connection, SQL query, and background colors. 

 

Expand the System category and drag the Number widgets to the designer canvas, as shown below. Then, save the report configuration. 

 

Click the UI - Preview menu option to view the dashboard.

 

The custom dashboard is rendered on a new page as shown below. 

 

Actions - Menu.

On the Dashboard Designer page, select the “Actions” menu to navigate to the “Toolbox, Globalization, Set UI Theme, and System Variables” features.  You can toggle the “Toolbox” to show or hide. You can globalize the dashboard content, define a UI theme, and utilize system variables in your dashboard.  

 

To globalize the dashboard content, select the language option from the drop-down list and click the “Translate” button. The content text is translated and placed in the empty text boxes as shown below. A notification message is displayed in the top-right corner. Click the Save button to confirm the changes. Note: The application uses the Azure ML configuration for the translation. To define the configuration setup, navigate to Status > Settings > Configuration > Azure ML category.  

 

In the Dashboard preview page, select the culture flag from the drop-down list to view the globalization changes. 

 

You can configure the UI theme for Dashboard Widgets using the “Set UI Theme” feature. A pop-up window is displayed for configuration. Select between available “Theme colors” or “Custom colors” by clicking the appropriate button. Choose the color for the heading background and text, the body background and text using the drop-down selection list. Click the “Set UI” button to confirm the changes. A notification message is displayed in the top-right corner. The UI Theme changes are applied immediately. 

 

You can enhance the dashboard content by using the “System Variables” feature. A pop-up window displays the available system variables as shown below.  

 

In this example, a system “variable.userFullName” is used along with the Dashboard title text as shown below. Click the Save button. 

 

You can preview the dashboard to view the system variable value as shown below. 

 

Actions - Save.

On the Dashboard Designer page, select the “Save” menu to save the changes to the dashboard. A confirmation message is displayed in the top-right corner. 

 

Actions - UI.

On the Dashboard Designer page, select the “UI” menu to navigate to the “Grid, Preview, and Clear” features.  You can toggle the “Grid” to show or hide. You can preview the dashboard and clear the designer pane using these features. 

 

Actions - Export.

On the Dashboard Designer page, select the “Export” menu to navigate to the “XML” feature.  You can export the dashboard as an XML file to transfer it between FlowWright environments.  

 

 

How to design a dashboard using custom SQL widgets with a date filter?

The following SQL custom dashboard widgets are available in the System category.

  1. SQL Bar Chart
  2. SQL Line Chart
  3. SQL Pie Chart
  4. SQL Number Widget

You may expand the System category and drag the custom bar chart widget to the designer canvas. Then, as shown below, drag the handles to expand the widget to a larger area. Finally, click the Edit icon in the top right corner. 

 

A pop-up window is rendered for configuration. The sample image is included below for reference. Provide a new title for the chart. Select the database connection from the dropdown list. Provide the SQL query to fetch a result set using the DB connection. Include the custom syntax $dateFilter in the Where condition. Provide the table column name (with alias if required) in the date filter column field, as shown below. Configure the bar chart orientation to be either horizontal or vertical. Configure the bar chart result type to display numbers or percentages. Configure the colors for the background and the text. Click to save the configuration.  

 

Navigate to the Manage Dashboard page. Select the Utils—Date Filter On/Off menu option to toggle the date filter's status.  

 

An alert notification is displayed in the top-right corner. When the report is generated, the Date Filter is now enabled for the dashboard.  

 

Select the Utils - Preview menu option to generate the report. 


 

 

How to provide security permissions to a dashboard?

Click the link here to understand the security permissions for a dashboard. 

 

How to pass parameters to a dashboard?

Click the link here to understand how to render dynamic dashboards.