YouTube ChannelInstall the Components for Experience Sites

Reactive Components

Overview

Reactive Components are designed to dynamically respond to changes in data or user interactions within your Experience Site. When one component updates—such as a user selecting an item—related components automatically refresh to reflect those changes, creating a smooth and engaging experience for your visitors.

Key Components

Reactive Components are:

Benefits for Your Site

Integrating these reactive components into your Experience Site unlocks new opportunities for dynamic and interactive designs. They allow your site to adapt to user actions in real time, delivering relevant information without requiring manual refreshes or additional navigation, enhancing overall usability.

Practical Use Cases

Dynamic Account Details with Maps

Configure an Avonni Map to display account locations. When a user selects a location, related account details (e.g., name, description, industry) automatically appear in an Avonni Text Block, providing an intuitive way to explore data.

Interconnected Data Tables

Set up an Avonni Data Table to list accounts. Selecting an account triggers a second Data Table to update and show associated contacts, enabling seamless navigation through large datasets.

Why Reactive Components Matter

Reactive components enable your Experience Site to respond and communicate across elements, making it more dynamic and user-friendly. This interactivity helps visitors discover and access information efficiently, leading to a more engaging and productive experience.

Setting Up Your Reactive Avonni Components

Incorporate these reactive components into your Experience Site with a straightforward setup process to enhance interactivity:

What Makes a Component "Reactive"?

A component becomes reactive by linking its data to other components, allowing automatic updates based on user actions. This is achieved with two simple steps

Steps to Enable Reactivity

1

Name Your Data Components (componentApiName)

  • Assign a unique nickname to each component in the Properties Panel. For example, name a Data Table listing accounts as accountsDatatable.

  • Why this? The nickname identifies the component for reactivity, enabling other components to reference its data

2

Tell Other Components How to React

  • Specify which components should update when a user interacts with another. Use the following syntax in the target component’s properties:text{{componentApiName.selectedRecord.componentFieldApiName}}

  • Breakdown:

    • componentApiName: The nickname you assigned (e.g., accountsDatatable).

    • selectedRecord: The row or item the user selects.

    • componentFieldApiName: The specific field to display (e.g., Name, Industry).

  • Why this? This syntax links the selected data (e.g., an account’s Name) to another component, triggering an automatic update

Troubleshooting Common Issues

  • Components Not Updating: Ensure each component has a unique componentApiName and that the syntax ({{componentApiName.selectedRecord.componentFieldApiName}}) is correctly entered in the target component’s properties.

  • No Data Displayed: Verify the source component (e.g., accountsDatatable) has data and that the componentFieldApiName matches an available field (e.g., Name).

  • Reactivity Delay: Check for complex data sets; simplify queries or reduce the number of reactive links to improve performance.

  • If Issues Persist: Contact our support team at [email protected] for assistance.

Guided Examples

Cover

Linking Data Table and Map for Dynamic Locations

Learn to connect an Avonni Data Table and Map in Experience Site to dynamically display locations based on user-selected accounts.

Cover

Linked Data Tables

Discover how to link an Avonni Data Table for accounts with a Contacts Table, updating the Contacts Table dynamically to show only contacts for the selected account

Last updated

Was this helpful?