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:

1. Select a single empty cell in the Spreadsheet and click the Confirm button.

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

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

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

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

1. Change back to Design mode.

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

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

2. Open the Spreadsheet and add the number 1 into cell A1, 2 into A2, and 3 into A3.

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.

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)

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.

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

2. Enter Debug mode by clicking the Debug button.

3. 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!