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

Set up dynamic routing

Create a Chart with Code Block and D3 Library

Last modified 20d ago

Update app data using accessors

Example to use accessors

1. Define app data

2. Place a text element and access-data-in-the-configuration-panel​

3. Place a button and add interaction

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

5. Click Preview to see the result

2. Place a text element and access-data-in-the-configuration-panel

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