Getting Started Archives – Squirrel365 https://squirrel365.io/kb/getting-started/ Create stunning interactive content Wed, 06 Apr 2022 08:58:49 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 https://squirrel365.io/wp-content/uploads/2020/05/cropped-squirrel_512-1-32x32.png Getting Started Archives – Squirrel365 https://squirrel365.io/kb/getting-started/ 32 32 Find your way around https://squirrel365.io/knowledgebase/find-your-way-around/ Wed, 09 Sep 2020 00:55:34 +0000 https://squirrel365.io/?post_type=knowledgebase&p=4332 The post Find your way around appeared first on Squirrel365.

]]>

Find your way around

In this video we take a quick tour around the Squirrel interface to show you everything you’ll need to start building your own projects within Squirrel.

The post Find your way around appeared first on Squirrel365.

]]>
Data Binding https://squirrel365.io/knowledgebase/data-binding/ Wed, 21 Oct 2020 14:33:25 +0000 https://squirrel365.io/?post_type=knowledgebase&p=5991 The post Data Binding appeared first on Squirrel365.

]]>

Data Binding

Data binding is one of the fundamental building blocks of Squirrel. It is simply the linking of component properties to data contained in one or more spreadsheet cells.

As data in the spreadsheet updates, any component properties bound to that data will also update.

Each component in Squirrel has properties that can be set by binding to data in the spreadsheet; be sure to browse the properties of each component to see what you can do.

Watch the following video to see how you can easily incorporate data binding into your Squirrel projects, or you can follow along using a different example in the step-by-step instructions if you prefer.

Step-by-step:

 

1. Open up the spreadsheet in a new Squirrel project.

2. In cell A1 add the value 14.

3. In cell B1 add the value 53.

4. Add a pie chart component to the canvas and ensure that it is selected.

5. In its properties panel, expand the DATA drawer.

6. Move your cursor over the Values property and click on the data binding icon that appears above.

Tip: Move your cursor over any property field, if the data binding icon appears directly above the field, then this property can be bound to data in the spreadsheet.

7. The spreadsheet will open in binding mode. It will fill the central area of the Squirrel interface, the header is blue and contains a range field and confirm and cancel buttons.

Note: While in binding mode, the spreadsheet cannot be edited; data cannot be changed, added or removed.

8. You can select the data in two ways:

  • Click on cell A1, with the mouse button down click and drag the blue bounding box until it also includes cell B1.
  • Type Sheet1!A1:B1 into the range field at the top of the spreadsheet.

9. Click the Confirm button.

10. Check that the Values property of the pie chart contains the cell addresses and that the pie chart has updated to show these new values.

 

That’s how we can quickly and easily bind a component property to data in the spreadsheet. But, there is more that we can do to make this even more dynamic:

11. Add a spinner control to the canvas and ensure that it is selected.

12. Expand the DATA INSERTION drawer in the properties panel.

13. Click the data binding icon above the Value field.

14. Select cell A1 and click the confirm button.

15. Add a second spinner control to the canvas.

16. This time bind the Value property to cell B1.

17. Change to Preview mode.

18. Change the values of the spinners by typing in new values or clicking the spinner buttons and watch the pie chart component react to the new values.

 

That’s the end of this tutorial on Data Binding. Although this is a very simple example, you can begin to see how binding data to component properties can really start to make your projects come alive. Then, you can take it a step further by adding control components into that mix to produce powerful, interactive applications.

The post Data Binding appeared first on Squirrel365.

]]>
Data Insertion https://squirrel365.io/knowledgebase/data-insertion/ Wed, 21 Oct 2020 22:59:28 +0000 https://squirrel365.io/?post_type=knowledgebase&p=6239 The post Data Insertion appeared first on Squirrel365.

]]>

Data Insertion

Data insertion is the copying of data from one area of the spreadsheet into another. Typically, it is used by control components (for example, a push button, a radio button, or a dropdown box), where the user’s choice determines which data is copied and pasted into different cell or range of cells. This copied data can then be used by other functions or even bound to the properties of other components.

The data mover function is also used to insert and/or move data behind the scenes.

Binding other components to the copied data, means that they will update in response to the user’s selection.

Watch the following video to see how you can easily incorporate data insertion into your Squirrel projects, or alternatively follow the Step-by-Step guide if you prefer:

Step-by-step:

Many components in Squirrel have data insertion properties, these are mostly control components, but the text input component also inserts data. There is also some variation in how these components handle data insertion, so the following sections will cover the different methods.


Text Input

This is possibly the simplest form of Data Insertion; text added to a text input component by the user is inserted into a single cell in the spreadsheet.


  1. Add a text input component to the canvas and select it.
  2. Expand the DATA INSERTION drawer in the properties panel.
  3. Bind the Destination property to an empty cell.




  4. Switch to DEBUG mode and show the spreadsheet (if not visible).
  5. Type a word or value into the text input component and press enter.
  6. The cell bound to the destination property of the text input component updates accordingly.

Tip: In the spreadsheet change the colour of any Destination cell(s) to yellow; this will remind you that the content of these cells will change during runtime and to not use them for other purposes.


Single Data Insertion

Some components, such as pushbuttons or checkboxes, allow just one set of data (the contents of one cell or a range of cells) to be copied into another area of the spreadsheet.


  1. In cell A1 of the spreadsheet, add MoveThis.
  2. Add a pushbutton component to the canvas and select it.
  3. Expand the DATA INSERTION drawer in the properties panel.




  4. Bind the Source property to cell A1.
  5. Bind the Destination property to an empty cell.
  6. Switch to DEBUG mode and show the spreadsheet (if not visible).
  7. Click the pushbutton component.
  8. The cell bound to the destination property of the pushbutton component will now also contain MoveThis.


Series Data Insertion

Some components, such as radio buttons, dropdowns or listboxes, allow for one or more sets of data (the contents of one cell or a range of cells) to be copied into another area of the spreadsheet.

  1. In the spreadsheet add Option 1 to cell A1, Option 2 to cell A2, Option 3 to cell A3 and Option 4 to cell A4.
  2. Add a radio button component to the canvas and select it.
  3. In the GENERAL drawer of the properties panel, click the data binding icon above the List items property.
  4. Select cells A1 to A4 or type Sheet1!A1:A4 into the range field and click the Confirm button.
  5. The radio button labels will correspond to the contents of cells A1 to A4.
  6. Expand the DATA INSERTION drawer of the properties panel.




  7. In the Series property field, a default series (Series 1) is already selected.
  8. Rename this series if you wish by entering a new name in the Name property field.
  9. Select a Type from the dropdown list. The following sections describe what each Type is and how to use it:
    • Position – Each button of the component is identified by a position value. The first button is position 1, the second is position 2 and so on. Clicking each button will place its position value into the destination cell.
      • No source is required.
      • Bind the destination property to an empty cell in the spreadsheet.
      • Switch to DEBUG mode.
      • Select one or more radio buttons.
      • Clicking the first button will insert a 1 into the destination cell, clicking the second will insert a 2 and so on.
    • Label – This is the text alongside each button. Clicking each button will copy its label into the destination cell.
      • No source required.
      • Bind the destination property to an empty cell in the spreadsheet.
      • Switch to DEBUG mode.
      • Select one or more radio buttons.
      • Clicking the first button will insert Option 1 into the destination cell, clicking the second will insert Option 2 into the destination cell and so on.
    • Value – This type requires one source value per button in the radio button component. Selecting a radio button will copy the corresponding value into the destination cell.
      • In the spreadsheet add 5 into cell B1, 6 into cell B2, 7 into cell B3 and 8 into cell B4.
      • Click the data binding icon above the Source property.
      • Select cells B1 to B4 or type Sheet1!B1:B4 into the range field and click the Confirm button.
      • Bind the destination cell to an empty cell in the spreadsheet.
      • Switch to DEBUG mode.
      • Select one or more radio buttons.
      • Clicking the first one will insert 5 into the destination cell, clicking the second will insert 6 into the destination cell and so on.
    • Row – This type requires once source row of data per button in the radio button component. The corresponding row will be copied into a destination row.
      • In the spread sheet add data to four rows (see image below).
      • Click the data binding icon above the Source property.
      • Move the mouse cursor to the start of the topmost row and click so that the row is selected and then drag down to select all four rows.




      • Click the Confirm button.
      • Click the data binding icon above the destination property.
      • Move the mouse cursor to the start of an empty row and click so that the row is selected.
      • Click the Confirm button.
      • Switch to DEBUG mode.
      • Selecting one or more radio buttons.
      • Clicking the first one will insert the topmost row into the destination row, clicking the second will insert the second row into the destination row and so on.
    • Column – This type works in the same way as the Row type, but as the name suggests instead of the data being in rows, the source and destination properties must be bound to columns.
    • Status List – This type returns a comma separated list of 0s and 1s, the number of items in the list relate to the number of buttons in the radio button component. The selected button is denoted by a 1, the unselected buttons are represented by a 0.
      • No source required.
      • Bind the destination property to an empty cell in the spreadsheet.
      • Switch to DEBUG mode.
      • Selecting Option 1 will add 1,0,0,0 into the destination cell, selecting Option 2 will add 0,1,0,0 into the destination cell and so on.
  10. To add another Data Insertion series, click the plus button above the Series property field.




  11. Then follow steps 8 to 10.
  12. Both Data Insertion series will be actioned when interacting with the radio button.

You can now use the inserted data; bind it to component properties, use it to determine what components should be visible on the canvas, use it to trigger other actions and so on.

That’s the end of this tutorial on Data Insertion. Try experimenting with the different components to see how they handle data insertion and how you can use that within your projects. If you haven’t already used the Data Mover function, that also can be used to move data around the spreadsheet.

The post Data Insertion appeared first on Squirrel365.

]]>
Dynamic Visibility https://squirrel365.io/knowledgebase/dynamic-visibility/ Mon, 28 Sep 2020 15:36:54 +0000 https://squirrel365.io/?post_type=knowledgebase&p=4833 The post Dynamic Visibility appeared first on Squirrel365.

]]>

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!

The post Dynamic Visibility appeared first on Squirrel365.

]]>