Wiring Components using Dynamic Interaction

Sheet components support the Lightning platform's "Dynamic Interaction" feature. This allows you to easily realize dynamic screen configurations and component integrations that respond to user operations by connecting Lightning components that also support dynamic interaction.

Dynamic interaction settings are configured in the Lightning Application Builder. Users can customize integrations with no-code development, without needing to perform code-based development.

Configuration Steps

Sheet components support both publishing and receiving dynamic interaction events. This means it's possible to both publish events from Sheet components and receive events published from other components.

The following explanation shows the steps to connect Sheet components with dynamic interaction using a custom component package that supports dynamic interaction as an example.

Installing Component Package

First, prepare a component that supports dynamic interaction. Install the following package.

https://login.salesforce.com/packaging/installPackage.apexp?p0=04tdL0000009JD7QAM

The installed package includes the following Lightning Web Component.

• Account Chart Dynamic Interaction - Displays opportunity amount trends for a specified account in a bar chart. Values are displayed as the sum of opportunity amounts by year.

  • Configurable Properties

    • RecordId - Specify the record ID of the account to display opportunity amounts for.

  • Dynamic Interaction Events and Parameters

    • Click on the Chart - Event that occurs when the bar chart is clicked

      • accountId - Record ID of the currently displayed account

      • startDate - Start date of the clicked period

      • endDate - End date of the clicked period

      • year - Clicked year

Creating Book for Sheet Component

Create a book in the Mashmatrix Sheet application to display as a Sheet component. Set it up to display the following objects and fields.

• Sheet 1: Account

  • Columns - Account Name, Billing State/Province, Billing City

• Sheet 2: Opportunity

  • Columns - Opportunity Name, Stage, Amount, Close Date, Account ID

Open the filter settings for the "Account ID" column in the "Opportunity" sheet, and set it to reference the account_id parameter from reference value selection as follows.

In the filter settings for the "Close Date" column in the "Opportunity" sheet, open the "Use Advanced Filter" menu and set it to reference the start_date and end_date parameters from reference value selection as follows.

Copy the book ID and sheet IDs from the settings screen of the created book.

Creating Application Page and Placing Components

Create a new application page from the Lightning Application Builder screen.

On the builder screen, add a "Mashmatrix Sheet" component, an "Account Chart Dynamic Interaction" component, and another "Mashmatrix Sheet" component from the component list.

In the property settings of the first Sheet component, enter the created book's ID in the "Book ID" property, specify the account sheet ID in the "Sheet ID" property, and check the "Publish Events" property.

In the property settings of the second Sheet component, enter the created book's ID in "Book ID" and specify the opportunity sheet ID in "Sheet ID".

Dynamic Interaction Configuration (Publisher Side)

First, configure the dynamic interaction for when a record is selected in the Sheet component displaying the account sheet. Set up the Account Chart component display to change dynamically when an account record is selected.

Select the Sheet component displaying the account sheet, select the "Interactions" tab from the right sidebar, and click the "Add Interaction" button within the tab.

In the interaction details screen, confirm that "Selected Record Event" is selected as the "Event", and select "Account Chart Dynamic Interaction" from "Component".

The properties of the "Account Chart Dynamic Interaction" component are displayed, so enter {!Event.recordId} in the "RecordId" property.

Save the page once and check the behavior on the Lightning page. You can confirm that when you select a record in the account sheet, the opportunity amount graph display changes according to the selected account.

Dynamic Interaction Configuration (Receiver Side)

Next, configure the dynamic interaction for when the Account Chart graph is clicked. The Sheet component displaying the opportunity sheet will receive this dynamic interaction event and change the content of the displayed list.

Return to the application builder screen again, select the Account Chart component, select the "Interactions" tab from the right sidebar, and click the "Add Interaction" button within the tab.

In the interaction details screen, confirm that "Click on the Chart" is selected as the "Event", and select the second "Mashmatrix Sheet" from "Component".

The properties of the "Mashmatrix Sheet" component are displayed, so enter account_id={!Event.accountId}&start_date={!Event.startDate}&end_date={!Event.endDate} in URL query parameter format in the "Parameters" property.

Save the page again and access the Lightning page. You can confirm that when you click on a graph in the Account Chart, the opportunities for that account in the specified period are listed.