Open Dynamic Component Dialog

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: Automatically refresh 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 in the launched Dynamic Component you want to set.

• 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.

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 specific information.

2. Configure the "Open Dynamic Component Dialog" Interaction: In your originating Dynamic Component, find the "Open Dynamic Component Dialog" interaction.

3. Configure Input Properties: In the interaction's properties, locate the "Input Properties" section. Add the input properties and enter their API Names. These must match exactly 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 size of the dialog box.

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. You can use the "Open Dynamic Component Dialog" interaction to launch a separate Dynamic Component that displays detailed information about a specific product when the user clicks on that product in the list. You could pass the product ID as an input property to the detail component. When the user closes the detail dialog, you could refresh the product list component.

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