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
      • 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 Topics
      • Undo / Redo
      • Copy and Paste
      • Keyboard Shortcut
  • 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
    • 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
  • Overview
  • Prerequies
  • Guided Steps: Passing Selected Records to a Flow

Was this helpful?

  1. Tutorials
  2. Interactions

How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow

Last updated 1 month ago

Was this helpful?

Overview

Learn to send a collection of records (e.g., rows selected in a Data Table) from your Avonni Dynamic Component into a Screen Flow launched via "Open Flow Dialog" or "Open Flow Panel." This guide covers setting up the Flow's input collection variable and mapping the selection in the interaction

Prerequies

Important Prerequisite: Configure Flow Input Collection Variable

Before proceeding, ensure the Screen Flow you intend to launch has a Collection Variable configured to receive the selected records. In the Flow Builder, this variable must have "Allow multiple values (collection)" and "Available for Input" checked. (A Text data type is commonly used for passing record IDs). This setup is required so you can map the selected records to this variable in the interaction settings

Guided Steps: Passing Selected Records to a Flow

1

Prepare Your Data Display Component

  • Ensure Multi-Select is Enabled: Select the component where users will choose multiple records (e.g., your Avonni Data Table). In its Properties Panel, ensure the setting allowing multiple row selection is enabled.

  • Note the API Name: Confirm the API Name of this Data Table (e.g., OpportunityTable), as you'll need it in Step 4

2

Create the Trigger Action Element

  • Add the component users will click to start the process. This is usually an Avonni Button placed near your data component, or a Header Action configured directly within the Data Table's header properties.

  • Give this button/action a clear Label (e.g., "Process Selected Opportunities", "Update Statuses")

3

Add the "Open Flow Dialog/Panel" Interaction

  • Select the Button or Header Action you created in Step 2.

  • In the Properties Panel, go to the Interactions section.

  • Choose the event to trigger the Flow (typically On Click).

  • Click Add Action.

  • Set the Action Type to either Open Flow Dialog or Open Flow Panel.

  • In the Flow API Name setting, select the specific Screen Flow you prepared earlier (the one containing the input collection variable – see Prerequisite section).

4

Map Selected Records to the Flow's Input Variable

This is crucial in connecting the Data Table's selection to the Flow. Within the configuration settings for the "Open Flow Dialog/Panel" action you just added:

  1. Find the Input Variables section.

  2. Click the "Add Item" button to create a mapping.

  3. Input Name: From the dropdown list, select the API Name of the Collection Variable you created inside your Screen Flow (marked as 'Available for Input' in the prerequisite step).

  4. Value: Click the resource selector icon next to the value field.

    • Choose Component Attribute.

    • Select your Data Table component (using its API Name, e.g., OpportunityTable).

    • Choose the attribute that holds the selected row data:

      • selectedRowsKeyValue: Use this if your Flow's input collection variable is of type Text and you want to pass only the record IDs. This is the most frequent use case.