Scenario
This article describes the Scenario component and its properties.
Last updated
Was this helpful?
Learn Section
This article describes the Scenario component and its properties.
Last updated
Was this helpful?
Scenario provides a convenient graphical interface for a user to save and load different sets of data from spreadsheet ranges specified by the project designer into a running Squirrel project.
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:
When placed on the canvas the scenario component adds two buttons:
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:
The Scenario properties are organized into SCENARIO SETTINGS, BUTTON GOUP STYLING, and DIALOG STYLING and SCENARIO RANGES drawers.
This property drawer controls the overall function of the Scenario component. Initially, it looks like this:
Scenario ID
This property provides an 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 the 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 designer to choose whether scenarios are saved to the Squirrel cloud or stored locally on the end-user’s machine.
Scenarios that 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 that are saved to the Squirrel Cloud will appear no matter which machine or browser is used to view the project.
Selecting to save scenarios to the Squirrel Cloud reveals several additional options:
Cloud scenario modes – This property controls the scenario actions that 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 several built-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 if “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 that ensures that the Squirrel cloud will only deliver scenario information to a genuine Squirrel project
If Squirrel Cloud is 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).
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 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.
Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.
Each of the buttons can be independently styled by expanding the “SAVE BUTTON” and “LOAD BUTTON” sections to reveal the formatting options:
The DIALOG STYLING properties are used to control the appearance of 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 dialog
Fill – Controls the background color of the dialogs
Border – Controls the border of the dialogs
Accent Color – Controls the coloring of the buttons in the dialog
These properties specify the spreadsheet ranges that 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.
The component properties are set and edited using different methods, some have multiple methods, some just one. See this article for more information on using the different methods.
