# 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.
#### 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`.
#### 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.
{% hint style="info" %}
Hint: the transformer uses JavaScript. \
For more information, refer to the related page: [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention").
{% 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;
}
```
#### 5. Click Preview to see the result
