How to use Scripts — Dynamic Visibility

BDB scripting enables complex dashboards by offering component-level UI and data connection-level back-end control, requiring only basic scripting knowledge.

BDB offers script support at the component level (for intended UI actions) and at the data connection level (for back-end changes). The scripting mechanism makes the creation of complex dashboards easy and quick. The users require basic scripting knowledge to create dashboards using the BDB Designer module. This section aims to provide a basic understanding of writing scripts and functionality.

Scenario

Have a checkbox that, when enabled, displays a Column chart, and when disabled, shows an Area chart.

Note: The steps below use the Checkbox, Bar Chart, and Line Chart components. If your canvas uses Column chart and Area chart, apply the same show/hide logic to those components.

Set up the canvas

  1. Navigate to the Designer canvas page for a dashboard.

  2. Click the Component Library icon.

  3. Drag and drop the Checkbox, Bar Chart, and Line Chart components into the canvas.

  4. Click the Properties icon next to the Checkbox component → General tab:

    • Checked Value = ‘1’

    • Unchecked Value = ‘0’

  5. Create data connections for the Column chart and Area chart (or your Bar/Line charts).

    • Refer to the Excel Connection page of Establishing a Data Connection.

Open the Script Editor

  1. Click the Script on Load icon next to the Checkbox component.

  2. The script window for the Checkbox component opens.

Write the script

Follow these steps to implement the behavior:

  1. Write the if statement following changedItem.attributes.Value.

  2. Pass Value == 1 (checkbox enabled).

  3. Use the Help icon or Ctrl+Space for assistance and to insert helper functions.

Note: You can select the Hide Component and Show Component functions from the Scripting Help window.

Use the readily available function

  • Select ‘Show and Hide’ from Designer Scripting Help.

  • If Value == 1 (Checkbox enabled): show the Bar chart and hide the Line chart.

  • If Value == 0 (Checkbox disabled): show the Line chart and hide the Bar chart.

  • (If you’re using Column/Area instead of Bar/Line, substitute those names accordingly.)

Example pattern (reference only):

// Pseudocode using helpers from Scripting Help
if (changedItem?.attributes?.Value == 1) {
  // Show Component('Bar Chart');   Hide Component('Line Chart');
} else {
  // Show Component('Line Chart');  Hide Component('Bar Chart');
}

Note: Keep the component names exactly as they appear on your canvas (e.g., Bar Chart, Line Chart, Column Chart, Area Chart).

Preview

  • After entering the script, click Preview to view results.

  • When the Checkbox is checked, the Column (or Bar) chart is displayed.

  • When the Checkbox is unchecked, the Area (or Line) chart is displayed.Show

Troubleshooting

  • Nothing changes when toggling: Confirm Checked/Unchecked Value are ‘1’/‘0’ and your script checks changedItem.attributes.Value.

  • Wrong component shown/hidden: Verify the exact component names passed to Hide Component / Show Component.

  • No data: Ensure the data connections for the Column/Area (or Bar/Line) charts are configured and bound.

  • Editor hints missing: Click inside the editor and press Ctrl+Space to re-trigger suggestions.

PreviousNavigate to Script Help PageNextExamples of Scripting in Dashboard Designer