動的インタラクションによるコンポーネント間連携

SheetコンポーネントはLightningプラットフォームの「動的インタラクション」機能に対応しています。これにより、同じく動的インタラクションに対応したLightningコンポーネントをつなぎ合わせて、ユーザーの操作に応じた動的な画面構成やコンポーネント間の連携を簡単に実現できます。

動的インタラクションの設定はLightningアプリケーションビルダー上で行います。ユーザーはコードによる開発を行う必要なく、ノーコードで連携をカスタマイズすることが可能です。

現在、動的インタラクションが利用できるのはLightningアプリケーションページのみです。ホームページおよびレコードページには対応していません。これはLightningプラットフォームの制約です。

設定手順

Sheetコンポーネントは、動的インタラクションイベントの発行と受信の両方に対応しています。つまり、Sheetコンポーネントからイベントを発行することも、他のコンポーネントから発行されたイベントを受け取ることも可能です。

以下の説明では、動的インタラクションに対応したカスタムコンポーネントのパッケージを例として、Sheetコンポーネントと動的インタラクションで接続する手順を示します。

コンポーネントパッケージのインストール

まず動的インタラクションに対応したコンポーネントを用意します。以下のパッケージをインストールします。

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

Sandbox環境にインストールする場合は、上記のURLの login.salesforce.com の部分を test.salesforce.com に置き換えてください

インストールされたパッケージには、以下のLightnig Webコンポーネントが含まれています。

  • Account Chart Dynamic Interaction - 指定された取引先の商談金額の推移を棒グラフで表示します。商談の金額を年ごとに合計した値が表示されます

    • 設定可能なプロパティ

      • RecordId - 商談金額を表示する取引先のレコードIDを指定します。

    • 動的インタラクションイベントとパラメーター

      • Click on the Chart - 棒グラフをクリックした際に発生するイベント

        • accountId - 現在表示している取引先のレコードID

        • startDate - クリックした期間の開始日

        • endDate - クリックした期間の終了日

        • year - クリックした年

このコンポーネントは独立して提供されているコンポーネントであり、Mashmatrix Sheetに依存して開発されたものではないことに注意してください。つまりMashmatrix Sheetとは全く関係のない製品で提供されているコンポーネントであっても、そのコンポーネントが動的インタラクションに対応していればSheetコンポーネントと組み合わせて利用できる可能性があります。

Sheetコンポーネント用ブックの作成

Sheetコンポーネントとして表示するために、Mashmatrix Sheetアプリケーションでブックを作成します。以下のオブジェクトおよび項目が表示できるようにします。

  • シート1: 取引先

    • 列 - 取引先名、都道府県（請求先）、市区町村（請求先）

  • シート2: 商談

    • 列 - 商談名、フェーズ、金額、完了予定日、取引先ID

「商談」シートの「取引先ID」列のフィルタ設定を開き、参照値選択から以下のように account_id パラメーターを参照するように設定します。

「商談」シートの「完了予定日」列のフィルタ設定で「高度なフィルタを利用」メニューを開き、参照値選択から以下のように start_date 、end_date パラメーターを参照するように設定します。

作成したブックのID、およびシートのIDを設定画面からコピーしておきます。

アプリケーションページの作成とコンポーネントの配置

Lightningアプリケーションビルダー画面から、新規にアプリケーションページを作成します。

ビルダー画面上で、コンポーネントの一覧から「Mashmatrix Sheet」コンポーネント、「Account Chart Dynamic Interaction」コンポーネント、そしてもう１つ「Mashmatrix Sheet」コンポーネントを追加します

1つめのSheetコンポーネントのプロパティ設定で、作成したブックのIDを「Book ID」プロパティに入力し、「Sheet ID」プロパティに取引先シートのIDを指定します。また「Publish Events」プロパティをチェックします。

2つめのSheetコンポーネントのプロパティ設定には、作成したブックのIDを「Book ID」に入力し、「Sheet ID」に商談シートのIDを指定します。

動的インタラクションの設定(発行側)

まず、取引先シートを表示しているSheetコンポーネントでレコードが選択された時の動的インタラクションを設定します。取引先レコードの選択時にAccount Chartコンポーネントの表示が動的に変化するように設定します。

取引先シートが表示されているSheetコンポーネントを選択し、右側サイドバーから「インタラクション」タブを選択し、タブ内の「相互関係を追加」ボタンをクリックします。

相互関係の詳細画面で「イベント」として「Selected Record Event」が選択されていることを確認し、「コンポーネント」から「Account Chart Dynamic Interaction」を選択します

「Account Chart Dynamic Interaciton」コンポーネントのプロパティが表示されるので、「RecordId」プロパティに {!Event.recordId} と入力します。

一旦ページを保存し、Lightningページ上での動きを確認します。取引先シートのレコードを選択すると、商談金額のグラフ表示が選択された取引先にあわせて変更されるのが確認できます。

動的インタラクションの設定(受信側)

続いて、Account Chartのグラフがクリックされたときの動的インタラクションを設定します。商談シートを表示するSheetコンポーネントはこの動的インタラクションイベントを受け取って表示するリストの内容を変更します。

再びアプリケーションビルダー画面に戻って、Account Chartコンポーネントを選択し、右側サイドバーから「インタラクション」タブを選択し、タブ内の「相互関係を追加」ボタンをクリックします。

相互関係の詳細画面で「イベント」として「Click on the Chart」が選択されていることを確認し、「コンポーネント」から2つ目の「Mashmatrix Sheet」を選択します。

「Mashmatrix Sheet」コンポーネントのプロパティが表示されるので、「Parameters」プロパティにURLクエリパラメータ形式で account_id={!Event.accountId}&start_date={!Event.startDate}&end_date={!Event.endDate} と入力します。

ここで指定しているURLクエリパラメータの名前は、シート作成時にフィルタの参照値として指定したパラメータ名と一致している必要があります。

再度ページを保存し、Lightningページにアクセスします。Account Chart内のグラフをクリックすると、その取引先の指定期間の商談がリストされるのを確認できます。

PreviousMessage Channel APIによる連携アプリケーションの開発NextVisualforceを利用したシートの埋め込み

Last updated