Accessors

Accessors allow you to retrieve and use data from a data node or from a data store variable. The data can be used to set properties and styles, and can even be used in an event payload. For more information on accessors specific to event payloads, see Event payload.
Data structure overview
There are 3 levels of access: element level, page level, and app level. These levels define the scope of the data, or in other words, which pages or elements will have access to it.
In the below table, you'll find 4 data categories as well as their corresponding accessor. 
Categories include element, page, and app data -- which fall under the Data Store source -- and Data Nodes.
Element level: element data
Element data stores variables associated with a specific element. Only the element itself can access the data.
As seen below, element B cannot access element data for element A, and vice versa.
Element data example
Suppose we have a container that we would like to hide, and only show when a user triggers it to display by clicking on a "show more" button.
Here's how we can use element data to initially hide the container, and then unhide it when a user clicks a button.
1.Select the container. In the Data tab of the left panel, add a new element level data field. Name the variable display, set its type as string, and initialize the value to none.
​
2.Open the Style tab in the right panel, and find Layout -> Display. Use the element data accessor, ${display}, to set the display. By default, this will be none.
​
3.To show the container, add an interaction to change the display value. In this example, an interaction has been added to a button. In the action panel, select the container, and choose Set Data as the action. Then define the field (name of the variable) and value. This will change the display from none to inline, and show the now-inline container.

Element data exceptions
In general elements will not be able to access other elements' element data. However, there is an exception to this when it comes to inheritance. Some elements, such as lists or tables, allow other elements to access their element data via accessors.
Lists
Elements inside of a list will be able to use accessors to retrieve the list's data. For more details on list accessors, see List.
Tables
Similarly, elements within a table will be able to access the table's column key and row data.
Page level: page data
All the elements on a given page can access its page data. In the diagram below, you'll see that elements A and B on page 1 are not able to access page data for page 2.
App level: app data and data nodes
All elements across all pages can access data stored in app data and data nodes.
Practical example: Interactive Highlight color
Here is a example to use the techniques above to highlight number of interest.
1.Create data node
  
​
2.Create a list element and drag a text element inside, set text to ${$item.n}
3.Create a page variable called number in Data Store
4.Create a input element to set page variable(See details in Data Store)
1.Set Config -> Property -> Input type to 'number'
2.Add interactions, attention: Set Action Parameters as the figure below, enter number (Page variable name) in Field and ${event.value} in Value.
​
5.Set text element styles parameters
1.set width and height to 64px
2.set background color to ${$item.n==#page.number&&'red'||'green'}
6.Click 'Preview' to see the final result. Enter any number between 1 to 10 in the input to activate highlight number.

​

Last modified 1mo ago