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