> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/popular-use-cases/update-app-data-using-accessors.md).

# Update app data using accessors

### Example to use accessors

In the following example,  app data and accessors will be used to display and update data.

#### 1. Define app data

First, in the app data level, add a new data field named `test_number`, whose Data type is number, Storage type is "In Memory" and Default Data Value is 1.

![](/files/32Yj2fI5AQIOf0Rc4fQ2)

#### 2. Place a text element and [#access-data-in-the-configuration-panel](#access-data-in-the-configuration-panel "mention")

Drag a text element to the canvas and enter `${#app.test_number}` in text field. In the app view, the text will display the value of `test_number`.

<figure><img src="/files/HekjxPBs6NyNgAd7nCLH" alt=""><figcaption></figcaption></figure>

#### 3. Place a button and add interaction

Drag a button onto the page below the text. Then, open the interaction panel to add an action: App -> Set app data after the event 'click button.' Next, click on the f(x) icon to edit the transformer.&#x20;

{% hint style="info" %}
Hint: the transformer uses JavaScript. \
For more information, refer to the related page: [Interactions](/app-builder/app-construction/interactions.md).
{% endhint %}

#### 4. Use transformer to update data and  [#access-data-in-the-transformer](#access-data-in-the-transformer "mention")

Using accessor, edit transformer code, remember to click the update button to save the change. Code for reference:

```
function transformer(payload, context) {
  const test_number = context.getData("#app.test_number");
	const updated_test_number = (test_number + 1) % 3;
  const parameters = {"field":"test_number","value":updated_test_number};
  return parameters;
}
```

<figure><img src="/files/Ogv3LMQTJeZCPYluskp3" alt=""><figcaption></figcaption></figure>

#### 5. Click Preview to see the result

<figure><img src="/files/g4bj5Q5CEbZbZf6O3jy4" alt=""><figcaption></figcaption></figure>