> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/bdb-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/script-help-section/how-scripts-are-used.md).

# How scripts are used

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. &#x20;

* Navigate to the Designer canvas page for a dashboard.
* Click the ***Component Library*** icon.&#x20;
* Drag and drop the ***Checkbox***, ***Bar Chart***, and ***Line Chart*** components into the canvas.     &#x20;

![](/files/Dg1IUyNPgP6LyqUWUIrX)

* Click on the ***Properties*** icon next to the Checkbox component.                  &#x20;
* Set **Checked Value to ‘1’** and **Unchecked Value to ‘0’** (as shown below) using the **General** properties tab of the Checkbox component.     &#x20;

![](/files/XS4C2L4gtj53v6KamjiL)

* Create data connections for the Column chart and Area chart. Refer to the *<mark style="color:blue;">**Excel Connection**</mark>* page of the [<mark style="color:blue;">**Establishing a Data Connection**</mark>](/bdb-documentation/data-visualization/governed-dashboards/connecting-to-a-data-source/establishing-a-data-connection.md) section for the details.

![](/files/OnyoKxPA4UeAZwx0rPY8)

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

&#x20;     ![](/files/scZOmT8mJfq8ltNb8LSf)

* The script window for the ***Checkbox*** component opens.                               &#x20;

![](/files/pZlafbUMZ4UaWQWn4ChT)

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

![](/files/4TB6KrKMJggtG8QU0TMR)

{% hint style="info" %} <mark style="color:green;">Please Note</mark>: The user can select the ***Hide Component*** and ***Show Componen***&#x74; functions from the ***Scripting Help*** window.
{% endhint %}

![](/files/KPw5seTzSyMbXk3eWF70)

* 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. &#x20;
    * 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.                  &#x20;

![](/files/MRVTg3j51UV2IbgxweNu)

* 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:                    &#x20;

![](/files/GnmnWpyBpwIssNLq8zgq)

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

&#x20;     ![](/files/15mBMYL9j0raDiBr90Hu)

* In the below screen capture, since the ***Checkbox*** is checked, the ***Column chart*** is displayed.                          &#x20;

![](/files/wOtOVCFssJidSO16ke04)

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

![](/files/5fpb6j2Is4P8q1ViXpEf)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/script-help-section/how-scripts-are-used.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
