LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Introduction
  • How will this improve my site?
  • Maps That Tell a Story
  • Data Tables That Talk to Each Other
  • Why do Reactive Components matter?
  • Setting Up Your Reactive Avonni Components
  • What Makes a Component "Reactive"?
  • Guided Examples

Was this helpful?

  1. Getting Started

Reactive Data Components

Last updated 12 months ago

Was this helpful?

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:

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

Avonni Data Table
Avonni Map
Avonni List
Avonni Timeline
Avonni Text Block
Cover

Cover

Interactive Map
Linked Data Tables