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

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: the transformer uses JavaScript. For more information, refer to the related page: Interactions.

4. Use transformer to update data and #access-data-in-the-transformer

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