Dynamic Component

The Avonni Dynamic Component component lets you embed one Dynamic Component within another.

The Dynamic Component component is a container component allowing you to embed other Avonni Dynamic Components. This is the key to creating reusable components and building complex, hierarchical layouts in Avonni Dynamic Components. Think of it as a way to insert a pre-built component (or a section of a component) into another component.

Overview

The Dynamic Component component doesn't display data or provide direct interactivity. Instead, it acts as a placeholder for another Dynamic Component. This offers several crucial benefits:

• Reusability: Build a complex UI element (e.g., a custom related list, a specialized form, a mini-dashboard) once as a separate Dynamic Component. Then, use the Dynamic Component component to embed that pre-built component in multiple places – on different record pages, app pages, or even within other Dynamic Components.

• Modularity: Break down large, complex components into smaller, more manageable pieces. This makes your components easier to understand, maintain, and update.

• Organization: Create a clear hierarchical structure for your UI, grouping related elements logically.

• Encapsulation: The internal workings of the nested component are hidden from the parent component. This reduces complexity and prevents naming conflicts.

How it Works

1. Create the "Child" Component: First, you create the Dynamic Component that you want to embed (the "child" component). This regular Dynamic Component is built with any combination of Avonni components. Define any input and output variables you need to communicate with the parent component.

2. Add the Dynamic Component Component: In your "parent" Dynamic Component (where you want to embed the child), drag a Dynamic Component component from the Component Library onto the canvas.

3. Select the Component to Display: In the Properties Panel of the Dynamic Component component, you'll find a setting (labeled "Name"). Use the component selector to choose the name of the Dynamic Component you created in step 1.

Use Cases

• Reusable Related Lists: Create a custom "Related Contacts" component once, and then use the Dynamic Component component to embed it on Account, Opportunity, or other record pages. Pass the parent record's ID as an input variable to filter the related list.

• Custom Forms: Build specialized forms as separate Dynamic Components, then embed them in other components as needed.

• Mini-Dashboards: Create small, self-contained dashboards (e.g., a chart and a summary table) as Dynamic Components, then embed them in more extensive dashboards or record pages.

• Complex Layouts: Break down a complex page layout into smaller, more manageable sections, each implemented as a separate Dynamic Component.

• Conditional Sections: Use a Dynamic Component component combined with visibility rules to show/hide entire sections of your UI based on conditions.

Example: Reusable Related Contacts

1. Create "RelatedContacts" Component:

   • Create a new Dynamic Component named RelatedContacts.

   • Set its Target Object API Name to Account (assuming you'll use this on Account pages).

   • Add a Data Table component to display Contacts.

   • Configure the Data Table's query to retrieve Contacts related to an Account. Use a filter: AccountId equals {!inputAccountId}.

   • Create a Text Variable resource named inputAccountId and mark it as Available for Input. This will receive the Account ID from the parent component.

   • Save and Activate RelatedContacts.

2. Create "AccountDetailPage" Component:

   • Create another Dynamic Component named AccountDetailPage.

   • Set its Target Object API Name to Account.

   • Add any components you want to display Account details.

3. Embed "RelatedContacts":

   • In AccountDetailPage, drag a Dynamic Component component onto the canvas.

   • In the Dynamic Component component's properties, select RelatedContacts as the component to display.

   • You'll now see the inputAccountId input variable listed. Bind this to $Component.record.Id. This passes the current Account's ID to the nested component.

4. Add to Account Page: Add the AccountDetailPage component to an Account record page.

Now, on any Account record page, the AccountDetailPage component will be displayed. It will, in turn, embed the RelatedContacts component, passing the current Account's ID to it. The RelatedContacts component will use that ID to filter its Data Table and display the related Contacts.

Performance Considerations

While nested components offer great flexibility, excessive or poorly designed nesting can impact performance. Here are some tips:

• Avoid Deep Nesting: Limit the levels of nesting. Very deep hierarchies can be harder to manage and can slow down rendering.

• Use Input/Output Variables: Pass data between parent and child components using input/output variables instead of having each nested component fetch its own data independently.

• Conditional Visibility: Use visibility rules to prevent unnecessary components from loading.

• Monitor Data Loading: Be mindful of how data is loaded within nested components. Avoid redundant queries.