The New version of the Avonni Components for Screen Flows is available!
Read the Release Notes
YouTube Channel

Build a reactive Data Table Using Dependent Picklists

Overview

This tutorial will show you how to use Avonni Comboboxes (drop-down lists) configured to be dependent picklists to control the data shown in the Avonni Data Table. When you select an option from one combobox, the table will automatically update to display only the relevant information.

POWER TIP: Alternatives to Screen Flows for Data Display

If you're currently using Screen Flows to display information on a page (without any complex logic), consider switching to Avonni Dynamic Components package. You'll get faster loading times and a more straightforward setup for your data queries on Lightning Pages.

Reactive Formula configuration

To make the Avonni Data Table change its data based on what's selected in the comboboxes, we'll create a special formula. This formula will act as a filter for the Data Table's query, so the table will dynamically show the correct information based on the choices made in the comboboxes.

Here's the formula configured: 

IF(ISBLANK({!combobox_model.value}), "Car_Make__c= '"&{!combobox_maker.value}&"'", "Car_Make__c= '"&{!combobox_maker.value}&"' AND Car_Model__c = '"&{!combobox_model.value}&"'" )

This formula controls the data shown in the Data Table based on the selections made in two combo boxes: "combobox_maker" (for car makers) and "combobox_model" (for car models).

Here's how it works:

  • IF(ISBLANK({!combobox_model.value}): This part checks if the user has selected anything in the "combobox_model" combobox.

    • If nothing is selected, the formula filters the Data Table to show only cars from the maker selected in the "combobox_maker" combobox. For example, if the user selects "Honda" in the maker combobox, the table will show all Honda cars, regardless of the model.

    • If a model is selected, the formula refines the filter to show only cars that match the selected maker and model. For example, if the user selects "Honda" as the maker and "Civic" as the model, the table will show only Honda Civic cars.

This formula allows for a dynamic and interactive filtering experience—the data Table updates in real time based on the user's choices in the combo boxes.

Formula Break-Down

Let's break down this formula step-by-step:

  • IF( ... ): This is an "if" statement. It checks if a certain condition is true, and then does different things depending on the result.

  • ISBLANK({!combobox_model.value}): This is the condition being checked. It's asking, "Is the 'combobox_model' combobox empty?" In other words, has the user selected a car model yet?

  • "Car_Make__c= '"&{!combobox_maker.value}&"'": This is what happens if the condition is TRUE (the user hasn't selected a model). It tells the Data Table to filter the results and only show cars where the Car_Make__c field matches whatever the user selected in the "combobox_maker" combobox.

  • "Car_Make__c= '"&{!combobox_maker.value}&"' AND Car_Model__c = '"&{!combobox_model.value}&"'": This is what happens if the condition is FALSE (the user has selected a model). It tells the Data Table to filter the results based on both the selected maker and the selected model.

In simpler terms:

Imagine you have a list of cars. This formula lets you filter that list in two ways:

  1. If you only choose a car maker (like "Honda"), it shows you all the Honda cars.

  2. If you choose both a maker ("Honda") and a model ("Civic"), it shows you only the Honda Civics

Connect the Formula to the Data Table

Connect the formula variable we just created to the "Query Filter" option in the Data Table settings. This will make the Data Table reactive, meaning it will automatically update its data based on the selections made in the combo boxes.

Last updated

Was this helpful?