Using App and Page Variables

Objectives

After completing this lesson, you will be able to:

  • Differentiate between app and page variables.
  • Create an app and page variables.

Uses for App and Page Variables

When a user runs an app and interacts with it, it generates data that perhaps does not need to be stored or changed in a back-end service but needs to be available while the user is running the app.

Here are some examples of data a user likely would want throughout the app:

  • Current user’s E-mail address.
  • Current user’s settings, such as whether to have background music.
  • Status, for example, the level they are at in the game.
  • Current location.

Here are examples of data a user might want only for a particular page:

  • Search terms for a search.
  • Current page when paging through data records.
  • Current time for a page with a stopwatch.
  • Indicator of whether a field is disabled.

Page Variables

If you define a page variable on one page, that variable will NOT be available on a second page, neither in the Variables area nor available to bind to UI components.

Page Variable on Page 1

That variable will NOT be available on a second page, neither in the Variables area nor available to bind to UI components:

Page Variable on Page 2

Though you could keep all your variables as app variables, it is easier to maintain your app if you define variables only where they are needed.

Once you define a variable, you can bind it to a component property.

For example, here we have a search UI, and the input box is bound to the page variable MyPageVariable. Once the user enters a search term and chooses Search, you can define some logic to take the value in the variable and perform a search.

Page Variable Creation

Play the video to learn how to create a page and app variable.

App Variable Creation

Business Scenario: Consider an app that lets you request a vacation leave, and now you have to provide a short text explaining why you need a vacation.

  1. To create an App variable, go to the VARIABLES area of your page.
  2. On the left side, you can see all the types of variables you can create. Select APP VARIABLES.
  3. Choose ADD APP VARIABLE. You will get a new variable with a default name set to type text.
  4. You can change the default name as needed.

Note

The example values will be used in the UI while you are designing it so that you will see example data.

Note

Note that when creating variable names, certain elements such as spaces or punctuation are not allowed. It must only contain letters or numbers.

You have now created an App variable.

Scope of Variables

Scope of Variables

Page variables exist in the context of a single page. If you go to another page to design it, you will not see the page variables from other pages. In addition, the value is reset whenever you navigate to a page and use the Navigate Back flow function to navigate back to the original page, since the entire page is removed.

App variables are available in formulas using thepageVars namespace.

The pageVars Namespace

App variables exist in the global context of the app. App variables reset only when the app opens for the first time or is closed and reopened.

App variables are available in formulas using the appVars namespace.

The appVars Namespace

Create App and Page Variables for the Team App

Business Scenario

For the use of later functions, the page and app variables will be created and adjusted in this simulation.

Exercise Options

To start the exercise, choose Start Exercise in the figure below.

A pop-up opens. You have the following options:

  • Start: the simulation starts. Follow the simulation to learn how to create the app and page variables.
  • Open PDF Document: a pdf opens. Based on the steps described in this document, you can perform the exercises in your own system landscape.

Log in to track your progress & complete quizzes