Examples of Scripting in Dashboard Designer

This section aims at describing some example of using the Scripting part within the Dashboard Designer module.

Defining Global Functions

Overview

The BDB Dashboard Designer supports advanced customization using JavaScript. You can enhance dashboards by:

  • Using the built-in SDK methods library.

  • Writing custom JavaScript code tailored to specific use cases.

This makes dashboards more interactive and flexible, allowing for business-specific logic and presentation.

Why Use Global Functions?

In BDB, there's a designated script area called the Dashboard Script Area. This area is used to:

  • Initialize scripts before the dashboard loads.

  • Define global functions that can be reused throughout the dashboard.

Functions defined in component or connection script areas are limited in scope and cannot be reused elsewhere.

Tip: To make a function available globally, define it in the Dashboard Script Area.

How to Define a Global Function

Global functions are defined using the window object. This ensures they are accessible across the entire dashboard.

Example

window.numberWithCommas = function(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

What does it do?

This function formats a number with commas as thousands separators (e.g., 1000000 becomes 1,000,000).

Where Can You Use Global Functions?

Once defined in the Dashboard Script Area, the global function can be reused in:

  • Component Script Areas

  • Connection Script Areas

  • Any other script context within the dashboard

Best Practices

  • Only define functions globally if they need to be reused across multiple areas.

  • Use clear, descriptive names to avoid conflicts with other functions or SDK methods.

  • Group related utility functions together for better organization.

  • Avoid polluting the global namespace with too many functions.

Calculating and Passing Date Range for Dataset Filters

Overview

When working with datasets in BDB Dashboard Designer, it's common to filter data based on date ranges — such as "Last 30 Days", "Last 7 Days", or "This Month".

In such scenarios, you need to dynamically calculate the start and end dates based on the current date, and then pass these values to the dataset for filtering.

This guide explains how to calculate and format the start date and end date based on a "Last 30 Days" selection.

Use Case: Filter for Last 30 Days

If a user selects "Last 30 Days" as the filter:

  • The End Date should be today’s date

  • The Start Date should be today minus 29 days

This ensures a full 30-day window (including today) has passed to the dataset.

Example Code

// Step 1: Get today's date
var todays_date = new Date();
// Example output: Thu Sep 25 2025 23:04:22 GMT+0530 (India Standard Time)
 
// Step 2: Format today's date as 'yyyy-mm-dd'
var formatted_end_date = $.datepicker.formatDate('yy-mm-dd', todays_date);
// Output: '2025-09-25'
 
// Step 3: Subtract 29 days from today's date to get the start date
todays_date.setDate(todays_date.getDate() - 29);
 
// Step 4: Format the calculated start date
var formatted_start_date = $.datepicker.formatDate('yy-mm-dd', todays_date);
// Output: '2025-08-27'

Output Summary

Variable

Value (Example)

Description

formatted_end_date

2025-09-25

Today's date (end of range)

formatted_start_date

2025-08-27

29 days before today (start date)

How to Use it in the Dashboard?

You can now use formatted_start_date and formatted_end_date:

  • As input parameters for dataset filters

  • In the data connections to query external data sources

  • Within component scripts to control visualizations based on the date range

Notes:

  • The $.datepicker.formatDate function is used to convert JavaScript Date objects into a standard format (yyyy-mm-dd) expected by most databases and APIs.

  • Always ensure the date format matches the requirements of your backend or query logic.

Best Practices

  • Recalculate dates dynamically each time the dashboard loads to ensure up-to-date filtering.

  • Store date logic in the Dashboard Script Area if reused across multiple components or datasets.

  • Use clear and meaningful variable names like ("startDate", "endDate", etc).

PreviousHow to use Scripts — Dynamic VisibilityNextBest Practices