Create a Toggle Button

This video shows how you can quickly create toggle buttons in your Squirrel project with both a standard and a custom design. These can be used to allow your end-users to control what is visible, what is included in calculations, which options they want to have active, and many more.

Use the Web View component

This spotlight video shows three different uses of embedding eternal web content into Squirrel, including embedding dynamic data from Wikipedia and displaying and controlling a Google Map.

Build a Tabbed View

A tabbed view allows the user of a project to choose different views (or tabs) at the click of a button. The following video shows how straightforward it is to create this type of capability in Squirrel:

Set a default selection for a Dropdown

The default behaviour of a dropdown component is to not have any item initially selected. To change this use the Selected Item property in the INTERACTIVITY drawer of the properties panel.

Select either Label or Position from the property options, then in the empty property field directly below, bind to an appropriate value. If you have chosen Label and the dropdown box contains five options e.g. Red, Green, Blue, Black, White, binding to a cell that contains the word Red, will ensure that Red is the default selection. If you have chosen Position, binding to a cell that contains a 2 will ensure that Green is the default selection.

In the example below, Position has been selected, the cell bound to the property contains a 2, therefore the second item in the list is the default selection:

Set property values

In Squirrel, each component, function and connection has a number of properties that are shown in the properties panel. There are different methods of setting or editing these property values with sometimes more than one method available.

For some properties it is obvious how to interact with them, but for others that won’t become obvious until you rollover them with your mouse or even click on them.

In this article we’ll describe the different methods and how they can be accessed and used.

Type a value

Perhaps the most common method is to type in a new value, but this method is not available for all property types.

Click on a property field, if the cursor caret starts blinking this indicates that you will be able to edit that property by typing in a new value or by pasting in a value from the clipboard.

Ensure that you are entering the correct data type, for example, entering a non-numeric value into a property field that only accepts numerical values will not work.

Bind a value

Some properties can only be set from data in the spreadsheet via the process of data binding. Move your mouse over the property field, if a data binding button appears above the property, click the button. The spreadsheet will open in ‘binding mode’ select a cell (or range of cells) containing the data that you wish to bind to the property and click confirm. If you’d like to learn more about data binding, take a look at the Getting started: Data binding tutorial.

Checkbox toggle

A checkbox property is an on or off toggle. To set a checkbox property to on, click the checkbox so that it changes to a blue tick. A black empty checkbox means that the property is toggled to off.

Sometimes entire property sections can be toggled on or off. If the checkbox for the property section is toggled to off, none of the properties within that section are used. When toggled to on, all of the properties are used and any changes are applied. For instance, unchecking the DEFAULT TEXT section of the push button component will remove the default text label from the button entirely. When toggled to on, the default text label is shown and any changes made to the properties within the DEFAULT TEXT section are applied.

Dropdown selection

Change a property by selecting from a list of options in a dropdown box. The most common use for this in Squirrel is for font selection, but there are other uses such as line styles, number formats, insertion types and many more besides that are specific to individual components.

Radio button selection

Radio buttons are used to set some properties in the property panel. They present a choice between two or more options, with one already selected by default. The options are mutually exclusive, selecting one will automatically deselect the others. The example below shows a radio button property being used to set the orientation property of a radio button component:

Spinner adjustment

Spinner buttons are used to increment or decrement the current value of a property. Not all Squirrel properties have spinner buttons, but those that do will show on mouse rollover.

The value by which the spinner buttons adjust the property can vary, sometimes it may be by 1 or it may be more, see the example above. Clicking the spinner button increases the Blur property by 1, but the Opacity property increases by 10. In the case of the latter, if you wish to set an intermediate value, it is usually possible to do so either by typing a different value into the property field, or by binding to a value in the spreadsheet.

Use a Colour picker

The colour picker can be used to choose a new colour value. Click on the square next to any colour property, user the slider on the spectrum bar to select a hue, then adjust the shade by moving the white circle around the colour field.

The colour property can be set in multiple ways: using the colour picker, typing in a value or binding to a value in the spreadsheet. For more information about the latter option, take a look at this article: Using colour values.

Adjust a Slider

Using the slider to adjust a property value is pretty self explanatory. Click and hold the mouse cursor over the slider handle, and move your mouse to adjust the property value up or down, release the mouse button at the desired value. Alternatively, click into the slider value field and enter a numerical value.

Button sets

The buttons sets in the properties panel are mainly associated with text formatting properties.

For the following set you can choose any, all or none. Click to apply the style, when the button is blue it has been applied to the text. Click again to remove the style from the text.

For the following sets you must choose one option only. An option is selected by default in each set. These settings control the justification and alignment text properties with the currently selected option indicated by a blue button.

The following set you can choose one or none. Click to apply capitalization rules to the text, the selected rule is shown as a blue button. Click again to remove the rule from the text or select a different rule.

Use the capitalization rules

When working with text in Squirrel, you have a few different options for standardising the capitalization of text within some component properties. Selecting one of the following buttons will apply that capitalization rule to the text of the property it belongs to. Click once to apply the rule and click again to remove the rule. Clicking a different rule will replace any currently applied rule.

We’ll apply each capitalization rule to the following text:

Squirrel365 gives you the power to turn ordinary spreadsheets into extraordinary content.

Leading capitals

Often used for titles, this will change the initial letter of each word to a capital letter:

Squirrel365 Gives You The Power To Turn Ordinary Spreadsheets Into Extraordinary Content.

Uppercase

Change each letter of the text to a capital letter:

SQUIRREL365 GIVES YOU THE POWER TO TURN ORDINARY SPREADSHEETS INTO EXTRAORDINARY CONTENT.

Lowercase

Change each letter of the text to a lowercase letter:

squirrel365 gives you the power to turn ordinary spreadsheets into extraordinary content.

Display an image from Google drive in Squirrel

To use an image stored in Google drive as the source of a squirrel image component first locate the image in Google drive and right click on it and select the “Get link” option from the menu:

Make sure the link is set to be available to “Anyone with the link”

and then copy the ID (shown highlighted below) of the image from the middle of the link

use this ID to create a link of the form:

https://drive.google.com/uc?id=<ID>

where <ID> is replaced by the ID copied in the previous step.

This will result in a link of the form

https://drive.google.com/uc?id=1D1HDD-sRqYIjd3rMLLd6kkJhHMjTATEC

which can then be used as the “Image URL” property of an image component

Build your own Countdown Calculator

Countdown timers are a good way to display to viewers the time remaining to important events in the future. This following video will display how straightforward it is to create your own countdown timer within Squirrel:

Add a Reset Button

This video shows how you can quickly add a button to your project which will reset inputs to their initial values.