# Dynamic Visibility Tutorials

Below are a set of three tutorials that describe different ways to use dynamic visibility. Each tutorial  includes step-by-step instructions to easily follow along.

## Dynamic Visibility: The Basics

### Step-by-step:

1. Add a component to your canvas and make sure that it is selected. In the properties panel, expand the **DYNAMIC VISIBILITY** section. 
2. Set the first **Value** by clicking on the **Bind Data** icon above the left **Value** field:

<figure><img src="/files/2neIngzjiGHRkNcAd6UG" alt=""><figcaption></figcaption></figure>

3. Select a single empty cell in the Spreadsheet and click the **Confirm** button.
4. Next, set the second **Value** property by entering a word or number you wish to use into the right **Value** input field. The value can be anything:
   * Boolean value
   * Word
   * Number
   * Phrase

<figure><img src="/files/wZuT9yKVTlcAlZ3bcgYX" alt=""><figcaption></figcaption></figure>

5. The component will compare the contents of the cell bound to the first **Value** property to see if it matches the second Value property.

{% hint style="info" %}
The comparison is case sensitive; ensure that the first **Value** will be in the same format as the second **Value,** e.g., ALL CAPS, Leading Caps, etc., as ‘TRUE’ will not equal ‘True’.
{% endhint %}

6. Enter Debug mode by clicking the **DEBUG** button.

The component will **not** be visible because the empty cell bound to the first Value property does not equal the second Value entered in the property field.

7. Change back to **Design** mode.
8. In the spreadsheet, select the cell that you bound to the first Value property and enter the exact value that you entered into the second Value property.
9. Enter **Debug** mode again.

This time, the component remains visible because the first **Value** property and the second **Value** property are equal.

This is the simplest demonstration of **Dynamic Visibility**, but we can take this basic concept much further and start to configure component visibility based on user and data-driven interaction i.e,. show a component based on a user’s selection, or show a component once a data value reaches a specified threshold.

## Dynamic Visibility using Data Insertion

### Step-by-step:

1. For this example, you’ll need two components: a control component and a display component. Add a **Radio Button** component and a **Text Label** component to the canvas.&#x20;
2. Open the **Spreadsheet** and add the number 1 into cell **A1**, 2 into **A2,** and 3 into **A3**.&#x20;
3. Set the **Radio Button** component properties:
   1. Properties Panel > **GENERAL** > List Items > bind to cells A1, A2 and A3 (click on cell A1 and drag the mouse until the selection also includes cells A2 and A3)
   2. Properties Panel > **DATA INSERTION** > Series 1 > Type > Label > Destination > bind to C2
4. Select the Text Label component:
   1. Properties Panel > **LABEL TEXT** > Add some text to the label e.g., “Now you see me…” or “BOO!”
   2. Properties Panel > **DYNAMIC VISIBILITY** > Value 1 , bind to C2.
   3. Properties Panel > **DYNAMIC VISIBILITY** > Value 2 > input the number 2.
5. Enter debug mode by clicking the **DEBUG** button.
6. Interact with the **Radio Button** component. Note that the **Text Label** is only visible when option 2 of the radio button component is selected (when the value of **C2** is equal to 2).

## Dynamic Visibility using Formulas

### Step-by-step:

1. For this example, you’ll need two components: a control component and a display component. Add a **Slider** component and a **Text Label** component to the canvas.&#x20;
2. Select the Slider component:
   1. Properties Panel > **GENERAL** > Value field bind to **A1**.
3. Open the Spreadsheet and select cell **B1**. Enter the following formula:

> **=IF(A1>75,1,0)**

{% hint style="info" %}
This formula calculates that if the value of **A1** (the slider input) is greater than 75, then the value of cell **B1** is 1; otherwise, the value of **B1** is 0.
{% endhint %}

3. Select the **Text Label** component:
   1. Properties Panel > **LABEL TEXT** > Text To Display amend to LOW STOCK!
   2. Properties Panel > **TEXT STYLING** > Amend the properties of the text field to make it look like a warning label.
   3. Properties Panel > **DYNAMIC VISIBILITY** > Value 1 field bind to B1.
   4. Properties Panel > **DYNAMIC VISIBILITY** > Type 1 into the Value 2 field.
4. Enter **Debug** mode by clicking the **Debug** button.
5. Interact with the **Slider** control, as the slider moves above 75, the LOW STOCK! The warning **Text Label** will display.

*That’s the end of this tutorial on Dynamic Visibility. Hopefully, you’ve been inspired to try it in some of your projects. If you’ve done something fabulous using Dynamic Visibility, do get in touch; we love seeing how ingenious Squirrel creators can be!*


---

# Agent Instructions: 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:

```
GET https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility/dynamic-visibility-tutorials.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.