# Open Dynamic Component Panel ## Overview The "**Open Dynamic Component Panel**" interaction lets you display another Avonni Dynamic Component in a side panel that slides in from the edge of the screen. Unlike modals that cover the entire screen, panels appear alongside your existing content, making them perfect for showing details, forms, or additional information without losing context of what you were viewing. {% hint style="success" %} #### Important Concepts Before diving into the configuration, it's essential to understand the architecture of panel interactions and the relationships among the components involved. #### The Two Components When using this interaction, you're **working with two separate Dynamic Components**: 1. The Main Component (Originating Component): * This is where users start * Contains the trigger (button, table row action, etc.) * Stays visible in the background when the panel opens 2. The Panel Component (Launched Component): * This is what displays inside the panel * A completely separate Dynamic Component you build specifically for this purpose * Receives data from the primary component through input variables You must create both components before configuring this interaction. {% endhint %} *** ## Configuration ### **Dynamic Component Name** Select which Dynamic Component to display in the panel. Choose from the dropdown of your available Dynamic Components and select the panel component you created and activated earlier. ### **Input Variables (Passing Data to the Panel)** This is where you connect data from your main component to the panel component's input variables. For each piece of data you want to pass, click "**Add Item**" to create a new mapping. #### **Name field** A dropdown lists all variables from the panel component marked "**Available for Input**." Select the variable you want to populate, such as inputAccountId. {% hint style="warning" %} #### Important Make sure variables are marked as "**Available for Input**" in the component you want to open as a panel. If you can't see your variable in the dropdown, go back to the panel component and ensure the "**Available for Input**" checkbox is checked for that variable. {% endhint %} #### **Value field** Enter the record field values you want to pass as input variables to the component. **Examples (illustration purposes only)** * `Record: Name` - Pass the Account Name field * `Record: Email` - Pass the Contact Email field * `Record: Amount` - Pass the Opportunity Amount field * `Record: Status` - Pass the Case Status field **Note:** The available field values depend on how your main component is configured and which record data it has access to. ### **Header** The title that appears at the top of the panel. You can configure this in two ways: * Click the field name selector to choose a dynamic value from your component * Enter static text directly using the custom value. ### **Position** Choose which side of the screen the panel slides in from. You can select Left to have the panel appear from the left side, or Right (most common) to have it appear from the right side. Most applications use "Right" as it follows standard UI conventions for detail panels and side navigation. ### **Superposed** Controls whether the panel overlays the main component. When checked, the panel displays over (on top of) the main component, dimming or covering the background. When unchecked, the panel displays alongside the main component without an overlay. **When to use Superposed:** * When you want to focus user attention entirely on the panel * For modal-like behavior while still using a panel format * When the main content isn't needed while the panel is open ### **Outer** Controls whether the panel appears within or outside the component's boundaries. When checked, the panel displays outside the component's container, potentially using more screen space. When unchecked, the panel displays within the component's allocated space. **When to use Outer:** * When your component has limited width and you need more panel space * For full-page component layouts where panels should extend to screen edges * When you want the panel to feel separate from the component container ### **Size** Choose how wide the panel should be: * **Small**: Narrow panel, good for simple forms or brief information * **Medium**: Balanced width, works for most use cases * **Large**: Wide panel, suitable for detailed views or complex forms * **X-Large:** Very wide panel, for extensive content or data tables * **Full**: Panel takes up the entire available width Tip: Start with Medium and adjust [based on your content needs](#user-content-fn-1)[^1]. Larger panels work better when Outer is enabled ### **Padding** Controls the internal spacing around the panel's content. Small provides minimal padding with content closer to panel edges for a compact look. Medium offers balanced padding with comfortable spacing and is recommended for most cases. Large gives generous padding with more breathing room around content. ### **Hide Close Icon** Controls whether the standard close (X) button appears in the panel header. When checked, the close icon is hidden and users must close the panel through other means. When unchecked, the close icon is visible (standard behavior). **When to hide the close icon:** * When you want to force users through a specific flow or process * When you provide custom close/cancel buttons in the panel content * For wizard-like experiences where users should complete all steps Warning: If you hide the close icon, ensure users have another straightforward way to close the panel (like a Cancel or Close button in your panel component), or they may feel trapped. ### **On Close** Define what happens when the panel closes (via the close icon, a custom button, or other means). You can configure several types of actions: #### **Show Toast Notification** Display a message when the panel closes, such as "Changes saved successfully" or "Panel closed." This is useful for confirming task completion. #### **Refresh All Queries** Automatically refreshes all data sources in the main component. Use this when users can modify data in the panel to ensure the main component shows updated information. For example, when a user edits an account in the panel, the panel closes, and the account table refreshes automatically. #### **Get Records** Fetch specific records when the panel closes. This is more targeted than Refresh All Queries and valuable when you know exactly which data needs updating. *** ## Step-by-Step Example #### Account Details Panel Let's build a complete example where users can click on an account in a table to see its full details in a side panel.
#### Scenario Overview * **Main Component**: Displays a list of accounts in a data table * **Panel Component**: Shows detailed account information * **Interaction**: Click a "View Details" button on any row to open the panel for that account {% stepper %} {% step %} #### Create the Panel Component * **Create New Dynamic Component** * Name: "Account Details Panel" * Description: "Displays detailed account information" * **Create Input Variable** * Create a new resource, then select Variable * **API Name**: inputAccountId * **Data Type**: Text * **Available for Input**: Checked (Don't forget this!) \>> This variable will receive the Account ID from the main component
* **Create Record Variable** * Create another new resource, then select Variable * API Name: accountRecord * Data Type: Record * Object Type: Account \>> This variable will store the fetched Account record
* **Add "On Load" Interaction to Fetch Account** * Add an ["On Load" interaction](/dynamic-components/component-builder/on-load-interaction.md) to your panel component * Action: Get Records * Record Variable: Select accountRecord (the record variable you just created) * Record ID: Map to inputAccountId (the input variable) **>> This fetches the Account record when the panel loads, using the ID passed from the main component**
* **Design the Panel Layout** * Add Display Text components for account fields: * Account Name: accountRecord.Name * Industry: accountRecord.Industry * Annual Revenue: accountRecord.AnnualRevenue * Phone: accountRecord.Phone * Add any other components you want (images, related lists, etc.)
* **Save and Activate** * Save your panel component * Click Activate {% endstep %} {% step %} #### Configure the Main Component * **Add Data Table** * Add an Avonni Data Table to your main component * Configure it to display Account records using a Query Data Source * **Add Row Action** * In the data table's column configuration, add a new column * Set the column Type to one of the following: * Action * Button * Button Icon * This creates a clickable element in each row that users can click to open the panel * Label: "View Details" * Choose an appropriate icon (optional, like an eye or info icon)
* **Configure the Interaction** * Select the "View Details" row action * Type: Open Dynamic Component Panel
* **Configure Panel Settings Dynamic Component API Name** * Select: Account\_Details\_Panel Input Properties: * Click "Add Item" * Name: inputAccountId (from dropdown) * Value: Record: Id On Close: * Leave empty (no refresh needed since we're just viewing, not editing)
* Save Your Main Component {% endstep %} {% step %} #### Test It * Activate and add it to a Page * Add your main component to a Lightning page * Save and activate the page * Test the Interaction * Find an account in the table * Click the "View Details" action * The panel should slide in from the right * Account details should display for the clicked account * Click the X or outside the panel to close it {% endstep %} {% endstepper %} ## Troubleshooting ### Panel opens but shows no data * Verify input variables are marked "**Available for Input**" in the panel component. * Check that you're passing the correct value (use browser console to debug) * Ensure the panel component's "On Load" action is correctly fetching data using the input variable ### Input variable doesn't appear in the dropdown * Go to the panel component * Find the variable * Ensure "Available for Input" checkbox is checked * Save and re-activate the panel component * Refresh your main component's configuration page ### Wrong data displays in the panel * Check the Input Property Value—are you passing the correct field/variable? * Verify you're using .firstSelectedRow for data tables * Use debug mode to inspect what value is actually being passed ### Panel doesn't open at all * Verify the panel component is activated * Check browser console for errors * Ensure the panel component API Name is correct * Verify the trigger component's interaction is configured correctly *** ## Next Steps Now that you understand panel interactions, consider: * Building reusable panel components for common tasks * Creating a library of detail/edit panels for different objects * Combining panels with other interactions for complex workflows * Using panels within panels for hierarchical navigation (advanced) *** ## Need More Help? If you have questions about implementing panel interactions, configuring input variables, or troubleshooting panel behavior, [**don't hesitate to reach out**](/dynamic-components/resources/contact-support.md). We're here to help you create intuitive, multi-component experiences with Avonni Dynamic Components. [^1]: --- # 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-panel.md?ask= ``` 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.