> For the complete documentation index, see [llms.txt](https://docs.mashmatrix.com/mashmatrix-sheet/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mashmatrix.com/mashmatrix-sheet/customization/wiring_components_using_dynamic_interaction.md).

# Wiring Components using Dynamic Interaction

Sheet components support the Lightning platform's "[Dynamic Interaction](https://help.salesforce.com/s/articleView?id=platform.dynamic_interactions_overview.htm\&type=5)" 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.

{% hint style="info" %}
Currently, dynamic interactions are only available for Lightning application pages. Home pages and record pages are not supported. This is a Lightning platform limitation.
{% endhint %}

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

{% hint style="info" %}
When installing in a Sandbox environment, replace the `login.salesforce.com` part in the above URL with `test.salesforce.com`
{% endhint %}

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

{% hint style="info" %}
Note that this component is provided independently and is not developed as a dependency of Mashmatrix Sheet. This means that even components provided by products completely unrelated to Mashmatrix Sheet can potentially be used in combination with Sheet components if those components support dynamic interaction.
{% endhint %}

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

<figure><img src="/files/I6LQ2ic9gzzgoWPdVeCT" alt="" width="563"><figcaption></figcaption></figure>

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.

<figure><img src="/files/sTZcznEUbH04HSIrSyby" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/vqsYo68zLO5zZRsAuqHw" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8ERQ6Pe56yjeIHDVpUfC" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/DRvBV0VAi0t40M08S8TG" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/iOAWRypo97g5LNuHB4Qn" alt="" width="358"><figcaption></figcaption></figure>

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.

<figure><img src="/files/qFIlwAv8LYJNOKvhFM9P" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/78sLWSMxhiFg1YY7ipq8" alt="" width="375"><figcaption></figcaption></figure>

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.

<figure><img src="/files/ndgY7Ax3SgOkCdxrWcFe" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
The URL query parameter names specified here must match the parameter names specified as filter reference values when creating the sheet.
{% endhint %}

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.

<figure><img src="/files/wwyfuBPPlCcMH8Bqoggo" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.mashmatrix.com/mashmatrix-sheet/customization/wiring_components_using_dynamic_interaction.md?ask=<question>
```

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.