CRM Analytics 選択インタラクション内容の保存・呼び出し機能 をLWCで作る

CRM Analytics ダッシュボード上で選択された、複数の選択インタラクション条件を保存し、任意のタイミングで呼び出しできる機能を、Lightning Web Component (LWC) にて作成します。モックデータを準備するところから一連の流れをご紹介します。

## CRM Analytics

### CRM Analytics での探索型ダッシュボード

#### データセット

ダッシュボードを作る前に、肝心のデータが必要です。
今回はChatGPTにモックデータを生成してもらいます。
```:リクエスト
以下条件に合うテキストデータを生成してください。
・csv形式
・モックデータ
・購買データ
・店舗は日本の店舗で全国展開
・雑貨商品を扱う
・3つの商品カテゴリーを含む
・日付はyyyy-MM-dd HH:mm:ss 形式
```

すると、下記のようなCSVデータを生成してくれましたので、csvファイルとして保存します。

```:回答
商品名,価格,購入日時,店舗名,都道府県,商品カテゴリー
ボールペン,200,2023-05-01 09:15:32,東京店,東京都,文具
キッチンスポンジ,300,2023-05-02 14:20:10,大阪店,大阪府,キッチン用品
クッションカバー,1000,2023-05-03 17:45:05,名古屋店,愛知県,インテリア雑貨
ノートブック,150,2023-05-04 11:30:18,札幌店,北海道,文具
お箸,200,2023-05-05 13:55:42,福岡店,福岡県,キッチン用品
アロマディフューザー,800,2023-05-06 16:10:21,仙台店,宮城県,インテリア雑貨
シャープペンシル,250,2023-05-07 10:25:07,広島店,広島県,文具
キッチンツールセット,600,2023-05-08 12:40:39,神戸店,兵庫県,キッチン用品
フォトフレーム,700,2023-05-09 15:05:54,横浜店,神奈川県,インテリア雑貨
付箋,100,2023-05-10 08:50:12,札幌店,北海道,文具
クッキングパン,900,2023-05-11 11:15:23,東京店,東京都,キッチン用品
デスクトップアクセサリー,350,2023-05-12 13:30:48,大阪店,大阪府,インテリア雑貨
ボールペン,200,2023-05-13 16:55:09,名古屋店,愛知県,文具
キッチンツールセット,600,2023-05-14 09:40:17,札幌店,北海道,キッチン用品
```

**アプリケーションランチャー** > **Analytics Studio** > **作成** > **データセット** > **CSVファイル**   
とクリックし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/2e195414-154a-526c-3b8f-d9785b02622e.png)

ファイルアップロードが終われば、データセットが完成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/527d95b2-a951-8d22-6c30-407174f62395.png)


#### ダッシュボード

データセットの準備ができましたので、ダッシュボードを作成していきます。

先程読み込んだデータセット: **購買データ** を、**商品カテゴリー**、**店舗名**、**商品名** の切り口で集計し、レコード明細を示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/75a15740-6629-4b33-b6f7-75467173cc0a.png)


このダッシュボード上で、例えば、商品カテゴリー別ドーナツグラフ上の **キッチン用品** を示すグラフ領域をクリックすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/ce467294-54dd-4c3e-1f9f-de8ff449aa83.png)


ダッシュボード全体が、商品カテゴリ: **キッチン用品** のデータのみに絞り込まれます。さらに、商品別棒グラフ上で、**キッチンツールセット** のグラフ領域をクリックすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/a27e5d8a-6d59-f567-f1a1-e756fd5a71ed.png)

商品カテゴリ: **キッチン用品** かつ、商品: **キッチンツールセット**
のデータに絞り込むことができます。

このようにデータの傾向を確認しながら、グラフ上で気になるデータを直感的な操作で絞り込む、まさに探索をしながらインサイトを見つけることができるのが、探索型ダッシュボードの醍醐味ですね。


## 本編

作成した CRM Analytics ダッシュボード上で選択された複数のフィルター条件を、あとから呼び出して反映できるように、選択内容を一時保存できる機能を作っていきたいと思います。

### LWC for CRM Analytics

カスタム機能を作るためには、Lightning Web Component (通称LWC)の出番です。
新規の Lightning Web Component を作ります。

#### 【カスタムLWC】 saveAndLoadSelections
ここでは、```saveAndLoadSelections``` という名前でLWCを作ります。

##### XML (1/3)
```xml:saveAndLoadSelections.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>選択インタラクション保存</masterLabel>
    <description>選択インタラクションの選択内容を保存＆呼び出します</description>
    <targets>
        <target>analytics__Dashboard</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="analytics__Dashboard">
            <hasStep>true</hasStep>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
```
|記述|意味|
|----|----|
|```<isExposed>true</isExposed>```|このコンポーネントを選択できるようになります|
|```<target>analytics__Dashboard</target>```|CRM Analytics で利用可能になります|
|```<targetConfig targets="analytics__Dashboard"><hasStep>true</hasStep></targetConfig>```|CRM Analytics ダッシュボードの状態を取得・変更できるようになります|

##### Javascript (2/3)
```javascript:saveAndLoadSelections.js
import { LightningElement, api } from 'lwc';

export default class SaveAndLoadSelections extends LightningElement {
    @api getState;
    @api setState;

    selectionJson;

    clickedSave() {
        this.selectionJson = JSON.stringify(this.getState());
    }

    clickedLoad() {
        this.setState(JSON.parse(this.selectionJson));
    }
}
```
|記述|意味|
|----|----|
|```@api getState```|CRM Analytics ダッシュボードの状態を取得する関数<br/>※LWC for CRM Analytics 固有のAPIフック|
|```@api setState```|CRM Analytics ダッシュボードの状態を変更する関数<br/>※LWC for CRM Analytics 固有のAPIフック|
|```selectionJson```|選択インタラクションの選択内容を格納する場所<br/>JSON形式のテキストデータ|
|```clickedSave```|保存ボタン押下時に実行される関数<br/>```getState```を使い、CRM Analytics ダッシュボードの状態を取得|
|```clickedLoad```|読み込みボタン押下時に実行される関数<br/>```setState```を使い、CRM Analytics ダッシュボードの状態を変更|


##### HTML (3/3)
```html:saveAndLoadSelections.html
<template>
    <lightning-layout>
        <lightning-layout-item padding="around-small" size="3">
            <lightning-button
                onclick={clickedSave}
                label="保存"
            ></lightning-button>
            <lightning-button
                onclick={clickedLoad}
                label="読み込み"
            ></lightning-button>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            {selectionJson}
        </lightning-layout-item>
    </lightning-layout>
</template>
```
|記述|意味|
|----|----|
|```<lightning-button onclick={clickedSave} label="保存"></lightning-button>```|保存ボタン・・・押下時、<br/>```saveAndLoadSelections.js``` 内の```clickedSave```を実行|
|```<lightning-button onclick={clickedSave} label="保存"></lightning-button>```|読み込みボタン・・・押下時、<br/>```saveAndLoadSelections.js``` 内の```clickedLoad```を実行|
| ```<lightning-layout-item padding="around-small">{selectionJson}</lightning-layout-item>```|```saveAndLoadSelections.js``` 内に保存された```selectionJson```を表示<br/>※デバッグ用途|

### ダッシュボードに配置

ダッシュボードの編集画面で、コンポーネントウィジェットを配置し、
作成したLightningコンポーネントを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/3df59df0-2349-806e-12ee-d2ed255e2a0b.png)

体裁を整え、最上部に配置すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/58443f9c-abe6-92c5-0ba5-c2deeab7f849.png)
ダッシュボード最上部で、保存ボタン、読み込みボタンが確認できます。

> 以下が、本コンポーネント部分
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/aa01f64e-cf74-9946-af5b-c2c7273f7329.png)


### 動作確認

それでは、問題なく期待通り動くか？確認しましょう。

まずは、商品カテゴリ: **キッチン用品** かつ、商品: **キッチンツールセット**
のデータに絞り込んでおきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/ba3c07c1-a882-280e-683f-f037a976f769.png)

この状態で、保存ボタンをクリックすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/ae619da6-a451-14ce-36ed-3726d91fc352.png)

読み込みボタンの右側に、現在の CRM Analytics ダッシュボードのstateがjson形式で確認できます。（デバッグ用）
```json
{
  "pageId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "state": {
    "datasets": {},
    "sObjects": {},
    "reports": {},
    "cdpObjects": {},
    "steps": {
      "Column6_2": {
        "values": [],
        "metadata": {
          "groups": [
            "Column6"
          ]
        }
      },
      "lens_9": {
        "values": [],
        "metadata": {
          "groups": []
        }
      },
      "lens_7": {
        "values": [],
        "metadata": {
          "groups": []
        }
      },
      "lens_6": {
        "values": [],
        "metadata": {
          "groups": []
        }
      },
      "lens_4": {
        "values": [],
        "metadata": {
          "groups": [
            "Column4"
          ]
        }
      },
      "lens_1": {
        "values": [
          "キッチン用品"
        ],
        "metadata": {
          "groups": [
            "Column6"
          ]
        }
      },
      "lens_2": {
        "values": [
          "キッチンツールセット"
        ],
        "metadata": {
          "groups": [
            "Column1"
          ]
        }
      }
    }
  }
}
```
> ```"キッチン用品"``` ```"キッチンツールセット"``` の情報が連携できていることが確認できます


一度、すべての選択を解除し、フィルターをかけずに全件表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/075ebf50-6ffa-0ab5-100d-2c58161872aa.png)

この状態で、読み込みボタンをクリックすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112543/1222db88-cf9e-4316-b144-29963631f16a.png)

きちんと保存ボタンを押したときのフィルター条件、商品カテゴリ: **キッチン用品** かつ、商品: **キッチンツールセット** が反映されました！

以上、LWC を埋め込むことによる、CRM Analytics を機能拡張できる例として、一連の流れをご紹介しました。

他にも、
 - 独自のグラフ、独自のUIでデータを表現する
 - 絞り込んだデータをLWCで受け取って、リストとして保存する

等、アイデアは膨らみますね。

LWC for CRM Analytics に興味ある。もう少し深掘って検証したい。
という方向けにも、サンプルアプリがGithubで公開されてます。  
是非お試しください。


## リファレンス

##### 【Githubリポジトリ】 CRM Analytics Template and Lightning Web Components Examples
https://github.com/forcedotcom/sfdx-analytics

##### Lightning Web Components in CRM Analytics Dashboards
https://developer.salesforce.com/docs/atlas.en-us.bi_dev_guide_lwc_in_db.meta/bi_dev_guide_lwc_in_db

##### Configure a Component for CRM Analytics Dashboards
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_analytics_dashboard