How scripts are used

BDB offers script support at the component level to display the intended UI actions and at the data connection level to apply data-related 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.

Dynamic Visibility

The scenario is to have a checkbox that, when enabled displays a Column chart, and when disabled, shows an Area chart.

• Navigate to the Designer canvas page for a dashboard.

• Click the Component Library icon.

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

• Click on the Properties icon next to the Checkbox component.

• Set Checked Value to ‘1’ and Unchecked Value to ‘0’ (as shown below) using the General properties tab of the Checkbox component.

• Create data connections for the Column chart and Area chart. Refer to the Excel Connection page of the Establishing a Data Connection section for the details.

• Click on the Script on Load icon provided next to the Checkbox component.

• The script window for the Checkbox component opens.

• Write the relevant script for the action mentioned above, as explained in the following steps:

  • Write the if statement for the script following the order of “changedItem.attributes.Value”

  • Pass ‘Value==1’ (In other words, it suggests that the checkbox is enabled)

  • Either click the Help icon or use the Ctrl+Space keys to get assistance in writing the script.

Please Note: The user can select the Hide Component and Show Component functions from the Scripting Help window.

• You can modify the readily available script with the below given steps:

  • Select the ‘Show and Hide’ function as per the requirement from the Designer Scripting Help window.

  • If the ‘Value == 1’ (in other words, if the Checkbox is enabled) the Bar chart should be displayed.

    • For this to occur, Place the Hide Component and Show Component functions under the if function.

    • Pass Bar chart value to the Hide Component function.

    • Pass the Line chart value to the Show Component function to make sure that the Column chart will be hidden when the Area chart is displayed.

• If the Value == 0 (in other words, if the checkbox is disabled), we need to do the reverse of the function that we used earlier. So that when users uncheck Check Box, the Line chart gets displayed and the Bar chart remains hidden.

• To accomplish this, the users need to write the highlighted portion of the script:

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

• In the below screen capture, since the Checkbox is checked, the Column chart is displayed.

• By unchecking the Checkbox displays the Area chart gets displayed.