Store values in variables

Variables that you define in the Variables editor are accessible throughout an entire Slate application. You can reference them in queries and widgets, and even set their values through events or URLs.

The valid types for variables are Number, String, Boolean, Array, Object, and Null.

Creating a variable

To create a variable, follow the instructions below:

1. Select Variables to open the Variables editor.
2. Select Add new variable.
3. Select the variable page scope - shared (accessible on every page), or local (accessible only on the page edited when creating the variable).
4. Select the text in the Name column and enter a new name for the variable.

5. Enter a default value for the variable. Slate will infer the variable type based on value entered.

The variable editor not only displays the page scope, name, and default value of every variable, but also provides a read-only view of the variable's current value, in case it was changed using events or right from the URL.

Updating a variable through events

Events can be used to set a new value of a variable. Every variable automatically provides a .set event. To update the value of a variable, simply return a new, legal value in the event content. The event logic can also use the current value of the variable as an input. You can also change the type of the variable value when updating it (e.g. from a String to a Number); however, this might break the variable's dependencies.

In the example below, the v_page_number variable is updated every time the user clicks the w_button_next_page button:

Variables in URLs

You can use variables in URL query parameters (additional information added to a URL to help set the state of the Slate page). URL parameters always override default parameters.

In general, use the following syntax to add variables to the URL:

• Single variable: ?variableName=value
• Multiple variables: ?variableName=value&otherVariableName=otherValue

Note that query parameters are case sensitive. Additionally, variable values retrieved from URL query parameters will be strings even if the passed value is a number, boolean, or object. These values can be converted to the desired type using Handlebar helpers, or through Functions.

Example: Using variables in a widget

The following example uses variables in a dropdown widget and assumes a notional dataset about asteroids.

1. Create a new application called Dropdown variables example.
2. Create a new query called asteroidNames, set the data source to asteroids, and enter the following query statement:

Copied!
1
SELECT name FROM allnamed;

3. Select Update to save the query.

4. Open the Variables editor and add a new variable. Name it astro and give it the default variable " " (an empty string).

5. Add a Dropdown widget to your application.

6. Populate the dropdown by pulling the name of the asteroid from the query you just wrote:

   

7. Change to the Raw tab by selecting the button </> and update the value of selectedValue from null to "{{astro}}". Notice that the dropdown menu initially does not present a value due to the fact that selectedValue is assigned to the astro variable, which is an empty string at the moment.

   

8. Save the application.

9. To specify a selectedValue for the dropdown to start with, we can set a value for the variable astro in the URL. Append ?astro=Flora to the URL and use the Enter key. Note that the asteroid name is case-sensitive. The URL now looks like https://<HOSTNAME>:<PORT>/edit/documents/dropdown-global-variables?astro=Flora and the dropdown now displays “Flora” initially.

Slate system variables

Slate offers two types of system variables:

1. The environment variable.
2. The user storage variable.

Environment variable

The $global variable gives access to environment specific information.

Example: Using the environment variable in a function

The following example uses different attributes of the $global variable to greet the user in the appropriate language:

// 'de' represents the German locale
// English is the default language
if ({{$global.locale}} == 'de') {
    return "Willkommen " + {{$global.user.firstName}}
} else {
    return "Welcome " + {{$global.user.firstName}}
}

The User storage variable

The sl_user_storage variable in Slate maintains its value for each user across application loads, unlike other variables that reset to default upon page loading.

The user storage variable allows application builders to store information in the application context for individual users, such as user preferences on a specific application.

Using events, values can be stored in the user storage which can be accessed across sessions in the application. The user storage is limited to 10 kB and can be set via the slate.setUserStorage action. slate.refreshUserStorage can be called when users are working on an application across multiple browser tabs or windows. When setting the storage to a new value in one tab or window, this value can be pulled into the other window by calling the refresh action.

Example: Updating user preferences in the user storage variable

In the example below, user-preferred destinations are written into a userPreferences JSON object. The user preferences are then loaded during application load to present users with their personal preferred destinations on the application landing page.