squirrel_logo
Sign up for free
squirrel_logo

Dynamic Visibility

Dynamic visibility is a fundamental capability of Squirrel that allows your project to show and hide components in response to user interactions and/or data conditions. Use dynamic visibility to show a pop-up information screen, hide a component until it is required, show and hide objects in timed sequences, switch between different visual representations of data and many other different scenarios besides.

Dynamic Visibility Properties Drawer

Each component that can be added to the canvas has dynamic visibility properties that are configured in exactly the same way. The component will be visible when the content of the Status property field is equal to the content of the Value property field. Leaving both property fields empty will ensure that the component is always visible as the Status and Value property fields are equally empty.

Both dynamic visibility property fields can be bound to cells in the spreadsheet, and by using spreadsheet logic, the visibility of objects can be changed dynamically according to this comparison between the Status and Value properties.

The dynamic visibility properties of a component apply when your project is in Debug mode, Preview mode or as a published project. It doesn’t apply in Design mode, instead use the eye icon next to objects in the Object Browser to hide and show objects during project development.

 

The following are three tutorials that describe different ways to use dynamic visibility. Each tutorial section has a video showing one example that you can watch, or you can follow along using a different example in the step-by-step instructions if you prefer.

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.

 

  1. Set the Status by clicking on the Bind Data icon above the Status field:

 

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

 

  1. Next, set the Value property by entering a word or number you wish to use into the 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 Status property to see if it matches the Value property.

Tip: The comparison is case sensitive, ensure that the Status will be in the same format as the 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 Status property is not equal to the Value entered in the property field.

 

  1. Change back to Design mode.

 

  1. In the spreadsheet, select the cell that you bound to the Status property and enter the exact value as you entered into the Value property.

 

  1. Enter Debug mode again.

 

This time the component remains visible because the Status property and the 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.

 

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

 

  1. Set the Radio Button component properties:
    • 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)
    • Properties Panel > DATA INSERTION > Series 1 > Type > Label > Destination > bind to C2

 

  1. Select the Text Label component:
    • Properties Panel > LABEL TEXT > Add some text to the label e.g. “Now you see me…” or “BOO!”
    • Properties Panel > DYNAMIC VISIBILITY > Status, bind to C2.
    • Properties Panel > DYNAMIC VISIBILITY > Value field > input the number 2.

 

  1. Enter debug mode by clicking the DEBUG button.

 

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

 

  1. Select the Slider component:
    • Properties Panel > GENERAL > Value field bind to A1.

 

  1. Open the Spreadsheet and select cell B1. Enter the following formula:
=IF(A1>75,1,0)

Note: 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:
    • Properties Panel > LABEL TEXT > Text To Display amend to LOW STOCK!
    • Properties Panel > TEXT STYLING > amend the properties of the text field to make it look like a warning label.
    • Properties Panel > DYNAMIC VISIBILITY > Status field bind to B1.
    • Properties Panel > DYNAMIC VISIBILITY > Type 1 into the Value field.

 

  1. Enter Debug mode by clicking the Debug button.

 

  1. Interact with the Slider control, as the slider moves above 75, the LOW STOCK! warning Text Label will display.

 

That’s the end of this tutorial on Dynamic Visibility. Hopefully you’ve been inspired to try it out 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!

in Getting Started
Was this article useful?

Related Articles