LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Learn Section
Learn Section
  • Introduction
  • Getting Started
    • Finding your way around
    • Core concepts
      • Data Binding
      • Data Insertion
      • Dynamic Visibility
    • Creating and managing projects
      • Creating a Project
      • Saving a Project
      • Opening a Project
      • Version History
    • Templates
  • Components
    • Overview
    • Layout & Positioning
    • Charts
      • Line Chart
      • Column Chart
      • Bar Chart
      • Pie Chart
      • Combination Chart
      • Area Chart
      • Spline Chart
      • Step Chart
    • DataViz
      • Gauge
      • Word Cloud
      • Chord Diagram
      • Sankey Diagram
      • Schedule (Gantt)
      • Metric Tile
      • Progress Bar
      • Trend Icon
      • Mapbox
      • Loading Animation
    • Tables
      • Scorecard
      • Data Table
    • Controls
      • Push Button
      • Dropdown
      • Multi Select Dropdown
      • Listbox
      • Label Based Menu
      • Checkbox
      • Radio Button
      • Slider
      • Value Input
      • Print Button
      • URL Button
      • Screenshot
      • Hotspot
      • Date Picker
      • Toggle Switch
      • Scenario
    • Text
      • Text Label
      • Text Input
      • Text Area
    • Shapes
      • Rectangle
      • Ellipse
      • Line
    • Media
      • Image
      • Icon
    • Containers
      • Container
      • Web View
      • Repeat Container
      • Row Layout
      • Column Layout
  • Functions
    • Overview
    • Data Mover
    • External Parameters
    • Export to Excel
    • Export to PDF
    • Timer
    • Tableau Parameters
    • Browser Info
    • TextJoin
    • Unique List
  • Connections
    • Overview
    • Excel One Drive
      • Excel One Drive Read
      • Excel One Drive Writeback
    • Google Sheets
      • Google Sheets Read
      • Google Sheets Writeback
    • Ninox Connections
    • Smartsheets
    • CSV Connector
    • SAP Webi Connector
    • XDC Connections
    • Database Connections
    • Zapier Trigger
  • Spreadsheet
    • Overview
    • Spreadsheet functionality
    • Supported Spreadsheet Functions
    • Spreadsheet performance
  • Best practices for the Squirrel spreadsheet
  • Publishing & Sharing
    • Overview
    • Project Settings
    • Publishing to Squirrel Cloud
    • Publishing Locally
    • Using the Project Manager
    • Adding projects to PowerPoint
    • Adding projects to Tableau
    • Progressive Web Apps (PWA)
  • SETTINGS
    • Image Library
    • Custom Fonts
  • Account Management
    • Manage your account Profile
    • Understanding your Squirrel plan usage
    • Changing your Plan
    • Billing
    • How do I delete my account?
  • Frequent Questions
    • What data do you keep and for how long?
  • How-Tos
    • Overview
    • Add-ons
      • Add-on Documentation
      • Window Size – Add responsive behavior to your components
      • Window Size - Getting responsive behavior in the canvas
    • Adding your own Google Fonts
    • Chart title and Checkbox label text case formatting
    • Deleting functions and connections
    • Find & Replace Fonts
    • Getting a Mapbox API access token
    • Renaming a component, function or connection
    • Seeing Data from a Connector at Design time
    • Troubleshooting Projects in the Console
    • Using colors and color values
  • Tutorials
    • Create a temperature conversion app
    • Create a revenue growth app from an existing spreadsheet
    • Whack-A-Squirrel Game
    • Filtered Rows Insertion: Building a Filtered Selection
Powered by GitBook
LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

On this page
  • Dynamic Visibility the Basics
  • Dynamic Visibility using Data Insertion
  • Dynamic Visibility using Formulas
  • Conditional Logic

Was this helpful?

  1. Getting Started
  2. Core concepts

Dynamic Visibility

PreviousData InsertionNextCreating and managing projects

Last updated 11 months ago

Was this helpful?

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.

Each component that can be added to the canvas has dynamic visibility properties that are configured in 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.

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

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

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 does not equal the Value entered in the property field.

  1. Change back to Design mode.

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

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

  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 > Status, bind to C2.

    3. Properties Panel > DYNAMIC VISIBILITY > Value field > 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 > Status field bind to B1.

    4. Properties Panel > DYNAMIC VISIBILITY > Type 1 into the Value 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! warning Text Label will display.

Conditional Logic

Introduced in 1.14, conditional logic opens up greater control for the Dynamic Visibility feature, expanding to greater than/ less than arguments and is/ is not empty.

In 1.15, this property was expanded to other features in Squirrel, including Interactivity and function triggers.

More information can be found here:

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!

1.14 Highlight - Conditional Logic for Dynamic Visibility
1.15 Highlight - Conditional Logic