# App variables

App variables is a data source available in every app for storing global app state. App variables contains a number of [built-in variables](#undefined) and you can also [add your own](#undefined).

These variables can be bound to properties in UI components and action nodes, and referenced in [conditions](https://docs.appfarm.io/reference/platform-concepts/conditions) and [filters](https://docs.appfarm.io/reference/platform-concepts/filters).

## Custom app variables

Custom app variables are used to store app state for a given instance of the app. For example, you might need to store a boolean value to track if a component is visible or not, or a datetime value for filtering recently created objects in a list.&#x20;

App variables are *runtime* variables, which means that they exist only in the user's browser and are not saved to the database or shared with other users. An app variable will be cleared each time an app is refreshed, unless the **Persistence** property is populated.

<details>

<summary>Example: Store the state of a switch to apply a filter </summary>

You have a [List component](https://docs.appfarm.io/library/ui-components/list) bound to a *Tasks* data source. You would like to only display uncompleted tasks by default, but you would like to add a Switch component to allow a user to also see completed tasks.

To solve this, you can add a custom app variable called `Show completed tasks` with data type `Boolean` and bind this variable to the Switch's **Value** property. Then you can add a **Conditional Filter** to the List with the **Enabled** property set to the conditional expression `App Variables.Show completed tasks NOT EQUALS true` and the **Filter** property with the filter expression `Tasks.Done NOT EQUALS true`.

In this case the conditional filter will apply when the app is loaded, and show only uncompleted tasks, since `Show completed tasks` will not have value. When a user toggles the switch, the conditional filter will be disabled and all tasks will display.

</details>

### Properties

<table><thead><tr><th width="211">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Name</strong></td><td>The name used throughout Appfarm Create to refer to this app variable. This name can be changed at any time without technical consequences.</td></tr><tr><td><strong>Node Name</strong></td><td>The key that is used to store the property in memory.</td></tr><tr><td><strong>Data Type</strong></td><td>The type of data allowed to be stored in this property. See <a href="../../../data-model/object-class-properties#data-types">data types</a>.</td></tr><tr><td><strong>Cardinality</strong></td><td>If the Data Type is set to a reference to an Object Class or an Enumerated Type (see <a href="#data-types">data types</a>), you have the option to define <em>Cardinality</em>. The default is <strong>One</strong>, but you may also select <strong>Many</strong> (storing an array of references instead of a single reference). Read more on the Cardinality setting in the Object Class Properties section <a href="../../data-model/object-class-properties">here</a>.</td></tr><tr><td><strong>Property Type</strong></td><td><p>An app variable can be either be value or a function.</p><ul><li><code>Value</code>: A primitive value that can be read and updated.</li><li><code>Function</code>: A <a href="../../platform-concepts/functions">function</a> that calculates a value at runtime. For example, a function that generates a random number between 1 and 100.</li></ul></td></tr><tr><td><strong>Value on Create</strong></td><td><em>Available for Value property type.</em><br>A default value to set for the property when the app is loaded.</td></tr><tr><td><strong>Function</strong></td><td><em>Available for Function property type.</em><br>A <a href="../../platform-concepts/functions">function</a> that calculates and returns a value at runtime.</td></tr><tr><td><strong>Label True</strong></td><td><em>Available for Boolean data type.</em><br>A text label to display when the value is true. See <a href="../../../data-model/object-classes#boolean-labels">boolean labels</a>.</td></tr><tr><td><strong>Label False</strong></td><td><em>Available for Boolean data type.</em><br>A text label to display when the value is false.</td></tr><tr><td><strong>Label Undefined</strong></td><td><em>Available for Boolean data type.</em><br>A text label to display when the value is undefined (empty) or null.</td></tr><tr><td><strong>Persistence</strong></td><td><p>Specify if the value should be stored in the user's browser. There are three options:</p><ul><li><code>None</code>: The value will not be stored and will only exist in the current instance of the app. This is the default behavior.</li><li><code>Local Storage</code>: The value will be stored in the browser's local storage. It will remain there until the user logs out of the app or the login expires. When the value is stored, it will be available for use the next time the app is loaded. If the user has the app open in multiple tabs, the value will be available to all tabs.</li><li><code>Session Storage</code>: The value will be stored in the browser's session storage. It will remain there until the user closes the tab, the user logs out of the app, or the login expires. When the value is stored, it will be available for use the next time the app is loaded.</li></ul><p>For more information about local and session storage see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">MDN Web Storage API documentation</a>.</p></td></tr><tr><td><strong>Description</strong></td><td>A longer description of the app variable. For your own reference.</td></tr></tbody></table>

## Built-in app variables

The built-in app variables contain standard information about an app while it's in use, such as the active environment or client screen size. Some of these variables are based on [built-in enums](https://docs.appfarm.io/data-model/enumerated-types#built-in-enums) which can be incorporated into your object classes.

<table><thead><tr><th width="213">Property</th><th width="115">Data type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Active Currency</strong></td><td>Enum</td><td>The currency of the <strong>Active Language</strong> added under <a href="../../resources/internationalization">Internationalization</a>. For example, <code>Euro</code> or <code>United States Dollar.</code></td></tr><tr><td><p></p><p></p><p><strong>Active Environment</strong></p></td><td>Enum</td><td>The environment the end-user is using, either <code>Develop</code>, <code>Test</code>, <code>Staging</code>, or <code>Production</code>.<br><br>This variable can be useful to alter functionality based on if the active environment uses production data (Staging and Production) or not.</td></tr><tr><td><strong>Active Language</strong></td><td>Enum</td><td>The language the app has applied, based on those added to the solution under <a href="../../resources/internationalization">Internationalization</a>. For example, <code>English</code> or <code>Norwegian</code>.</td></tr><tr><td><strong>Active Theme</strong></td><td>Enum</td><td>The theme the app has applied, based on those added to the solution under <a href="../../resources/themes">Themes</a>.</td></tr><tr><td><strong>App Time Zone</strong></td><td>Enum</td><td>The time zone the app is operating in. By default the device time zone is used, but it can be overridden. Calendar data sources are based on this value.<br><br><strong>Example</strong>: Your App has functionality for registering new Events in Norway, with Start and End time. You want to make sure that the start and end time is "Norway time" when your end users are working remote from Asia.<br>The solution is to set App Time Zone fixed for your App (or based on the Event's location). It may be done with a simple Update Object in the On App Load action (setting App Time Zone to <code>Europe/Oslo</code>)</td></tr><tr><td><strong>Client IP</strong></td><td>String</td><td>The end-user's IP address.</td></tr><tr><td><strong>Client Screen Size</strong></td><td>Enum</td><td>The screen size of the end-user's device, either <code>Large</code>, <code>Medium</code>, <code>Small</code>, or <code>Extra Small</code>.<br><br>This variable can be useful to show/hide UI components based on the available screen real estate. </td></tr><tr><td><strong>Device Orientation</strong></td><td>Enum</td><td>The current orientation of the end-user's device, either <code>Portrait</code> or <code>Landscape</code>.</td></tr><tr><td><strong>Device OS</strong></td><td>Enum</td><td>The end-user's device operating system.</td></tr><tr><td><strong>Device OS Version</strong></td><td>String</td><td>The end-user's device operating system version.</td></tr><tr><td><strong>Document Title</strong></td><td>String</td><td><p>The HTML &#x3C;title> tag. By default, it is the name of the app as specified in <a href="../../app-settings#general-settings">App Settings</a>. Shown in the browser's title bar or in the page's tab. </p><p></p><p>This variable can be useful to change the page title dynamically. E.g. you may update this property using an Action with an Update Object action node.</p></td></tr><tr><td><strong>Hostname</strong></td><td>String</td><td>The solution hostname for the environment the end-user is using. Given a solution with the short name <code>showroom</code> and all environments available, the following hostnames could be returned:<br>- <code>showroom-dev.appfarm.app</code><br>- <code>showroom-test.appfarm.app</code><br>- <code>showroom-stage.appfarm.app</code><br>- <code>showroom.appfarm.app</code><br><br>This variable can be useful to generate the URL for your app based on the active environment, for example when using the <a href="../../../library/action-nodes/send-email">Send email action node</a>.</td></tr><tr><td><strong>Is Fullscreen</strong></td><td>Boolean</td><td>If an app has been installed as a Progressive Web App and is running in fullscreen. </td></tr><tr><td><strong>Is Main Drawer Open</strong></td><td>Boolean</td><td>If the Main Drawer property is set in <a href="../../app-settings#app-drawer">App Settings </a>and the drawer is open.</td></tr><tr><td><strong>Is Online</strong></td><td>Boolean</td><td>If the app is currently connected to the server.</td></tr><tr><td><strong>Is Unauthenticated</strong></td><td>Boolean</td><td>If the user is not logged in and using unauthenticated access.</td></tr><tr><td><strong>Notification Permission</strong></td><td>Enum</td><td>Holds information on whether the user has granted or denied permissions for notifications from this app on this device. The default is <code>Prompt</code>, i.e. the user has not granted or denied permissions. The other possible values are <code>Denied</code> or <code>Granted</code>. The value is changed when the action node Request Permissions is executed, and the value is reset when permissions for the app are reset in the mobile app settings or browser settings.</td></tr><tr><td><strong>Readable ID</strong></td><td>String</td><td>The readable ID of the app as specified in <a href="../../app-settings#general-settings">App Settings</a>.</td></tr></tbody></table>
