2024HapInSアドベントカレンダー 20日目 oobaです！
案件でSalesforceの担当になったのですが、あまり実装記事があがっていない印象だったので、少しでもチカラになれれば！と思って、執筆しています。
今回のゴール
某保険会社の5分で見積！みたいなフォームをsalesforceで作成する
事前準備
・salesforce環境
全くの初めての方は以下からDeveloper Edition(いわゆる練習環境)のサインアップを行うことができます。
https://developer.salesforce.com/signup?d=70130000000td6N
・単価を登録しておくためのオブジェクト
※単価のマスタテーブルのこと。salesforceではテーブルのことをオブジェクトと呼びます。
(今までコーディングやっていた人にとっては用語がすっごいややこしいです・・・。)
使用する機能
・Flow (UIや処理を作成するイメージ)
・Sales Cloud (データを格納しておくところ)
※上記２つの説明はあくまで簡単なイメージのために記入しています。
実際の手順
単価表オブジェクトの準備
まずは、「単価表」オブジェクトを作成します
ちなみに、標準オブジェクトをホーム画面のタブに表示させるにはちょっと一手間かかりますのでわからない方向けに残しておきます。
設定画面のサイドバーの検索に「タブ」と入力し、「タブ」を選択します。そして、カスタムオブジェクトにて「新規」ボタンをクリック
必要事項を設定して保存を押してください。
※2ページ,3ページ目はとりあえず何も気にせず保存してしまってOKです。
では、ホーム画面に単価表オブジェクトを表示させていきましょう。
ペンマークをクリック
「項目をさらに追加」ボタンをクリック→すべてから検索欄に「単価表」と入力すると検索がヒットするため、設定保存すると、タブに単価表オブジェクトが表示されるようになります。
データもいくつか追加して単価表は以下のように用意しました。
これで単価のマスターは完成です！
次は見積フォームを入力した人のデータを蓄積していくための受け皿となるオブジェクトを用意していきます。
見積フォーム送信者オブジェクトを作成
単価表オブジェクトを作成した時と同じ方法で、「見積フォーム送信者」オブジェクトを作成し、タブに表示させます。
※Salesforceの一般的なMAの考えとしては、このようなフォームを送った人たちを見込み客とみなし、標準オブジェクトのリードに登録すべきなのですが、本記事はマスタの作成やFlow周りを中心にお伝えしたいため、この辺の考え方は一旦無視します🙏🏻
オブジェクトの具体的な作成までは割愛しますが、フォーム送信者の個人情報と、それぞれの商品個数と合計金額を登録できるような形でテストしていきます。
ではこの２つのオブジェクト作成でテスト見積フォームを作成する準備ができましたので、Flow作成に進んでいきます。
Flowの作成
それでは実際にフローの作成に入っていきます。
「画面フロー」で作成していきます。
まず、結論ファーストで完成のフロー処理を添付します。
※全体を1枚で写そうとしたらかなり小さくなってしまったので頑張って拡大していただけると・・・！
こちらのフローは大きく分けて４つの段階で構成されています
1. 実際の画面(フォーム)の作成
2. マスタからそれぞれの商品の単価を取得する
3. 結果画面として描画
4. 見積フォーム送信者オブジェクトにレコード登録
順に詳細を説明していきます
1の実際の入力フォームについてです
以下のような配置にしており、「セクション」のコンポーネントを使って１行の複数個のコンポーネントを配置することができています
各項目は以下の形式で入力することができます
・郵便番号：テキスト
・電話番号：テキスト
・名前：テキスト
・メールアドレス：メール
・各商品：数値
2の各商品の単価の取得方法についてです。
取得方法は以下のようにします
・オブジェクトから取得 → 「単価表」
・絞り込み → 「Name」が「(商品名)」と一致
※(商品名)のところに各商品名を入力してください。
ここで察しの良い方は気づくかと思いますが、今回は商品の数分、単価の取得ロジックを設定します。(4つ)
3は見積結果表示画面についてです。
ココが１番難しいと思いますので頑張りましょう・・！
まずは実際の設定はこちら
テキストを表示するはずなのに、何だこの記号らは・・・？
となっても安心してください。全て解説します。
まず、フォームを実際に入力するとどのような画面になるのか見てみましょう。
デバッグ画面で試しに入力したものになりますが、「りんごが１つで250円です」というような描画になることがわかります。
では、実際の設定画面と、実際の見積結果画面を比較してみましょう
まず、商品の横に書かれている"{!form_ "から始まっているものは最初の入力フォームで入力された個数が入るようになっています。
※初見のために、その値をどうやって導くかを簡単に解説しますが、テキストを設定するところに、「リソースを挿入」と書かれた枠から予測変換のように導き出すことができるので非常に簡単です
イメージ例：
では、price~と書かれている部分をせっていしていきたいと思います。
こちらは取得してきた各商品の単価と、フォームで入力された各商品の個数を掛け算した答えが載っているイメージです。
それぞれ数式の変数を作成してあげることで実現が可能です。
・リソース種別を「数式」で設定
・データ型を「通貨」で設定
・数式のリソースを挿入を駆使して、取得してきた商品の単価と、フォームで入力された個数を掛け算する
１つ商品の設定例：
・各商品分作成したら最後に合計版の数式も作成する
参考：
これにて、結果表示は完成です⭐️
最後に4のデータ挿入です
あとはレコード作成の処理をおいて、「手動」作成を選択、「見積フォーム送信者」オブジェクトに対して、各項目をマッピングさせてあげれば完成です
※各項目の箱をクリックするとちゃんと予測変換のように値の候補が出てくるので、直接入力ではなく、候補から探すとタイプミスも防げます。
これでひととおり完成です！！！
このフォームでは最低限の作成をおこないました。
値段が変わった場合は、単価表オブジェクトを直接編集してあげることにより、見積フォームの単価も自動的に更新されるのでいいですね！
ちなみに、フォームを送信すると実際にレコードに以下のように追加されています。
おわりに
今回は、SalesforceのFlowを使って簡単な見積フォームを作成しました。
サイトとして公開したい場合は、Experience Cloudを使ったり、フォーム画面を作成するときに動的なコンポーネントや標準のものだと網羅しきれない場合はLWCといってコーディングをしてコンポーネントを作成するなど、活用は無限大にあります。今回の見積フォームの作り方の考え方のような部分が何かの役に立てたら幸いです！またsalesforce周りのナレッジは積んで行けたらと思います。それではごきげんよう！！
