「UNOFFICAL SF」で公開されているフローを試してみた＆ アレンジしてみた

#はじめに
「UNOFFICAL SF」というサイトをお存じでしょうか。
海外有志による非公式のSalesforceコンテンツが公開されているサイトです。
こちらのサイトにはフローで使えるAuraコンポーネントや
LightningWebコンポーネントがパッケージングされて多数公開されています。
しかも無料！
トップページに掲載されている通りあくまで非公式なので、
トラブルが起きた際のリスクは背負わなければなりませんが、
無料でフローの機能を拡張できるのはかなり大きいです。
さらに非管理パッケージなので、コーディングに自信があれば
カスタマイズ可能なのも魅力的。

今回は公開されているパッケージが数多ある中でいくつか触ってみたうち、
個人的に最もおススメだと感じた、
**「Signature Capture」**というパッケージと、
このパッケージを使ったアレンジ例を紹介したいと思います。
UNOFFICAL SFへはこちら：https://unoffialsf.com/

#「Signature Capture」というパッケージを試してみた
##どんなパッケージ？
パッケージを導入し、フローを作成するだけで署名機能がすぐ使えます！
画面はこんな感じ↓

タイトルを入力して保存するとその署名画像をレコードに紐づけることが可能です。
しかも、タッチ操作にも対応しています。

#使い方
##１ 導入手順

1. トップページの「EXTEND　FLOW」から「Screen Components」をクリックします。

2.「Signature Capture」をクリックします。

3.「Installation」をクリックします。

　するとSalesforce環境へパッケージをインストールする画面が開きますので、
　インストールの方法を選択してインストールを実行してください。
　「インストール完了！」と表示されればフロー内で使用できるようになります。

#2 署名画面フロー作成手順

1. フロー設定画面まで移動したら「新規フロー」ボタンをクリックします。

2. 画面フローを選択して「作成」ボタンをクリックします。

3. 画面左部"ツールボックス"から「画面」を右側へドラッグ&ドロップします。 画面フローの設定が開きます。

1. 画面左部の画面コンポーネント一覧から
   カスタム「SignatureCaptureCMP」をクリックします。

2. 画面右側で「SignatureCaptureCMP」の設定を行います。

　・API参照名を設定します。 　・「Record Id」入力欄をクリックすると使用できる変数の候補のリストが 　　 表示されます。 　　 ここでは「＋新規リソース」をクリックして「recordId」という 　　 名称のテキスト型の変数を作成して設定します。 　　 作成する際に「フロー外部の可用性」で"入力で使用可能"に 　　 チェックを入れておきます。 　　**★このrecordIdという変数に紐づけ先のレコードIDが入力されます。**

1. 次にヘッダー部をクリックし、その画面の表示ラベルとAPI参照名を設定して「完了」ボタンをクリックします。

2. 開始アイコンの〇から矢印が伸びるようになるので「画面」へドラッグ&ドロップします。

3. 画面右上の「保存」ボタンをクリックします。
   フロー自体の表示ラベル名とAPI参照名を入力した後、
   さらに「保存」ボタンをクリックします。

4. 警告がでますが、確認した限り動作に支障はありませんでしたので、
   無視して「有効」ボタンをクリックします。

**これにてフローの作成は完了です。**

　
#3 試してみる

1. レコード詳細画面に表示させるにはこのフローを呼び出す
   アクションを作成し、レイアウトに配置します。
   ※今回は取引先で試してみます。ファイルに添付されるのであらかじめ
   「メモ&添付ファイル」関連リストを出しておきましょう。

2. 署名を記入してみます。
   　「Save as...」　にはファイルのタイトルを設定できます。

1. 「Update and Save」ボタンをクリックします。
   「Upload Successful!」と表示されたら成功です。「完了」ボタンをクリックして画面に戻ってみましょう。

1. 「メモ&添付ファイル」関連リストに先ほど入力した署名画像が.png形式で保存されています。

1. 背景が透過されているので見づらいですが、確かに先ほど入力した内容が保存されています。

#4 アレンジしてみた
先ほどのフローをアレンジして、この署名画像をレコード詳細画面に直接表示させてみました。
こんな感じ↓

1. カスタム項目を2つ作成します。
   ① ファイルのIDを保存する用のテキスト項目を作成します。
   ② 画像を表示させる用の数式項目を作成します。
   　IMAGE関数を使って画像を表示させましょう。
   　関数の第1引数は以下とします。
   　"/sfc/servlet.shepherd/version/download/" + Signature__c
   　第2引数には署名画像がまだない場合に備えて　　　　　　　　　　　　
   　**"署名はありません"**とします。
   　第3、第4引数には表示されるサイズを設定できます。
   ③ 作成したら、数式項目だけレイアウトに配置します。

2. 先ほどのフローを改修します。
   ① **「画面」をクリックし、画面内「SignatureCaptureCMP」を
   　クリックします。
   ② 画面右側、「SignatureCaptureCMP」の設定でスクロールダウンします。
   　すると"選択した変数に出力値を保存"**というセクションがあるので
   　「ContentDocument Id」入力欄をクリックし、「＋新規リソース」を
   　選択します。
   ③テキスト型の変数を作成します。
   　API参照名はお好きな名称を設定してください。
   　また、この変数はフロー外部で使用しないので"フロー外部の可用性"に
   　チェックせず完了します。
   ④ContentDocument Idに変数がセットされたら
   　「完了」ボタンをクリックします。
   ★このContentDocument Idに設定した変数に署名画像のIDが出力されます。
   ※設定参考イメージ

⑤「レコードを取得」を右画面にドラッグ＆ドロップします。
　　表示ラベルとAPI参照名を設定し、
　　オブジェクトや絞込条件は以下のキャプチャのようにします。
　　
　　さらに、レコードデータの保存方法を
　　「項目を選択して後はSalesforceに任せる」を選択します。
　　変数に保存するコンテンツバージョン項目は「ID」となっていることを
　　確認したら「完了」ボタンをクリックします。

　⑥レコードを更新をドラッグ＆ドロップします。
　　表示ラベルとAPI参照名を設定し、
　　「レコードを識別する条件を指定し、項目を個別に設定」を選択します。
　　残りは以下のキャプチャのように設定し、「完了」ボタンをクリックします。
　　

　⑦画面→レコードを取得→レコードを更新と矢印が伸びるよう
　ドラッグ＆ドロップします。

　⑧最後に「別名で保存」ボタンをクリック ⇒
　「保存」ボタンをクリックして完成です。
　　忘れずに「有効化」しましょう。
　
##5 動作確認
　　①改修直後なので、まだ署名画像は表示されていません。
　　

　　②署名を書き、保存します。
　　　※保存したあと「次へ」ボタンを押すことが必要です。
　　

　　③無事レコードに表示されました。
　　

##あとがき
いかがだったでしょうか。
通常、署名画面の開発にはそこそこ手間がかかりますが、
このパッケージを使えば簡単に署名画面を利用することが可能です。
また、冒頭でも述べたように、非管理パッケージとして公開されています。
このパッケージはAuraコンポーネントで構成されていますので、
中身を編集することで署名記入欄のサイズやボタンの名称も変更可能です。

他にも有用なパッケージがたくさんあるので、いろいろ試してみたいと思います。