Reactive Components

Overview

Reactive Components automatically update when users interact with your Experience Site. When a user clicks or selects something in one component, other connected components refresh instantly to show related information—creating a seamless, interactive experience.

Key Components

Reactive Components are:

• AX - Data Table

• AX - Map

• AX - List

• AX - Timeline

• AX - Text Block

How This Helps

Reactive components let you build interactive pages where users can explore data dynamically. For example, clicking a record in AX - Data Table can automatically update an AX - Map to show that record's location, or filter an AX - Timeline to show related activities—all without page refreshes or navigation.

This creates more engaging portal experiences where information updates instantly based on what users are viewing or selecting

---

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

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.

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