Open Dynamic Component Panel

The Open Dynamic Component Panel interaction allows you to launch and display another Avonni Dynamic Component within a side panel or designated area alongside the current content, triggered from an interaction within your originating Dynamic Component. This is excellent for creating master-detail views, providing contextual information, or offering editing capabilities without completely overlaying the main interface like a modal dialog.

Overview

This interaction promotes modularity and reusability. You build a focused Dynamic Component for a specific task (e.g., viewing details, editing a related record) and then use this interaction to display it within a panel when needed, often triggered by a button click or row selection.

Key Benefits

Contextual Display: Show related information or actions alongside the main content.
Modularity: Build smaller, focused components that can be displayed on demand.
Reusability: Use the same "panel" component in multiple contexts.
Streamlined Interactions: Provide detailed views or editing capabilities without navigating away or using a full overlay modal.

Configuration

To configure the "Open Dynamic Component Panel" interaction:

Select the Triggering Component: Choose the component (e.g., a Button, Data Table row action) that will open the panel.
Access Interactions: In the Properties Panel, go to the Interactions section.
Choose the Event: Select the event that should trigger the panel (e.g., On Click).
Add Action: Click "Add Action".
Set Action Type: Select Open Dynamic Component Panel from the list.
Configure Panel Properties:
6.1 Launching the Dynamic Component
- Dynamic Component API Name: Select the specific Dynamic Component you want to load inside the panel.
6.2 Passing Data to the Launched Component (Input Properties)
- Input Property / Name: The API name of the property (specifically, a Variable resource) in the launched panel component that you want to set or pass a value into.
  ❗ Important Prerequisite: Before you can select a name here, you must first perform these steps in the Dynamic Component you intend to launch in the panel:
  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 panel component will appear in the "Input Property / Name" dropdown list here.
- Input Property / Value: The value you want to pass into the selected input property of the panel component. This can be static, dynamic (e.g., @MyDataTable.firstSelectedRow.Id), or a resource from the current component.
- Input Property / Type: Choose the data type passed (Text, Number, Boolean, Date, Date/Time, Custom, etc.).
- Allow multiple values (collection): Enable if passing a list of values.
6.3 Configuring the Panel Appearance
- Panel Header: (Text) Enter a title for the panel that will display the launched component. The title can be static or dynamic.
- Panel Size: (Select) Choose the desired width or size of the panel (e.g., Small, Medium, or large—specific options may vary).
6.4 Handling Panel Outcomes
- On Close: (Interaction) Define an interaction (e.g., Show Toast, Refresh Data Source) that occurs when the user closes the panel.
Handy Tip: Refresh Originating Component on Close Enable the Refresh All Queries on close option (or similar setting) if you want the data sources within the originating Dynamic Component (the one that launched this panel) to automatically refresh immediately after this panel is closed.
- Purpose: Ensures data changes made or initiated within the panel (like creating or updating a record) are immediately reflected in the originating component's display.
- Example: If the panel is used to edit details shown in a list in the original component, enabling this ensures the list updates automatically when the panel closes.

Step-by-Step Guide (Conceptual)

Create the "Panel" Component

Build the Dynamic Component you want to display inside the panel. If needed, ensure it has Variables marked "Available for Input." Activate it.

Configure the Interaction

Select the trigger element in your originating Dynamic Component (e.g., a button). Add the "Open Dynamic Component Panel" interaction for the desired event (e.g., "On Click").

Select Panel Component

Choose the API Name of the component you created in Step 1

Configure Input Properties

Map values from the originating component to the "Available for Input" variables in the panel component.

Configure Panel Settings

Set the Panel Header and Size

Define Outcome Interactions

Configure the "On Close" behavior, especially the refresh option if needed.

Example Scenario: Viewing Product Details

Imagine a Data Table displaying a list of Products. When a user clicks a "View Details" action on a product row, you want to show more information in a side panel without leaving the list view.

Create ProductDetailPanel Component: Build a Dynamic Component with a Target Object of Product2. Add Text components, an Image component, etc., bound to $Component.record fields. Make sure this component has an inputProductId Variable (Text, Available for Input) and uses an "On Load" > "Get Records" action to fetch the Product based on inputProductId and store it in a Record Variable that the display components bind to.
In the Main Component (with Product List Data Table):
- Add a row action (e.g., a button icon) labeled "View Details."
- Configure the "On Click" interaction for this row action.
- Action Type: Open Dynamic Component Panel.
- Dynamic Component API Name: Select ProductDetailPanel.
- Input Properties:
  - Name: inputProductId
  - Value: @YourProductTable.firstSelectedRow.Id (Pass the ID of the clicked product).
- Panel Header: Could use a formula like "Details: " & @YourProductTable.firstSelectedRow.Name.
- Panel Size: Medium.
- On Close: If details can be edited in the panel, potentially add a "Refresh Data Source" action targeting the main product table.

Now, clicking the "View Details" action will slide open a panel displaying the details of the selected product alongside the main product list

Last updated 1 month ago

Was this helpful?

Overview

Key Benefits

Contextual Display: Show related information or actions alongside the main content.

Modularity: Build smaller, focused components that can be displayed on demand.

Reusability: Use the same "panel" component in multiple contexts.

Streamlined Interactions: Provide detailed views or editing capabilities without navigating away or using a full overlay modal.

Configuration

To configure the "Open Dynamic Component Panel" interaction:

Select the Triggering Component: Choose the component (e.g., a Button, Data Table row action) that will open the panel.

Access Interactions: In the Properties Panel, go to the Interactions section.

Choose the Event: Select the event that should trigger the panel (e.g., On Click).

Add Action: Click "Add Action".

Set Action Type: Select Open Dynamic Component Panel from the list.

Configure Panel Properties:

6.1 Launching the Dynamic Component

Dynamic Component API Name: Select the specific Dynamic Component you want to load inside the panel.

6.2 Passing Data to the Launched Component (Input Properties)

Input Property / Name: The API name of the property (specifically, a Variable resource) in the launched panel component that you want to set or pass a value into.
❗ Important Prerequisite: Before you can select a name here, you must first perform these steps in the Dynamic Component you intend to launch in the panel:
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 panel component will appear in the "Input Property / Name" dropdown list here.
Input Property / Value: The value you want to pass into the selected input property of the panel component. This can be static, dynamic (e.g., @MyDataTable.firstSelectedRow.Id), or a resource from the current component.
Input Property / Type: Choose the data type passed (Text, Number, Boolean, Date, Date/Time, Custom, etc.).
Allow multiple values (collection): Enable if passing a list of values.

6.3 Configuring the Panel Appearance

Panel Header: (Text) Enter a title for the panel that will display the launched component. The title can be static or dynamic.
Panel Size: (Select) Choose the desired width or size of the panel (e.g., Small, Medium, or large—specific options may vary).

6.4 Handling Panel Outcomes

On Close: (Interaction) Define an interaction (e.g., Show Toast, Refresh Data Source) that occurs when the user closes the panel.

Handy Tip: Refresh Originating Component on Close Enable the Refresh All Queries on close option (or similar setting) if you want the data sources within the originating Dynamic Component (the one that launched this panel) to automatically refresh immediately after this panel is closed.

Purpose: Ensures data changes made or initiated within the panel (like creating or updating a record) are immediately reflected in the originating component's display.
Example: If the panel is used to edit details shown in a list in the original component, enabling this ensures the list updates automatically when the panel closes.