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
  • Overview
  • Tutorials
  • Specification
  • Launching the Dynamic Component
  • Passing Data to the Launched Component (Input Properties)
  • Configuring the Dialog Box
  • Handling Dialog Outcomes
  • Step-by-Step Guide
  • Example

Was this helpful?

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

Open Dynamic Component Dialog

Last updated 2 months ago

Was this helpful?

Overview

The "Open Dynamic Component Dialog" interaction lets users launch another Dynamic Component directly from within a Dynamic Component. This allows you to create modular and reusable components, streamline user interactions, and easily build complex applications.

Tutorials

  • Passing Data Between Dynamic Components: Learn how to connect your Dynamic Components and pass data between them.

  • Auto-Refresh After Dialog Close: This feature automatically refreshes data in the originating component after the dialog closes, ensuring users see the latest information.

Specification

The "Open Dynamic Component Dialog" interaction launches another Dynamic Component in a modal dialog. Here's a breakdown of the configurable attributes:

Launching the Dynamic Component

  • Dynamic Component API Name: Select the Dynamic Component you want to launch.

Passing Data to the Launched Component (Input Properties)

  • Input Property / Name: The API name of the property you want to set in the launched Dynamic Component.

Important consideration

Before you can select a name here, you must first perform these steps in the Dynamic Component you intend to launch in the dialog:

  1. Create a Variable resource for each piece of data you want to receive (e.g., a Text variable to receive a record ID).

  2. For each Variable resource, ensure the "Available for Input" checkbox is checked in its configuration.

Only Variables marked as "Available for Input" in the target dialog component will appear in the "Input Property / Name" dropdown list. This setting allows the dialog component to receive data from this interaction.

  • Input Property / Value: The value you want to pass to the input property.

  • Input Property / Type: Choose the data type you're passing (Text, Number, Boolean, Date, Date/Time, Custom, etc.).

  • Allow multiple values (collection): Enable this to pass a collection of values.

Configuring the Dialog Box

  • Modal Header: Enter a title for the dialog box.

  • Modal Padding: Adjust the padding within the modal dialog to control the spacing between the content and the dialog's border.

  • Modal Size: Choose the dialog box size (Small, Medium, Large).

Handling Dialog Outcomes

  • On Close: Define an interaction when the user closes the dialog box.

Handy Tip

Refresh Originating Component on Close: Select "Refresh All Queries" option if you want the data sources within the originating Dynamic Component (the one that launched this dialog) to automatically refresh immediately after this dialog is closed.

  • Purpose: This ensures that any data changes made or initiated within the dialog (such as creating a new record, updating an existing one shown in the original component, or deleting a record) are immediately visible in the originating component's display without requiring the user to perform a manual refresh. It keeps the data synchronized and provides instant feedback.

  • Example: Imagine you use this dialog to create a new Contact record. If you enable "Refresh Originating Component on Close," when the user finishes creating the Contact and the dialog closes, the list or data table in the original component will automatically update to include the newly created Contact. The new Contact wouldn't appear without this enabled until the user manually refreshed the original component or the page.

Step-by-Step Guide

  1. Create the Dialog Component: Build the Dynamic Component you want to launch in the dialog. This component will perform a specific task or display particular information.

  2. Configure the "Open Dynamic Component Dialog" Interaction: Find the "Open Dynamic Component Dialog" interaction in your originating Dynamic Component.

  3. Configure Input Properties: Locate the "Input Properties" section in the interaction's properties. Add the input properties and enter their API Names. These must match the API names of the properties you created in the dialog component. Provide the values you want to pass.

  4. Configure Dialog Settings: Customize the modal header, accessibility description, and dialog box size.

  5. Define Outcome Interactions: Specify the actions you want to occur when the dialog finishes, is closed, or encounters an error.

Example

Imagine you have a Dynamic Component that displays a list of products. When the user clicks on a specific product in the list, you can use the "Open Dynamic Component Dialog" interaction to launch a separate Dynamic Component that displays detailed information about that product. You could pass the product ID as an input property to the detail component. You could refresh the product list component when the user closes the detail dialog.

Using the "Open Dynamic Component Dialog" interaction, you can create modular, reusable components that enhance the user experience and streamline development.