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

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F1D6ZDNhLm18zi6rAk1qL%2Fimage.png?alt=media\&token=dacc1c71-e1ed-4cea-b10e-fa1cbeb1479a)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FkQSdaOrFSTm2wdmbprGe%2Fimage.png?alt=media\&token=6da2a59a-d1a4-4019-99b6-ef8416ed15eb)

* 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>](https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/connecting-to-a-data-source/establishing-a-data-connection) section for the details.

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FGbmd8n8jOETblQFH6Wru%2Fimage.png?alt=media\&token=b96c679a-d907-4733-b37b-f1c59172f67b)

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

&#x20;     ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F38ScairknNe4sRGH9GQg%2Fimage.png?alt=media\&token=cf29c22e-ff06-471d-8232-a493b5f532f1)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F8fCCpqh3jsFM5xdr93t1%2Fimage.png?alt=media\&token=9676159e-29e7-4978-afff-7cdd40f0f143)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FIVcvyTZyAvl75rHgobuA%2Fimage.png?alt=media\&token=07c5101e-378a-44ff-841a-73871bf3c742)

{% 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 %}

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FHzuAXfaWKTBMTwWeuTWG%2Fimage.png?alt=media\&token=4807c6f3-0227-4cda-94c1-374887fab40f)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FMRpqllrnXTAe1boffqae%2Fimage.png?alt=media\&token=bcf9684c-e13c-42e3-9bc1-9aa87918a96c)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FMUMY3zJj6IcCPzzM2sl6%2Fimage.png?alt=media\&token=8bb9eeaa-410d-4b9a-a6a0-3f8102205282)

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

&#x20;     ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FHL13UXiHIE1lxp6esas7%2Fimage.png?alt=media\&token=9cd47646-885a-4830-99ff-015ee3112040)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FEIupM8I7XZmUpbNlLN4i%2Fimage.png?alt=media\&token=0501289b-50b0-4217-8d5c-d4e1cfd2544c)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FwgsJsjItoNxfGgXEH9ez%2Fimage.png?alt=media\&token=b18b8935-ad62-4dbb-8046-e81e15694340)