Salesforceの画面フローで実現した UX改善2種

# まえがき
この記事は **[Salesforce Advent Calendar 2022](https://qiita.com/advent-calendar/2022/salesforce "Salesforce Advent Calendar 2022")** の9日目の記事です。

わたしは事業会社のSalesforceシステム管理者から今年6月にSIへ転職して
現在は主にSalesCloudを中心とした導入支援や保守などをお仕事としてやっています。
社内で毎週ナレッジ共有してるんですが、フロー関連の反応がいいです。
![online_kaigi_suit_woman.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/81d02de1-af5b-638e-4542-9a20a960c4cf.png)
ということで アドベントカレンダー投稿するならフローかなと・・・
そのまま真似できるようなステップ少なめの画面フロー実装を記事にしたいと思います。

# こんな要望を叶える機能を実装しました。
#### :one: カスタムオブジェクトへの行動入力ショートカット機能
>営業がカスタムオブジェクトに活動登録する導線が多くて面倒と言っている。
ホームのダッシュボードに一覧が表示されているので、そこから活動登録したい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/db0ef109-f170-ff26-dde8-cdd3451c242c.png)

完成した機能（画像クリックすると大きな画面で見れます）　実装方法は[**こちら**](https://qiita.com/fumikomatsu/items/5aa55da5647dc7580492#one-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%B8%E3%81%AE%E8%A1%8C%E5%8B%95%E5%85%A5%E5%8A%9B%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD-1)
![Salesforce画面フロー１.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/ef556c2a-512d-6d5f-f12e-bb57fe49aa82.gif)


#### :two: 入力内容をロングテキスト(orリッチテキスト)項目に追加登録する機能
>（頻度が多い内容ではないので、別オブジェクトに切り出すほどじゃないんだけど）
取引先に関するトラブルの情報を入力する項目がほしい。
※基本0回だけど複数回発生する取引先も…何回発生するか不明だけど履歴全部見たい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/ed246c66-b999-c3bc-e897-b90eabab327f.png)

完成した機能（画像クリックすると大きな画面で見れます）　実装方法は[**こちら**](https://qiita.com/fumikomatsu/items/5aa55da5647dc7580492#two--%E5%85%A5%E5%8A%9B%E5%86%85%E5%AE%B9%E3%82%92%E3%83%AD%E3%83%B3%E3%82%B0%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88or%E3%83%AA%E3%83%83%E3%83%81%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E9%A0%85%E7%9B%AE%E3%81%AB%E8%BF%BD%E5%8A%A0%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B%E6%A9%9F%E8%83%BD)
![Salesforce画面フロー２.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/0053f340-6a1c-0ba4-79ba-ed31c2895be7.gif)


# 実装方法
#### :one: カスタムオブジェクトへの行動入力ショートカット機能
実現するには、以下の２つが必要です。
❶カスタムオブジェクトに活動登録するフローの作成
❷カスタム数式項目にハイパーリンクでフローのURLなどを設定

❶のカスタムオブジェクトに活動登録するフローは以下の3ステップです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/7c9bcf66-5030-894a-be1f-d475da443c74.png)

:::note info
**事前準備**
予め、変数でrecordId を作っておきます。やり方が分からない方は [**こちらを参照**](https://help.salesforce.com/s/articleView?id=sf.omnichannel_create_recordid.htm&type=5)
:::

URLでレコードIDをrecordIdで渡すので、それを現在のレコードIDとして割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/9b0544bb-4c4b-1bb8-8e30-0f7ba6ce2220.png)

個人的に画面いっぱいコンポーネントが広がるのが嫌なので、
今回はセクションで列幅を両端2/12指定してスペースを入れてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/35e78c7a-d9a3-af17-4528-5bc79d60e1d0.png)

必須項目は必ず割り当て　＆　今回肝心の関連先はrecordIdを割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/9c44969b-b7a6-cf4e-8f22-795f77f2ce7a.png)
以上でフローの設定は終了

❷カスタム項目にフローのURLとパラメータ([recordId](https://help.salesforce.com/s/articleView?id=sf.flow_actions_considerations.htm&type=5)と[retURL](https://help.salesforce.com/s/articleView?id=sf.flow_distribute_internal_url_retURL.htm&type=5))指定すればOKです。
カスタム項目の数式は以下のように設定しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/7ec956c6-119c-6a22-b6d3-2610c074570a.png)

```java:カスタム項目にフローを設定する書き方
            //フローのURLを設定　　　recordIdにはフローに渡すID全桁、retURLはフロー終わったあとに戻るページを指定
HYPERLINK("/flow/EventCreateShortcut?recordId="& FullId__c &"&retURL="& FullId__c , "📒登録","_blank")
```
フローのURLはここに表示されてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/064ac068-0f34-198c-e981-d78c87fbff82.png)


#### :two:  入力内容をロングテキスト(orリッチテキスト)項目に追加登録する機能
:one: と同様にカスタム項目にフローを割り当てて呼び出していますので、
こちらではフローの実装内容のみ紹介します。以下の5ステップです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/0716b7ad-55c2-05ad-55c2-a1fa66e362dc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/1faf67ab-2847-c22f-3ce7-c4dc9301c47d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/6694b410-4b75-94b9-e15c-039f075538f1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/63fdc7d0-4ef9-e28e-5433-571aa4f929c4.png)
ExstingCommentっていう変数に元々入ってた入力内容とか改行とか入力画面で入れた内容を追加していってる感じです。※brとInputTextは数式です。下で解説しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/d5569fb1-1a7f-8b55-643a-05c97aebd86b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/8da1b0c7-6ddb-604d-9dad-3df72b52569c.png)

##### :skull:ハマりどころ：改行
改行がうまくいかなくて苦労しました。
ロングテキストの場合は、改行にするために数式でbrを以下のように指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/92ac0afd-d82d-c6c8-6bde-f8b58ae24b04.png)

入力されたテキストの整形用に以下の数式を使用しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/127fa1d5-7a92-4d4d-3969-9931f5cb4f75.png)

リッチテキストの場合は直接数式に書けないので、カスタムラベルを使用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/3f64bfde-1e79-918d-9d01-981bd3be936b.png)

数式使わないでそのままラベル参照してもいいと思いますが、一応載せておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/551af21a-77aa-740e-3303-96403722b4d7.png)


# あとがき
最後まで読んでくれて、ありがとうございます。
コード書かなくてもこんな事出来るんだー！とか画面フローってやったことなかったけど
まずはこれ丸っとマネしてやってみようかなって思ってもらえたら嬉しいです。

それでは、素敵なクリスマスを！:evergreen_tree:
![merry_christmas.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237418/a55f682b-2bd8-c5eb-b413-e0904e84a235.jpeg)