LogoLogo
ProductsPricingGlossary Launch Acho
  • 🎉Welcome
  • Introduction
  • What is Acho?
  • How does Acho work?
    • Proof of Concept (PoC)
  • App Builder
    • Get Started
    • Core Concepts
    • Overview
    • App construction
      • App Configuration
      • Pages
      • Interactions
        • Add an interaction
        • Add conditions to interactions
        • Event payload
        • Ordering interactions with action flow
        • Transformer
        • Actions
          • Navigation
          • Element
          • Data Source
          • App
          • Page
          • API Service
          • Database
          • Media Service
      • Table
      • Metric
      • Query
      • Data Store
      • Elements
        • Table & Chart
          • Searchable Table
          • Table
          • Chart
          • Score Card
        • Form Elements
          • Form
          • Search Bar
          • Checkbox
          • Date Picker
          • Custom Form
          • Input
          • Multiselect
          • Radio Button
          • Radio List
          • Rich Text Editor
          • Select
          • Switch
          • Textarea
          • Upload
        • Web Elements
          • Badge
          • Button
          • Clickable
          • Collapse Menu
          • Divider
          • Icon
          • Image
          • Link
          • Message
          • Modal
          • Notification
          • Pagination
          • Popover
          • Rate
          • Rich Text
          • Tabs
          • Text
        • Layout Elements
          • Container
          • List
        • Advanced elements
          • Code Block
          • Condition
          • Print
        • CSS Styles
          • General techniques
          • Layout
          • Spacing
          • Size
          • Position
          • Typography
          • Background
          • Border
          • Effect
        • Form Check
        • Tooltip
      • Accessors
      • Plugin Store
    • Popular Use Cases
      • Build a chart from Table Nodes
      • Create a table
      • Create a list
      • Create a filter
      • Create a search bar
      • Use Custom Form Container to collect user inputs
      • Drill down on a table
      • Download file from query node
      • Set loading animations
      • Modify a database
      • Navigate to a different page
      • Set up dynamic routing
      • Update app data using accessors
      • Create a Chart with Code Block and D3 Library
      • Rich text and rich text editor
      • Send an Email via Mailjet Plugin
    • Preview
    • Publish
      • Embed published app on website
    • Version Control
    • App User Management
      • Onboarding Page
      • Sign in page
      • Guest Isolation and Private Session
    • Theme
    • FAQ
  • Acho Studio
    • Quick Start
    • Resources
      • Add a resource
      • Supported data sources
        • Airtable
        • Amazon Ads
        • Amplitude
        • Amazon Seller Partner
        • Apify Dataset
        • Appstore
        • Asana
        • API Connector
        • API Template
        • AWS CloudTrail
        • Azure Table Storage
        • Batch Files
        • Bamboo HR
        • BigCommerce
        • BigQuery
        • Bing Ads
        • Braintree
        • Cart.com
        • Chargebee
        • Chargify
        • Chartmogul
        • Clickhouse
        • Close.com
        • CockroachDB
        • Confluence
        • Customer.io
        • Delighted
        • Dixa
        • Drift
        • Facebook Marketing
        • Freshdesk
        • Freshsales
        • Freshservice
        • GitHub
        • GitLab
        • Google Ads
        • Google Analytics
        • Google Sheets
        • Google Search Console
        • Greenhouse
        • Harness
        • Harvest
        • HubSpot
        • IBM Db2
        • Instagram
        • Intercom
        • Iterable
        • Jenkins
        • Jira
        • Kafka
        • Klaviyo
        • Kustomer
        • Lemlist
        • Lever Hiring
        • LinkedIn Ads
        • Linnworks
        • Mailchimp
        • Marketo
        • Microsoft Teams
        • Mixpanel
        • Monday
        • MongoDB
        • MySQL
        • My Hours
        • NetSuite
        • Notion
        • Okta
        • OneDrive
        • OneSignal
        • Oracle DB
        • Outreach
        • PagerDuty
        • Paypal Transaction
        • Paystack
        • Pipedrive
        • PersistIq
        • Pinterest
        • Plaid
        • PostgreSQL
        • PostHog
        • PrestaShop
        • Qualaroo
        • QuickBooks
        • Recharge
        • Recurly
        • Remote File
        • S3
        • Salesforce
        • Salesloft
        • SearchMetrics
        • Sendgrid
        • Sentry
        • Short.io
        • Shopify
        • Single File
        • Slack
        • Smartsheets
        • Snapchat Marketing
        • Snowflake
        • SQL Server
        • Square
        • Stripe
        • SurveyMonkey
        • Tempo
        • TikTok Marketing
        • Trello
        • Twilio
        • Typeform
        • VictorOps
        • WooCommerce
        • YouTube Analytics
        • Zendesk Chat
        • Zendesk Sunshine
        • Zendesk Talk
        • Zendesk Support
        • Zenloop
        • Zoho CRM
        • Zoom
        • Zuora
    • Data Prep (Projects)
      • Create a Data Prep Project
        • Create a table tab
        • Copy a table tab
        • Hide a table tab
      • Apply an action
        • View
          • Hide Columns
          • Filter
          • Sort
          • Cut
          • Rename
          • Move Column
        • Combine Tables
          • Join
          • Union
        • Transformation
          • Pivot Table
          • Unpivot
        • Data Cleaning
          • Cleanse
          • Replace
          • Change Type
          • Deduplicate
          • Split
          • Flatten
        • Tools
          • Formula
          • SQL Editor
            • SQL Editor Queries
            • All functions in Formula/SQL
              • Mathematical Functions
              • String Functions
              • Date Functions
              • Datetime Functions
              • Time Functions
              • Timestamp Functions
              • Conditional Functions
              • Type Conversion
              • Other Functions
        • Reserved Keywords
      • Pipeline
      • Edit your pipelines
      • Generate column summary for inspection
      • Use URL to access and share your project
      • Write a description for your project
      • Delete a resources/project/tab
    • Data Flow
      • Export data
        • Download CSV files
        • Excel Connector
        • Google Sheets Connector
        • Embed a table on your website
          • Data Usage Agreement
        • Apache Superset
        • Chartio
        • Looker
        • Metabase
        • Power BI
        • Qlik
        • Tableau
        • MongoDB
        • MySQL
        • MSSQL
        • Snowflake
        • PostgreSQL
        • BigQuery
    • Set up Data Sync
    • FAQ
  • Organization
    • Get started
    • Create an organization
    • Invite people to your organization
    • Share your resources
    • Share your projects
    • Share your apps
    • Change payment method on file
  • FAQ
    • I can't find data after uploading a big CSV file
Powered by GitBook
On this page
  • Data structure overview
  • App level: app data and query results
  • Page level: page data
  • Element level: element data
  • Element data example
  • Element data exceptions
  • Practical example: Interactive Highlight color

Was this helpful?

  1. App Builder
  2. App construction

Accessors

PreviousTooltipNextPlugin Store

Last updated 1 year ago

Was this helpful?

Accessors allow you to retrieve and use data from a query result or from a data store variable. The data can be used to set element properties and styles, and can also 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 Query.

App level: app data and query results

All elements across all pages can access data stored in app data and query results.

  • To access app data, use ${#app.variable_name} to access

  • To access query results, employ the syntax ${#query_name}. Ensure that the query is renamed to a valid name. Valid query names should start with a letter or underscore _, followed by a combination of letters, numbers, and underscores, with no spaces allowed.

For example, if you want to access a single value from a query "car_database" in a text:

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.

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. 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.

Practical example: Interactive Highlight color

Here is an example to use the techniques above to highlight number of interest.

  1. Create query 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.

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.

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.