tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightningコンポーネントで行動タイムライン機能をつくってみました - Part 1

Salesforceの本番組織で動かすためにLightningコンポーネントで行動タイムライン機能をつくってみました。下記の動画みたいなやつです。


Lightningコンポーネントは2015年頃に発表されましたが、仕様がけっこう頻繁に変わっていたのと開発するときにはコンポーネントよりもページの機能が必要になっていたので、基本はVisualforceとApexの開発で対応できていました。ということで今回がLightningコンポーネントの本番運用第一号でした。


ちなみに今回Lightningコンポーネントの開発が必要になったのは標準の詳細ページ内に埋め込む必要がでてきた為です。

f:id:tyoshikawa1106:20191104120106p:plain


Visualforceページも埋め込むことは可能ですが、やはり標準ページ内で利用するのであればLightningコンポーネントの方が一体感があって良いと思います。

Lightningコンポーネントが必要になった理由

取引先や商談レコードには電話や訪問などの情報を活動レコードとして登録するようにしています。できれば標準の活動コンポーネントを利用する形で運用したかったのですが、下記の問題が解決できませんでした。

  • 特定のレコードタイプで絞り込み
  • 件名と説明を常に表示

特に特定のレコードタイプで絞り込みの方が外せない要望でした。他システムとの連携が必要なため営業的な活動は専用のレコードタイプを用意して管理しています。標準の活動コンポーネントだとそうした営業用の活動一覧という表示はできなかっため今回はLightningコンポーネントを開発するという形で対応しました。

件名と説明を常に表示する部分は細かい部分ですがページを開くたびに折りたたみを解除するのが少し面倒とのことだったので合わせて対応してしまいました。

Lightningコンポーネントの仕様

配置可能箇所

取引先、商談、リードのオブジェクトでの使用を想定していますが、コンポーネントとしてはカスタムオブジェクトへの配置も可能なようにつくってあります。(WhatIdとWhoIdを取得条件とするだけなので普通につくればそうなるとは思いますが)

シンプルなレイアウト

活動にはいくつか項目を用意していますが、一覧表示で確認場合には件名と説明項目が表示されていれば問題ないという要望を受けました。また表示項目が増えると縦に長くなるので少ないほうが良いという理由もあるみたいです。そこで下記のようなレイアウトにしました。なるべく標準コンポーネントと見た目を合わせつつ、開始時間と終了時間がわかりやすいように調整したり、曜日も表示されるようにしてみました。
f:id:tyoshikawa1106:20191104121435p:plain


要望としては少ない項目を表示、必要なら詳細ページで確認するという話を受けましたが、将来的に他の項目も表示したいという要望が出てくる気がしました。そのため、詳細を表示というリンクを追加してクリックすると場所などの項目も追加で表示されるという仕組みを追加しておきました。
f:id:tyoshikawa1106:20191104122223p:plain

更新リンク

標準の活動コンポーネントなどで活動レコードを編集したりした場合にLightningコンポーネント側も自動で反映されるかなと少し思っていましたが、そこまでは反映されませんでした。そこで更新リンクを追加してクリックされたら最新情報が表示されるという形で対応しました。基本的にLighntingコンポーネント側で記録を見るのは入力者以外の人が多いのでこの仕組みでも問題はなさそうでした。

取引先配置時の考慮

標準の活動コンポーネントでは、取引先の場合に商談など子オブジェクトの活動も表示できる仕組みとなっています。運用時の用途的にも必要な仕組みだったためLightningコンポーネント開発時にも取り入れました。

f:id:tyoshikawa1106:20191104122908p:plain

Lighntingアプリケーションビルダーでのカスタマイズ

表示件数は一旦200件にしてありますが、運用してみて上限を増やしたりなどの変更する必要がでてくると思います。せっかくLightningコンポーネントで開発するのでアプリケーションビルダー側の設定で変更できるようにしました。

f:id:tyoshikawa1106:20191104123538p:plain:w200


Lightningコンポーネント開発時に考慮したのはだいたいこんな感じ。あとはタイムラインレイアウトにする際に標準の行動アイコンと同じだと区別が付きづらいので、違うアイコンに変更したりもしてみました。

Lightningコンポーネント開発時に参照したもの

今回つくったコンポーネントはシンプルな機能ですが、Lightningコンポーネント開発方法自体を思い出す為に過去に調べたことやWeb検索などで調べながら進めました。主に下記のリンク先です。


その他にはこちら。Winter'20のリリースノートです。Lightningコンポーネントにはuiタグという専用タグが用意されていますが、lightningタグに差し替わるという話が数年前にでていました。開発時にlighntingタグの情報も見つけられなかったため、uiタグで開発を進めていたのですが、サポート終了のアナウンスが出ていることを教えてもらいその情報で検索したところ、リリースノートに辿り着きました。リンク先ではuiタグをどのように変更すればいいかまでまとめられているので便利だと思います。