A new version of the Avonni Dynamic Components is now available!
Read the Release Notes
YouTube ChannelBook A DemoContact SupportSubscribe for Updates

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.

Think of it like this: Your main component is like the main stage, and the panel is like opening a sidebar with additional tools or information—both are visible at the same time.

Important Concepts

Before diving into the configuration, it's essential to understand the architecture of how panel interactions work and the relationship between 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.

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. For example, you might select Account_Details_Panel. This setting determines what content loads inside the panel when it opens.

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 Input Variable" or the plus icon 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.

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.

Value field: Enter the actual data from your current component. Common patterns include:

  • dataTable1.firstSelectedRow.Id - to pass data from a data table

  • $Component > RecordId - to pass the current page's record

  • selectedAccountId - to pass data from a variable

  • "High Priority" - for fixed static text

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

1

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

2

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

3

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

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 properly configured

Changes made in panel don't reflect in main component

  • Enable "Refresh All Queries on Close" in the On Close settings

  • Or manually add a Refresh Data Source action to On Close

  • Ensure you're targeting the correct data source to refresh

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. We're here to help you create intuitive, multi-component experiences with Avonni Dynamic Components.

Last updated

Was this helpful?