Input Value

This article describes the value input component and its properties.

The value input allows a user to either type in a value or alter it using up and down arrows.

Select Value Input from the controls category of the component library. Move the mouse over the canvas and click to add the component to your project:

Value Input Properties

The Value input properties are organized into, STYLING,  and DYNAMIC VISIBILITY drawers. This guide will describe the data insertion and styling properties only; the dynamic visibility properties are generic and a separate guide and tutorial on dynamic visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set property values article for more information on using the different methods.

DATA INSERTION:

• Value – This property is the value which is controlled by the value input. This should be bound to a cell in the spreadsheet. The value in the spreadsheet will update and be updated by the component’s value.
• Step Size – the size of the change in the value caused by the up/down arrow buttons (if enabled)
• Enable limits – determines is there are limits to the values which can be input
• Min / Max – These properties determine the minimum and maximum values the user can enter using the component.

STYLING:

The appearance of the slider can be altered to suit a theme or particular style by using the STYLING properties.

Hide Up / Down arrows – this determines whether the component shows up and down arrows which allow the user to click to increase od decrease the value

VALUE

These properties apply to the value displayed by the component

• Font – The fonts used for the labels.
• Size – The size of the font of the labels.
• Text Colour – The colour of the text of the labels..
  • Opacity – This opacity of the text of the labels.
• Number format – This property determines how the displayed value is formatted. Note:
  • • selecting number, percentage or currency provide a extra option to set the number of decimal places displayed
    • selecting currency also provides an option to set the currency character and in the case of a custom character whither it should come before or after the number
    • when percentage is selected the component treats the value in the cell as fractional, i.e. 0.1 to represent 10%, 0.5 to represent 50% etc.  However, the other values in the property sheet (Min, Max and Step Size) should are treated as percentages, ie 10 for 10% and 50 for 50%.

BACKGROUND

These formatting properties apply to the handle of the slider

• Fill – the colour of the body of the component
  • Opacity – the opacity of the body of the component
• Border – the colour of the outline of the component
  • Opacity – the opacity of the outline of the component

Scenario

This article describes the Scenario component and its properties.

Scenarios provides a convenient graphical interface for a user to save and load different sets of data from spreadsheet ranges specified by the project desinger into a running Squirrel project.

When placed on the canvas the scenario component adds two buttons:

and when these buttons are pressed the end-user is presented with a combination of dialogs to allow them to save, load and edit their scenarios:

Select Scenario from the Controls category of the component library. Move the mouse over the canvas and click to add the component to your project:

Scenario Properties

The Scenario properties are organized into SCENARIO SETTINGS, BUTTON GOUP STYLING, and DIALOG STYLING and SCENARIO RANGES drawers.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set property values article for more information on using the different methods.

SCENARIO SETTINGS:

This property drawer controls the overall function of the Scenario component. Initially it looks like this:

• Scenario ID
  • This property provides a identifier under which the scenarios will be saved.
  • When the end user saves a scenario it will be tagged with this identifier and only scenarios with this identifier will be shown to the end user when they choose to re-load a scenario.
  • You should use different identifiers for different projects.
  • In addition to this identifier scenarios are also tagged with unique ID of the project author, i.e. the person who initially added the Scenario component to the canvas, in case other authors select the same scenario identifier.
• Save scenario to
  • This property allows the desinger to choose whether scenarios are saved to the Squirrel cloud or stored locally on the end-user’s machine.
  • Scenarios which are saved locally are not only specific to the local machine but also to the browser in which the project is viewed. As a result scenarios saved in one browser (e.g. Microsoft Edge) will not appear when the project is run in another browser (e.g. Google Chrome). Additionally, scenarios saved from a project embedded in PowerPoint will only appear when the project is viewed in PowerPoint
  • Locally saved scenarios are saved in the “IndexedDB” database of the browser
  • Scenarios which are saved to the Squirrel cloud will appear no matter which machine or browsers is used to view the project.
  • Selecting to save scenarios to the Squirrel cloud reveals a number of additional options:

• Cloud scenario modes – This property controls the scenario actions which the end-user will be able to perform in the final project
  • Allow Save – if this option is deselected then the user will not see the “Add Scenario” button. This is useful to provide a project with a number of build-in scenarios but not allow further ones to be added by the user.
  • Allow Load – if this option is deselected then the user will not see the “View all scenarios” button. This can be useful to capture specific information from the user, for example in a lead capture form.
  • Allow edit – this option is only available of “Allow load” is checked and controls whether the end user is offered the menu option to rename and delete scenarios.
• Where will your project be hosted?
  • This is a security setting which ensures that the Squirrel cloud will only deliver scenario information to a genuine Squirrel project
  • If Squirrel cloud it selected then there is nothing else to do, however, if “Custom domain” is selected then the domain on which the project will be hosted must be entered. This should be the high level domain without any subdomains and care must be taken to exactly match the name of the hosting domain (including http or https at the start and any port number at the end, e.g. https://somedomain:5000).

BUTTON GROUP STYLING:

The BUTTON GROUP STYLING properties are used to control the appearance of the save and load buttons on the canvas. The top section controls the options which are common to both buttons:

• Font – Choose a font style from the dropdown list.
• Size – Change the font size of the push button label.
• B I U – Use these toggle buttons (bold, italic, underline) to change the format of the button label. When any of these is toggled to on, the button is blue:

• Corners – This property determines the corner radius of the button borders. Use the slider to amend this property, or type a numerical value into the property field.

Each of the buttons can be independently styled by expanding the “SAVE BUTTON” and “LOAD BUTTON” sections to reveal the formatting options:

DIALOG STYLING:

The DIALOG STYLING properties are used to control the appearance pop-up dialogs which are presented when the end-user chooses to save or load a scenario:

• Font – Controls the font of the title and text in the main part of the dialogs.
• Text color – Controls the color of the title and text in the main part of the dialogs
• Fill – Controls the background colour of the dialogs
• Border – Controls the border of the dialogs
• Accent Color – Controls the colouring of the buttons in the dialog

SCENARIO RANGES:

These properties specify the spreadsheet ranges which will be saved as part of the scenario.

Each scenario can consist of many saved ranges, new ranges can be added by clicking on the + icon at the top right of the list of ranges.

Ellipse

This article describes the ellipse component and its properties.

The ellipse is a graphical component that can be styled to suit a Squirrel project theme.

Select ellipse from the shapes category of the component library. Move the mouse cursor over the canvas and click to add an ellipse to your project.

Ellipse Properties

The ellipse properties consist of a STYLING drawer, and a DYNAMIC VISIBILITY drawer. This guide will describe the styling properties only; the dynamic visibility properties are generic to each visible component and a separate guide and tutorial on dynamic visibility can be found here.

STYLING:

• Fill – When checked, the ellipse will be filled with a colour that matches the value entered in the property field. This can be set in 3 ways:

  • Clicking the coloured ellipse next to the Fill checkbox and using the colour picker

  • Typing in a colour value

  • Binding to a colour value in a spreadsheet cell

• Opacity – This determines the transparency of the ellipse. This is only available when the Fill checkbox is checked. Opacity can be set in 3 different ways:

• Border – This property is checked by default. Uncheck to remove the border from an ellipse. Set the colour and opacity properties as above.

• Weight – This property determines the line thickness of the ellipse border in pixels.

• Line style – Select an option from the dropdown box. The options are solid and dashed:

• Effects – Select an option from the dropdown box. The options are none and Drop Shadow. With Drop Shadow selected the following properties appear:

  • Color – this determines the colour of the shadow

  • Opacity – this determines the opacity of the shadow

  • X-Offset – determines the horizontal position of the shadow (positive values move to the right, negative values move to the left)

  • Y-Offset – determines the vertical position of the shadow (positive values move down, negative values move up)

  • Blur – determines the blur of the shadow

• Block mouse events – Checking this option will stop mouse interactions with components positioned on layers beneath the rectangle, e.g. a slider component sitting on a layer beneath the rectangle would not function. A partially covered component may still have some functionality. This option is unchecked by default which means that components positioned beneath the rectangle will respond to mouse events.

Rectangle

This article describes the rectangle component and its properties.

The rectangle is a graphical component that can be styled to suit a Squirrel project theme.

Select rectangle from the shapes category of the component library. Move the mouse cursor over the canvas and click to add the shape to your project:

Rectangle Properties

The properties consist of a STYLING drawer, and a DYNAMIC VISIBILITY drawer. This guide will describe the styling properties only; the dynamic visibility properties are generic to each visible component and a separate guide and tutorial on dynamic visibility can be found here.

STYLING:

• Fill – When checked, the rectangle will be filled with a colour that matches the value entered in the property field. This can be set in 3 ways:

  • Clicking the coloured rectangle next to the Fill checkbox and using the colour picker

  • Typing in a colour value

  • Binding to a colour value in a spreadsheet cell

• Opacity – This determines the transparency of the rectangle. This is only available when the Fill checkbox is checke

• Border – This property is checked by default. Uncheck to remove the border from an rectangle. Set the colour and opacity properties as above.

• Weight – This property determines the line thickness of the rectangle border in pixels.

• Line style – Select an option from the dropdown box. The options are solid and dashed:

• Corners – This property determines the corner radius of the rectangle. Use the slider to amend this property, or type a numerical value into the property field.

• Effects – Select an option from the dropdown box. The options are none and Drop Shadow. With Drop Shadow selected the following properties appear:

  • Color – this determines the colour of the shadow

  • Opacity – this determines the opacity of the shadow

  • X-Offset – determines the horizontal position of the shadow (positive values move to the right, negative values move to the left)

  • Y-Offset – determines the vertical position of the shadow (positive values move down, negative values move up)

  • Blur – determines the blur of the shadow

• Block mouse events – Checking this option will stop mouse interactions with components positioned on layers beneath the rectangle, e.g. a slider component sitting on a layer beneath the rectangle would not function. A partially covered component may still have some functionality. This option is unchecked by default which means that components positioned beneath the shape will respond to mouse events.

Date Picker

This article describes the date picker component and its properties.

This component provides a convenient graphical interface for a user to select a date:

Select Date Picker from the Controls category of the component library. Move the mouse over the canvas and click to add the component to your project:

Date Picker Properties

The properties are organized into GENERAL, STYLING,  and DYNAMIC VISIBILITY drawers. This guide will describe the general and styling properties only; the dynamic visibility properties are generic and a separate guide and tutorial on dynamic visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set property values article for more information on using the different methods.

GENERAL:

• Date Value – This property is the value in the spreadsheet which is linked to the selected date. It must be bound to a cell in the spreadsheet. The value in the bound cell will change when the selection in the date picker is changed and vice versa.
• Date format – This gives the format that the date picker will use to insert the value into the spreadsheet cell

STYLING:

The STYLING properties are used to control the appearance and behaviour:

• Display type – this controls the way in which the date picker is displayed in the project:
  • Popup – in this mode only an input box will appear in the project and clicking on it will display the full date picker
  • Inline – in this mode the full date picker will be permanently displayed in the project
• Font / Size / Text Color / Opacity – these properties affect the textual display of the date in the input box (similar settings for the selection portion of the date picker are controlled by properties in the “date picker panel” section below)
• Show icon – this checkbox controls whither the calendar icon is shown at the right-hand end of the input box.
• Icon Fill / Opacity – these control the colour and opacity of the calendar icon at the right hand end of the input box (if shown)

DATE PICKER PANEL:

These properties affect the main date selection interface.

• Background / Opacity – control the color and the opacity of the background
• Border  / Opacity – control the color and the opacity of the border
  • Weight / Line style – control the width and style of the border
• Corners – controls the rounding of the corners
• Font / Size / Text Color / Opacity – control the respective aspects of the text
• Selected Highlight / Opacity –  control the color and opacity of the selected date
• Hover Highlight / Opacity –  control the color and opacity of a date which the cursor hovers over
• Today Highlight / Opacity –  control the color and opacity of today’s date
• Effect – controls whether the a drop shadow effect is used

Metric Tile

This article describes the metric tile component and its properties.

The metric tile is used to display the value of a key numerical value along with supporting textual description and an icon showing its trend:

Select Metric Tile from the Data Viz category of the component library. Move the mouse over the canvas and click to add the component to your project:

Metric Tile Properties

The Metric Tile properties are organized into GENERAL, STYLING,  and DYNAMIC VISIBILITY drawers. This guide will describe the general and styling properties only; the dynamic visibility properties are generic and a separate guide and tutorial on dynamic visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set property values article for more information on using the different methods.

GENERAL:

The general property drawer controls the appearance of the value, title, subtitle and trend icon of the  tile.

VALUE

• Value – This property controls the numeric value displayed in the tile. It must be bound to a cell in the spreadsheet
• Number format – This property determines how the value formatted. Note:
  • selecting number, percentage or currency provides the option to set the number of decimal places displayed
  • selecting currency also provides an option to set the currency character and in the case of a custom character whither it should come before or after the number
  • when percentage is selected the component treats the value in the cell as fractional, i.e. 0.1 to represent 10%, 0.5 to represent 50% etc.
• Font / Size / Text Color / Opacity – These properties control the appearance of the value’s text display.

TITLE / SUBTITLE

• Text – this is the text displayed as the title or subtitle. It can be entered directly into the property box or bound to a cell in the spreadsheet
• Font / Size / Text Color / Opacity – These properties control the appearance of the title or subtitle’s text.

TREND ICON

• Trend Indicator Value – This controls which of the three icons in the chosen icon set (see below) are displayed and its value must be bound to a single cell in the spreadsheet. If the value is positive then the first icon is displayed, if the value is zero the second icon is displayed and is the value is negative the third icon is displayed
• Icon set – this dropdown allows the set of icons to be used to display the trend to be chosen

• Positive / Neutral / Negative Color  and Opacity – These properties control the color and opacity of the trend icon in the case where the trend indicator value (see above) is positive, zero (neutral) or negative respectively.

STYLING:

The STYLING properties are used to control the appearance of the background of the tile iteself.

• Fill / Opacity  – the color and opacity of the tile background
• Border / Opacity – the colour and opacity of the outline of the tile
• Weight – the thickness, in pixels, of the outline of the tile.
• Line Style – the style of the outline of the tile (either solid or dashed)g
• Corner – the radius of corners of the tile, the larger the number the more rounded the corners, a value of zero produces square corners

Icon

This article describes how to configure the Icon component and details each of its properties.

The icon component allows you to display one of a set of icons in your project and dynamically colour it.

Select Icon from the media category of the component library. Move the mouse cursor over the canvas and click to add an image to your project.

Icon Properties

The image properties consist of three property drawers, a GENERAL drawer, a STYLING drawer and a DYNAMIC VISIBILITY drawer. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found here.

GENERAL:

• Search icons – enter a search term into this box and press return to see a selection of related images, click on one of the icons to display it in your project

• Block mouse events – Checking this option will stop mouse interactions to components covered by the image component, e.g. a slider component sitting on a layer beneath the icon would not function. A partially covered component may still have some functionality. The option is checked by default.

STYLING:

• Color / Opacity – these set the color and opacity of the lines comprising the icon. The remainder of the icon (i.e. its background) is always transparent

• Stroke – this specifies the width of the lines of the icon, the value can be set either with the slider or by typing a number into the text box, valid values range from 0.5 to 2.0

Image

This article describes how to configure the image component and details each of its properties.

The image component allows you to display graphics within your Squirrel projects. Media types supported include .jpg, .png, .bmp, .gif, etc.

Select image from the media category of the component library. Move the mouse cursor over the canvas and click to add an image to your project.

Image Properties

The image properties consist of two property drawers, a GENERAL drawer and a DYNAMIC VISIBILITY drawer. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found here.

GENERAL:

• Source image from

  • URL  – get the image from a web lin

  • FIle – load a file from your computer

  • Unsplash – search for an image in the Unsplash library

• Image URL – Available only when the URL option is selected in the Source image from property. Type or paste the URL into the property field, or bind to a cell in the spreadsheet that contains the URL of the required image.

• Import image – The Import button is only available when the File option is selected in the Source image from property. Click to open the File Explorer window and locate the image source file.

• Search – the search box is available when the Unslpash option is chosen, type in a search term and hit return to see a selection of related images, click on one of the images to insert it into your project.

• Opacity – This determines the transparency of the image component and can be set in 4 different ways:

  • Using the opacity slider

  • Typing in a value

  • Using the spinner buttons (values are adjusted by 10% per click)

  • Binding to value in a spreadsheet cell

• Resize image to component – Checking this option will constrain the image size to the proportions of the image component.

• Maintain aspect ratio – This option maintains the image’s natural width to height ratio (its aspect ratio) as the component is resized, ensuring the the image is not distorted by the resize. (This option is only available when “Resize image to component” is selected)

• Block mouse events – Checking this option will stop mouse interactions to components covered by the image component, e.g. a slider component sitting on a layer beneath the image component would not function. A partially covered component may still have some functionality. The option is checked by default.

Progress Bar

This article describes the Progress Bar component and its properties. The Progress Bar allows a value to be displayed in a “thermometer” format :

Select Progress Bar from the Dataviz category of the component library. Move the mouse over the canvas and click to add the component to your project:

Progress Bar Properties

The Progress Bar properties are organized into GENERAL, STYLING and DYNAMIC VISIBILITY drawers. This guide will describe the general and styling properties; the dynamic visibility properties are generic and a separate guide and tutorial on dynamic visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set property values article for more information on using the different methods.

GENERAL:

• Orientation – this property sets the progress bar to either display vertically or horizontally.
• Value – this is the value displayed, it must be bound to a single cell in the spreadsheet.
• Number Format / Decimal places – these properties controls the format used to display the value
• Min / Max – these properties set the upper and lower bounds for the progress bar.

STYLING:

The appearance of the Progress Bar can be altered to suit a theme or particular style by using the STYLING properties, these are in two sections:

TRACK

• Thickness – controls the overall width of the progress bar
• Track Colour / Opacity – control the color and opacity of the progress bar’s main track
• Border – these properties control whether a border is visible and if it is, its color, opacity and width
• Progress Bar
  • Color / Opacity – control the color and opacity of the progress bar’s indicator
  • Corner – controls the extent of the rounding at the end of the both the progress bar’s main track and its indicator

VALUE

By default the progress bar displays a numerical value alongside the track, this can be switched off by de-selecting the checkbox at the top right of the “Value” section of the styling drawer.

• Font Size  – controls the font used to display the value
• Text Colour / Opacity – control the colour and the opacity of the value