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

{% hint style="warning" %}

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

<img src="/files/VOA4FFCyr3Tx1La51qYg" alt="" data-size="original">
{% endhint %}

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

{% hint style="success" %}

#### 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.
  {% endhint %}

### **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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/dynamic-component-control/open-dynamic-component-dialog.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.