Reactive Components

What is Reactivity?

Reactivity means that components can "talk" to each other. When a user interacts with one component (like selecting a row in a Data Table), other components on the page can automatically update to reflect that change. This creates a much more dynamic and intuitive user experience than static pages.

Key Benefits:

• Simplified Development: You don't need to write complex code or formulas to connect components.

• Responsive Interface: The UI feels "alive" and instantly reflects changes.

• Data Consistency: Automatic updates ensure that all components display consistent information.

• Easier Maintenance: Changes in one place automatically propagate, reducing errors

How Reactivity Works in Avonni Dynamic Components

Avonni Dynamic Components make reactivity simple. It's all about connecting components through their data.

Here are the key concepts.

Key Concepts

Avonni Query Data Source

The Avonni Query Data Source is the foundation for reactivity. It's designed to:

• Support Dynamic Filtering: Filters can depend on values within your Dynamic Component, including attributes of other components.

• Automatically Re-query: When a referenced value changes, the query automatically re-executes, updating the connected component.

• Efficient Updates: Optimized for frequent data changes.

Direct Attribute Referencing

You create these dynamic links using direct attribute referencing. This is a simple, visual way to connect components without writing complex formulas.

Examples

Reactive Map and Data Table

Master-Detail Relationship with Data Tables

Vertical Tabs with Reactive Data Table