App state

App state is a generic store of values that can be used to easily pass values around and persist them between navigation and page reloading.

Unlike other Binding values, App state values can be set and used anywhere in your application. Nesting is not required. To set an app state value you can use an action called Update state in the actions drawer. There are two types; Setting and Deleting. Set a key to be the unique identifier, this is whats used when referencing the state value elsewhere in your app. You can select an already existing one or create one by typing in a name. After this, you can enter any value into the value input field. In addition to static values, you can also use Binding values here.

App state tutorial

The below example shows a simple way which app state can be used within a Budibase app. The overview of the example includes the following, creating a select input which will save the field value to state. From here this state value will then be used to show and hide components based on the selected value.

Add a Form component
Add a Options picker component, then change the Options source from schema to custom.
Click the Define Options button and add your options for this demo the options used are: Tables, Blocks and Images.
After this click the On change button, search for the Update state action. Add this and then configure your state settings to something similar to the below.
After this build out your page however you want, add additional options to your select input if you choose to.
Setup conditionals for the various components throughout using the Configure conditions button within the conditions tab.

Short Demo

App state in blocks

For more context on app state there are components which already have this feature within. A good example would be the Table Block component. You can quickly see app state in action by adding this component, then clicking on the radio button Show details side panel and then ejecting the block. From here go to the Table component and click ON ROW CLICK button action and you can see some pre-generated actions based around state.

What this is doing is getting the clicked rows _id and adding it to a Form Block which is automatically set to update. This newly created state key is then added into the Details form block Row ID field which is what is use to save any updates made back to that specific row.

Showing state being passed into the Row ID

App state examples

There are a range of different ways app state can be used within Budibase. A few examples can be seen below.

Multiple step forms, you can use App state to save the _id of the row which you are currently creating. App state can then be used to both save your place in the form and to save information at different stages back to your database as you process through your multiple step form.
Form Block As talked in the App state demo you can use app state to pass specific rows _id into forms. Whether this be a form within a Side Panel component or a form on a different page, app state can be used in both cases.

App state Github discussions

Bindings & app state logging active persisted app states.
Collapsible panel + conditional UI Slightly more complicated use of state with conditional UI.
Table Filter with a button Trigging search with a button click instead of on change using state.

Persisting values

If you wish for the values that the user has selected to persist you can select the Persist this value checkbox beneath the key/value fields. Doing so will save the value in the users browser using the localStorage API. (A gif below has been attached to showcase the difference between persisted state and regular state.)

Deleting values

Deleting a value will delete it permanently and will also override values that are persisted. (Below is an example of deleting state.)

Deleting state example

Referencing state values

Once you have created a value you are free to bind to it across your application. All values live under the State top-level Binding value and are visible in the bindings drawer.

For example, To get the value in the 1st image you would enter {{ State.isPersonal }}. The pre generated example image using the Table Block component you'd have to enter {{ state.ID_bI8jAVBgC }}.