LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Tutorial
    • Avonni Components App
      • Accessing the App
      • Folders
      • Templates
      • Version management
    • Understanding The Essentials
      • Component Builder
      • Component Visibility
      • Target Page Object
      • Using Variables and Component Data
      • Publishing your Dynamic Components
      • Dynamic vs. Flow Components
    • AppExchange Listing Page
    • Installation & Licenses Management
  • Tutorials
    • Projects
    • Components
      • Calendar
        • How to Create Events Quickly by Dragging
        • How to Add an Edit Action to Calendar Events
        • How to Add a New Event Button to the Calendar Header
        • How to Customize the Right-Click Menu
        • How to Reschedule Events with Drag and Drop
      • Columns
        • Creating a Responsive 3-Column Layout
      • Data Table
        • How to customize Data Table style
        • How to make a field editable
        • How to add clickable buttons
        • How to color-code badges
        • How to export data
        • How to configure search
        • How to set columns visibility
        • How to Conditionally Color Data Table Cells
      • Kanban
        • Saving Changes on Drag-and-Drop
      • List
      • Metric
      • Record Detail
        • Saving Changes
    • Interactions
      • How to create an interaction to navigate to an object page
      • How to create an interaction to navigate to a record page
      • How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow
    • Reactive Components
      • Reactive Map and Data Table
      • Master-Detail Relationship with Data Tables
      • Vertical Tabs with Reactive Data Table
    • Style
      • How do you add space or a break between sections or fields?
    • Tips and Tricks
      • Using the Dynamic Component component
  • Component Builder
    • Overview
    • Configuring Components
      • Properties
      • Fields
      • Style
    • Data & Interactions
      • Data Sources
        • Manual
        • Picklist
      • Resources
        • Constant
        • Formula
        • Nested Queries
        • Query
        • Variable
      • Interactions
        • CRUD from Record Variable
        • Download
        • Execute Flow
        • Navigate
        • On Load
        • Open Alert Modal
        • Open Confirm
        • Open Dynamic Component Dialog
        • Open Dynamic Component Panel
        • Open Flow Panel
        • Open Flow Dialog
        • Show Toast
    • Advanced Features
      • Copy and Paste
      • Debug Panel
      • Keyboard Shortcut
      • Undo / Redo
  • Components
    • Explore All Components
    • Accordion
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Badge
    • Barcode
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Button Stateful
    • Calendar
    • Camera 🆕
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Button
    • Chip Container
    • Color Picker
    • Columns
    • Combobox
    • Container
    • Counter
    • Data LWC Container
    • Data Table
    • Date Picker
    • Date
    • Date Range
    • Dual Listbox
    • Dynamic Component
    • File Upload
    • Flow
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Icon
    • Icon Picker
    • Illustration
    • Image
    • Input Color
    • Input Date
    • Input Pen (Signature)
    • Input Text
    • Kanban
    • List
    • LWC Container
    • Map
    • Media Object
    • Metric
    • PDF Viewer
    • Pivot Table
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Rating
    • Record Detail
    • Relationship Graph
    • Scope Notification
    • Section
    • Separator
    • Slider
    • Status
    • Tabbed Container
    • Tabs
    • Text
    • Text Area
    • Timeline
    • Toggle
    • Tree
    • Vertical Visual Picker
    • Video Player
    • Visual Picker
    • Visual Picker Link
  • Help
    • Contact Support
    • Security
    • Performance Guide
    • Deployment Process
    • Release Notes
    • Report Bugs
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Avonni Query Data Source
  • Core Concepts
  • What is the Avonni Query Data Source?
  • Reusable Queries
  • Managing Queries
  • Creating a Query
  • Editing a Query
  • Filtering Data
  • Configuring Query Filters
  • Types of Filters
  • Setting Up a Static Filter (Example)
  • Grouping Filter Conditions
  • Available Filter Operators
  • Reactive Queries
  • Introduction to Reactive Queries
  • How Reactive Queries Work
  • Direct Attribute Referencing
  • Automatic Updates

Was this helpful?

  1. Component Builder
  2. Data & Interactions
  3. Resources

Query

Avonni Query Data Source

The Avonni Query Data Source lets you connect Avonni components (Data Table, List, Carousel, Map) to your Salesforce data within App & Record Pages. It offers a flexible and efficient way to retrieve and display data, giving you precise control over what's shown and how.


Core Concepts

What is the Avonni Query Data Source?

The Avonni Query Data Source is a powerful way to connect your Avonni components (such as Data Table, List, Carousel, and Map) directly to your Salesforce data. It provides a flexible and efficient method for retrieving and displaying data within your App & Record Pages, giving you fine-grained control over what data is shown and how it's presented.

Reusable Queries

You can create a Query as a reusable resource and then use that same query across multiple Avonni components within your Dynamic Component. This promotes consistency and simplifies maintenance.


Managing Queries

Creating a Query

There are two ways to create a new Avonni Query:

  • Via the Resources Button: Click the Resources button and create a new Query Resource.

  • From an Avonni Component: Select the component (e.g., Data Table), and in its properties, click the "Create a Query" button

Editing a Query

You can modify an existing Avonni Query in two ways:

  • From the Resources Menu:

    1. Click the Resources button.

    2. Locate the Query you want to edit in the list of resources.

    3. Select the option to edit the Query by clicking on the Query name.

  • From an Avonni Component:

    1. Select the Avonni component (e.g., Data Table, List) currently using the Query.

    2. Find the section related to the data source or query in the component's properties panel.

    3. Look for an option to edit the Query (this is an "Edit" button).

Important Note

Modifying an existing Query will affect all Avonni components within your project using that same Query. This is because Queries are reusable resources.

Creating a New Version (Recommanded)

If you want to make changes to a Query without affecting other components, use the "Save As" or "Duplicate" option (if available) to create a new copy of the Query. Then, modify the latest copy.


Filtering Data

Configuring Query Filters

Avonni Dynamic Components allow you to filter the data retrieved by your queries, similar to using a WHERE clause in a SOQL query. This lets you control which records are displayed in components like Data Tables, Lists, and Maps.

Types of Filters

  • Static Filters: These filters use fixed values. You define them directly in the query's filter panel by selecting a field, an operator, and a specific value (e.g., Location equals 'New York'). Static filters do not change automatically based on user interactions.

  • Reactive Filters: These filters use dynamic values that do change based on user interactions or changes in other components. Instead of entering a fixed value, you reference an attribute of another component on the page (e.g., @AccountsTable.firstSelectedRow.Id). This creates a dynamic link, so the query automatically updates whenever the referenced attribute changes. See the [Reactive Queries documentation](Insert Link to Reactive Queries Section Here) for more details.

Setting Up a Static Filter (Example)

To retrieve Contact records where the Location is 'New York':

  1. Select the Component: Choose the component you want to filter (e.g., a Data Table displaying Contacts).

  2. Open the Filter Panel: In the component's properties panel, find and open the section for configuring the data source and its filters.

  3. Add a Filter Condition:

    • Field: Select the Location field (or the field containing the location information).

    • Operator: Choose the equals operator.

    • Value: Enter the text 'New York' (including the single quotes for a text value).

This setup will filter the component to show only Contacts where the Location field is equal to 'New York'

Grouping Filter Conditions

You can create more complex filters by grouping conditions using AND and OR logic. For example, to retrieve Contacts where the Location is 'New York' OR 'San Francisco', AND the Status is 'Active':

  1. Create a Group: Use the grouping feature in the filter panel (usually represented by buttons or options to group conditions).

  2. Add Conditions to the Group:

    • Location equals 'New York'

    • Location equals 'San Francisco'

  3. Set Group Operator: Change the operator of the created group to OR.

  4. Add Another Condition (Outside the Group):

    • Status equals 'Active'

  5. By default, the condition and the group will be combined using AND operator.

Available Filter Operators

The Avonni Query Data Source supports a range of operators for creating precise filters:

  • Comparison Operators:

    • equals ( = )

    • not equal to ( <> or != )

    • less than ( < )

    • greater than ( > )

    • less than or equal to ( <= )

    • greater than or equal to ( >= )

  • String Operators:

    • contains

    • starts with

    • ends with

  • Set Operators:

    • in

    • not in

  • Logical Operators (for Grouping):

    • AND

    • OR

    • NOT


Reactive Queries

Introduction to Reactive Queries

Reactive queries are a core feature of Avonni Dynamic Components, enabling your components (like Data Tables, Lists, Maps, etc.) to automatically update their displayed data based on user interactions or changes in other components. This creates a dynamic and responsive user experience without requiring manual page refreshes. All Avonni Dynamic Components are natively reactive-ready.

How Reactive Queries Work

Reactive queries in Avonni Dynamic Components automatically update data in a component (like a Data Table, List, or Map) based on changes in other components on the page. This is achieved without needing to write complex formulas. Instead, you directly reference the attributes of other components within the query's filter.

Direct Attribute Referencing

When configuring a query's filter, you can select attributes from other components on the page. For example:

  • If you have a Data Table displaying Accounts (let's call it AccountsTable) and another Data Table displaying Contacts, you can configure the Contacts Data Table's query to filter based on the selected row in the AccountsTable.

  • In the Contacts Data Table's filter, you would select the AccountId field (or the relevant field linking Contacts to Accounts).

  • For the filter's value, you would directly reference the Id attribute of the selected row in the AccountsTable. This might look something like: @AccountsTable.firstSelectedRow.Id.

  • When a user selects a different row in the Accounts Table, the value from the selected row attributes will dynamically change, making the Contact Table reactive.

Automatic Updates

Whenever the referenced attribute's value changes (e.g., a new row is selected in the AccountsTable), the query automatically re-executes, and the connected component (the Contacts Data Table) updates to display the new results.

Last updated 3 months ago

Was this helpful?