Interface States

In this tutorial, we will learn how to use interface states, also called UI States.

Introduction

While some data should be stored in tables, like user information, products, etc., other data, like loading indicators, are temporary and should only be kept while the user interacts with the application. These temporary data are called user interface states, or UI States.

Creating a UI State

UI States are defined in the State Definitions parameter of Blocks. To create a new state:

1. Click on State Definitions.
2. Click on + Add Item.
3. Click on the state that was added to edit it.
4. In Key, type the name of the state.
5. In Component, select the type of this state. For example, data2-core-primitives@Boolean for a state that can be true or false.
6. In Initial Value, set the initial value of the state.

To access a UIState, use the component data2-core-types@Getter with Module as UIState and Prop as the Block that contains the state, and State Prop as the name of the state.

To change a UIState, use the component data2-core-types@Setter with Module as UIState, Prop as the Block that contains the state, State Prop as the name of the state, and Value as the new value.

---

Example: Button with Loading State

In this example, we will create a button with a loading state. The button will have a UI State called loading with a value of false and type data2-core-primitives@Boolean. On the button's On Click, we will change the loading state to true, and after 2 seconds, change it back to false.

Step-by-Step

1. Create an Artboard and draw a Block to be the button.
2. Select the Block that was drawn.
3. Click on State Definitions. Add a State Definition and create a state called loading with type data2-core-primitives@Boolean and value false.
4. Return to the beginning of the Inspector by clicking on < Inspector.

5. In On Click, click on f() and select Series.

info

Series is a component that executes a list of actions in sequence. Each action is executed after the previous one is completed.

6. Click on On Click and then on Actions to navigate to the action list.
7. Click on + Add Item. Change its type to Setter by clicking on f() and selecting setter.
8. Click to navigate to the first action. In Module, select UIState.
9. In Prop, click on Pick Component and select the Block that contains the loading state. If you cannot click on the state name, don't worry; after selecting the Block, you can choose the state you want to add from the list in State Prop.
10. In Value, click on f(), select Boolean, and set the value to true (enable the control).
11. Return to the action list.
12. Click on + Add Item to add another action.
13. Change its type to Delay by clicking on f() and selecting Delay.
14. Click to edit the action. In Delay, set it to 2000 (2 seconds).
15. Return to the action list.
16. Add another action.
17. Now we can copy the first action we added. Hover over the action and press Ctrl + C (or CMD + C on Mac) to copy.
18. Hover over the last action and press Ctrl + V (or CMD + V on Mac) to paste.
19. Click on this action and change the Value from true to false.

Now, we will use the loading value to show different text on the button. To do this, we will add Text to the Block and change the text according to the loading value.

1. Return to the root of the Inspector.
2. Change the Text type to If.
3. Click on If to edit. In Compare, click on f() and then click on ui next to getter. This will pre-fill the Getter with the UIState.
4. Click on Compare to edit the Getter, and select the Block that contains the loading state. In State Prop, don't forget to select loading.
5. Now, return to Text and let's finish configuring the If. In Then, set the text for when loading is true, so enter Loading....
6. In Else, enter Click here.

7. Save the Block by clicking the Save button in the Inspector or by deselecting the Block.
8. Click the Preview button on the Artboard to see the result.

Result