FAXで注文書受信するのと同じレベルが欲しい

本記事では、SalesforceのExperience Cloudと画面フローを活用して、発注元ごとに異なる簡易注文フォームを提供する仕組みを構築する手順を紹介します。

IT界隈では見かける機会が少ないかもしれませんが、B2B取引の現場ではFAX注文が今も主流のケースが多く見られます。

株式会社◯◯ 御中
以下の注文をお願いします。

注文品目名	数量
鮭おにぎり	20個
いくらおにぎり
おかかおにぎり
梅干しおにぎり	5個
お茶 500ml	255本

株式会社　☓☓

色々と言いたいことは皆さんあると思うのですが、これが日本の実態です。
そして、この注文書のフォーマットは数量をブランクにした状態のExcelを受注側が作っておいて、
発注側企業は数量だけ手書きして入力するという流れです。
発注側が普段注文する商品だけ掲載しておいてあげるなんて運用が多いですね。
つまり顧客毎に注文書が違います。

さて、発注側がこの状態でいきなりweb注文とか伝えても
「FAXのが楽だった」
「載っている商品が多すぎてどれだかわからない」
と言われ、FAXどころか電話注文になってしまうケースも。

そこで「ほぼFAX注文と同じ」状態の簡易注文フォームをSalesforce上に作ってみました。

そしてこのフォームではURLパラメータの値を読み取って、発注先毎に違う注文フォームを提供できるようにしています。注文フォームはカスタムオブジェクトで用意しますので、ビジネスユーザーが取引先毎に作成・編集が可能です。

実際に触ってもらったほうがわかるかと思いますので、送信だけできるサイトを作りました。

おにぎり大好き株式会社用の注文フォームが表示される。
https://resourceful-hawk-dzyq4d-dev-ed.trailblaze.my.site.com/s/order?ordertoken=a00WU00000jaWh0YAE

パン大好き合同会社用の注文フォームが表示される
https://resourceful-hawk-dzyq4d-dev-ed.trailblaze.my.site.com/s/order?ordertoken=a00WU00000jatIbYAI

この構成はセキュリティ上の懸念があります。
パラメーターの値を書き換えてたまたま他の会社のSalesforceIdを開いてしまえばどの会社が何の注文をしているのかがわかってしまいます。また、SalesforceIdをそのまま露出するのもあまりよろしくないでしょう。
セキュリティを考えればゲスト公開するのではなく、ログインして利用する形式にするのがベストでしょう。
しかしながら、弥生会計が運営しているMisocaの注文フォームなどは当記事と同様の構成をしております。
注文テンプレートの会社名も非表示にしてしまえば、「どこかの会社がいつも注文する商品一覧」というテンプレートが流出するだけであり、実施する会社によっては問題ないと判断するかもしれません。
※実際に懸念あると判断した会社もあれば、他サービスと同じ構造だから問題無しとした会社もあります

それではこれ以降構築方法について説明します。

技術紹介

業務とシステムの流れの概要

このブログでは顧客側が注文を送信ところまでの技術を紹介します。

カスタムオブジェクトの作成

作成するオブジェクトは２つ。

テンプレート(注文フォームのヘッダー)
テンプレート明細(注文フォームの明細行)

テンプレート
項目名	説明
テンプレート名	テンプレートの名前です。自動連番でもOKです
識別名	オプションです。SalesforceIDを表に出したくない場合は作成してください。使用する場合はユニークにします。

テンプレート明細
項目名	データ型	説明
テンプレート名	参照(テンプレートオブジェクト)	テンプレートレコードを参照します。
明細名	テキスト	明細行に表示する内容です。商品名が入ります。
数量	数値	発注者が入力をするために項目として作成しておきます。
商品Id	参照(商品オブジェクト)	現時点ではオプションです。後工程で発注者が入力した内容を商談や注文オブジェクトに転記する場合は必要になります。

オブジェクトが出来ましたら、後ほどのフローで利用できるようにサンプルレコードを作成しておいてください。

フローの作成

1画面目でURLパラメーターの値をフローに取り込みし、
その値を基にテンプレート及びテンプレート明細のレコードを取得しています。
2画面目が実際の注文フォームです。

以降では実際の構築内容を記載します。

始めにテキスト変数を作成します。
ここにはExperience cloud側でテキスト変数にURLパラメータの値が入るように後ほど行います。
"入力で使用可能"にチェックをします。

作成する変数
変数名	データ型	コレクション	入力で使用可能
token	テキスト	FALSE	TRUE

1画面目にはテキストコンポーネントを設置します。
デフォルト値は事前に作成した"token"変数を設定します。
これにより、

URLパラメータが変数に入る
(今回)変数が画面フローの入力値に自動で入る

までが行われます。

次にレコードの取得です。
今回はURLパラメータにSalesforceIdを用います。
検索条件の項目にIdを選択し、"token"の値で検索されるようにします。
これにより以下が行われます。

URLパラメータが変数に入る
変数が画面フローの入力値に自動で入る
(今回)変数の値とSalesforceIdが一致するテンプレートレコードを取得

テンプレート明細も同様の手順で取得します。但し、こちらでは複数レコードを取得します。
これにより以下までが行われました。

URLパラメータが変数に入る
変数が画面フローの入力値に自動で入る
変数の値とSalesforceIdが一致するテンプレートレコードを取得
(今回)変数の値とSalesforceIdが一致するテンプレートレコードを全て取得

次に注文フォーム画面を用意します。
ここは繰り返しコンポーネントの利用方法がわかれば苦労しないと思います。
繰り返しコンポーネントの利用方法についてはわかりやすいブログを記載いただいている方々がいらっしゃいます。
※私はこちらの記事が好きですhttps://sfdctechsite.com/2023/12/17/spring24_repeater/

これでフロー側の設定は終わりです。
最後の画面はただの送信確認画面ですので省略します。

Experience cloudに画面フローを設定

Experience cloudにページを追加し、フローコンポーネントを設置します。
フロー側で設定した変数(今回で言えば"token")の入力欄が表示されます。
ここに{!パラメーター名}の形式で入力します。
画像のサンプルでは{!ordertoken}としています。
この設定をすることで以下のようにパラメーターを入れたURLから値を読み取れます。

https://Experiencecloudサイトのフローが埋め込まれたページ?{!パラメータ名}=XXXXパラメーターの値

これで設定完了です。
以下が実現します。
0. (今回)フローがURLパラメーターを認識する

URLパラメータが変数に入る
変数が画面フローの入力値に自動で入る
変数の値とSalesforceIdが一致するテンプレートレコードを取得
変数の値とSalesforceIdが一致するテンプレートレコードを全て取得

あとはゲストが使用できるように共有設定やフローの共有設定等をしてください。
これでパラメーター付きのURLにアクセスし、専用注文フォームが開き送信するところまで実装できます。

まとめ

FAX文化にも対応した注文フォームをSalesforceで再現可能
URLパラメーターと画面フローを使えば、顧客専用フォームがノーコードで実現
セキュリティには注意（IDの露出は業務要件に応じて判断）

今後は「注文レコード作成〜商談登録〜通知」の処理も記事化できればと思っています。
Qiitaでフォローいただければ、更新時にお知らせが届きます！