# Custom Variable

### The Goal

Add and set up *Custom Variable* and check its setting in the *Data Explorer*.

![Custom Variable](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FRXoNyp2sR37JCExNzztu%2Fimage.png?alt=media\&token=46e1cc75-756f-4729-9101-c9e995491f4e)

### The Description

The *State Variable* is part of a current *View* where its setting is immediately reflected in the *Data Explorer* and its plays important role in storing temporary data within a current *View*.

{% hint style="info" %}
Keep in mind that *State Variables* are not addressable between another *Views*.
{% endhint %}

### The Knowledge You Will Get

1. *Addressing* and *Editing* of a *State Variable*.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] State Variable\[`myVariable`]
  {% endtab %}
  {% endtabs %}

### 1. Create a State Variable

1. Clicking on the *Add Datasource icon* select **Add State Variable**.
2. Name its *ID* -> `myVariable` and switch its *Type* to *Number*; *Initial Value* -> `6`

{% hint style="info" %}
You can watch the `myVariable` *attributes* and *functions* in the *tab* from this moment.
{% endhint %}

{% tabs %}
{% tab title="Outline\[myVariable]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FGgH4ZCHwrBFOibKjZETz%2Fimage.png?alt=media\&token=1980a6ee-117d-4605-961e-144392798fd0)
{% endtab %}

{% tab title="Data Explorer\[myVariable]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FxaqshkBDhw30RDbwXqbS%2Fimage.png?alt=media\&token=b29c4ee2-e119-4b38-b3ce-d9df33a3003f)
{% endtab %}
{% endtabs %}

### 2. Associating `myVariable` Value

1. Consider that we are not going to play with *Layout*; simply place in the *Canvas work field* a new **Text** component and set up its *Value* as follows:
2. *Value* -> `myVariable.value`

{% hint style="info" %}
The Current Value of the myVariable can be dynamically mapped by a (ƒx) *function*.
{% endhint %}

{% tabs %}
{% tab title="Canvas\[MainView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FZV9eoqqC2Xajz2jZwUL9%2Fimage.png?alt=media\&token=92637ac4-45af-45d4-b9fb-43f3edb26132)
{% endtab %}

{% tab title="text1\[Value fx]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FxYOno3KPn6GURfkSwmJz%2Fimage.png?alt=media\&token=2e135828-357f-4159-8e6c-c05193cab162)
{% endtab %}
{% endtabs %}

### The Conclusion

Using the *State Variable* can be effectively used in many cases. Try to change *State Variable Types* to *Array* or *Map*, and define their *Values* as a constant or function.

{% hint style="info" %}
Follow up on our *Custom Variable* tutorial <https://youtu.be/ul_NTuZODWc>
{% endhint %}