In the App Variables menu, you can save API tokens from being used for any REST Services & Endpoints that you add to your project. The value for any App Variable is a string.
Each time your App restarts, the App Variable will reset to the default value. Therefore, if you need to change the default value of an App Variable, you must update the value in the builder and re-publish your App.
Saving API authorization in this menu, instead of entering it directly inside of a Fetch component, makes your app more secure by preventing your API token(s) from being exposed in each screen's code.
Each App Variable you create will have:
|Key||The name of the variable to be referenced.|
|Value||The actual value of the variable (e.g., authorization header).|
What type of value you can store in an App Variable?
All JSON primitive value types can be stored inside an App Variable. Learn more here.
To update the value of an app Variable, you will use the Action Set Variable from the Properties Panel > Interactions tab (fourth tab).
For example, in the app below, we have already defined an App Variable:
There is a Text component that displays the current value from the App Variable on an example app screen. It uses the key of the App Variable you defined in the previous step to map and display the value.
In scenarios where you want to display the value of a App Variable, you can use its key and map it to the Input Text variable.
To update the value, on the Button below the Text component, add a new action called Set Variable. This action will update the value of the App Variable to the value of the New Variable property.
In the current example, we're setting the value of the New Variable property to the App Variable key and then using the Increment transform function that will increase the current value App Variable.
Here is the final output:
Updated almost 2 years ago