# Change Value from Event

### The Goal

Prepare a *Basic Application* showing the exact number with the *Subtraction Button*.

![Basic Substracting Application](/files/U9WW2awap4q3QnQjKoRM)

### The Description

In most cases, applications like a calculator are effectively composed by the *Grid*. The *Text component* reflects the *State Variable*, which has been subtracted by one by triggering an *Event* of *Button*.

### The Knowledge You Will Get

1. How to work with *Values* from the *Events*.

### The Project Structure

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

* [ ] MainView
  * [ ] Grid\[`grid1`]
    * [ ] Text\[`text1`]
    * [ ] Button\[`button1`]
      {% endtab %}
      {% endtabs %}

### 1. Prepare a Grid Layout

First, let's prepare a *Basic Grid Layout* structure, including *Text* and *Button* components.

1. Place in a **Grid** *Layout component*, keep *ID* -> `grid1`; *Columns* -> `12`, and set up its *Item Flex* -> `Stretch`; *Spacing* -> `None`
2. Into `grid1` put a new **Text**, keep its *ID* -> `text1`; *Text Alignment* -> `Center`; *Text Style* -> `Bold`; *Font Size* -> `Large`; *Vertical Alignment* -> `Center`
   1. *Layout* -> *Item Position* -> *X* -> `1`; *Y* -> `3`; *Width* -> `8`; *Height* -> `6`
3. Place into the `grid1` a new **Button**, keep *ID* -> `button1`, and set up its *Icon Name* -> "`mdi/minus`"; *Icon Size* -> `Large`
   1. *Layout* -> *Item Position* -> *X* -> `10`; *Y* -> `3`; *Width* -> `1`; *Height* -> `6`

{% tabs %}
{% tab title="Current Canvas\[MainView]" %}
![](/files/hfJYwnvbHVKksOhIOeMU)
{% endtab %}
{% endtabs %}

### 2. Create and Bind a New State Variable

A *State Variable* will contain numeric information bonded with the *Text* output.

1. **Add State Variable** by clicking on the *Plus icon* in the Outline Panel.
2. Name it `myCounter`, switch its *Type* to *Number*, and set up *Initial Value* -> `10`.
3. Switch *Value* of `text1` to *ƒx Function* and set -> `myCounter.value`

{% tabs %}
{% tab title="text1\[Value]" %}
![](/files/a5MkXBJ8SSeTqXiaDVyK)
{% endtab %}
{% endtabs %}

### 3. Bind an Event Logic to the `button1`

The last step we have to do is bind an *Event*, subtracting the *Value* of `myCounter` by one.

1. Select the *Event* option in the `button1` and **Add Event Logic** *Plus* icon -> `Call Method`
2. Set up already wired up *Call Method* as follows:
   1. *Method* -> `myCounter.setValue`
   2. Switch *Argument #1* to *ƒx Function* -> `myCounter.value - 1`

{% hint style="info" %}
*setValue* is an available *Method* in *State Variable*, visible in the *Data Explorer*.
{% endhint %}

{% hint style="info" %}
The *Argument* has to be set up as a *ƒx* *Function* because of the reading of the *current Value*.
{% endhint %}

{% tabs %}
{% tab title="Flowchart button1\[Call Method]" %}
![](/files/YpuoWmxlRDhb9ILKwYFr)
{% endtab %}

{% tab title="Call Method\[Settings]" %}
![](/files/tp0XZaTV0OjPuL7Yjb97)
{% endtab %}
{% endtabs %}

### The Conclusion

Any available *Methods* can be seen in the *Data Explorer* and have to set up *Arguments*.

{% hint style="info" %}
Follow up on our *Change Value from Event* tutorial <https://youtu.be/Kee6oXJdzaY>
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/data-and-dynamic-values/change-value-from-event.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.