Guide to Implementing
Guide to Implementing Reactivity in Avonni Components
Transform your Avonni components into a dynamic and interactive experience with our guide on setting up reactive data components. This tutorial will walk you through the process, ensuring that your components display data and respond to user interactions in real-time.
Reactive-Ready Data Experience Components are: the Data Table, List, Map, Timeline and the Avonni Text Block.
Step 1: Assigning API Names to Your Data Components
Start by giving each of your data components a unique identifier, known as an API name. This name acts as a reference point, allowing different parts of your page to communicate.
For Example:
If you're working with a Data Table component, you can name it
accountsDatatable
.
Step 2: Configuring Reactive Expressions in Target Components
Next, decide where you want the interactive data to appear. This could be within a Text Block, another Data Table, or any component displaying data. Here, you'll use reactive expressions to instruct the component on what data to show and when in the filter menu.
The Reactive Expression Format: Use the format
{{componentApiName.selectedRecord.componentFieldApiName}}
to link your components.componentApiName
: This is where you put the API name of your data component (like theaccountsDatatable
you named above).componentFieldApiName
: This refers to the specific field from the record you want to display (for instance,Name
orIndustry
).
For Example:
To show the 'Name' field of a record selected from your
accountsDatatable
, use{{accountsDatatable.selectedRecord.Name}}
.To display the 'Industry' field from the same selection, use
{{accountsDatatable.selectedRecord.Industry}}
.
Practical Use Cases:
Interactive Maps for Account Visualization:
Suppose you have an interactive map tagged as
accountMap
. When a user selects a location, you can display the Account Name in a Text Block by using an expression like{{accountMap.selectedRecord.Name}}
. This ensures the selected account's name appears dynamically based on user interaction.
Synchronized Data Tables for Accounts and Contacts:
Imagine you have one table showing accounts (
accountsDatatable
) and another showing related contacts (contactsDatatable
).You can configure the
contactsDatatable
to react to selections in theaccountsDatatable
. For instance, to display the contact name associated with the selected account, use{{accountsTable.selectedRecord.Id}}
.
These steps will turn your static components into a rich, responsive experience, making your web applications more intuitive and user-friendly. The power of reactive data lies in its ability to make every interaction on your site feel connected and purposeful.
Happy Building!
Last updated