Reactive Data Components

Introduction

Reactive components are designed to respond dynamically to changes in data or user interactions. When one component is updated, related components automatically refresh to reflect those changes. This creates a seamless and engaging experience for your site visitors.

Avonni Reactive Experience Components are:

• Avonni Data Table

• Avonni Map

• Avonni List

• Avonni Timeline

• Avonni Text Block

How will this improve my site?

These enhanced components open new possibilities for creating dynamic and interactive experiences within Experience Cloud. You can build sites that actively respond to user actions, providing relevant information without manual refreshes or navigation.

Maps That Tell a Story

Imagine a map displaying various accounts on your site. When a user selects a location, the relevant account details (e.g., name, description, industry) instantly appear in a text box elsewhere on the page. This intuitive visual data exploration enhances the user experience and provides contextually relevant information.

Data Tables That Talk to Each Other

Consider a table listing accounts. When a user selects an account, a separate table dynamically updates to show all associated contacts. This interconnectedness allows users to seamlessly navigate large datasets and access relevant information without refreshing the page.

Why do Reactive Components matter?

Enabling components to react and communicate with each other makes your site more dynamic and responsive to user interactions. Visitors can now discover and access information more efficiently, leading to a more meaningful experience overall.

Setting Up Your Reactive Avonni Components

Embrace this new era by integrating these reactive components into your Experience Cloud Site. Here’s how:

What Makes a Component "Reactive"?

Two Simple Steps to Reactive Magic

1. Name Your Data Components (componentApiName):

   • Think of this as giving your components a nickname. For example, if you have a table listing accounts, call it accountsDatatable

2. Tell Other Components How to React:

   • Decide which components should show information when a user interacts.

   • Use a special code format:

     • {{componentApiName.selectedRecord.componentFieldApiName}}

     • Let's break that down:

       • componentApiName: The nickname you gave your component (e.g., accountsDatatable)

       • selectedRecord: The row/item the user clicked on

       • componentFieldApiName: The specific piece of information you want to display (e.g., Name, Industry)

Guided Examples

Interactive Map

Linked Data Tables