【Salesforce】入力規則付きの画面フローの作成

2023-10-06

概要

当記事ではSalesforceの「フロー」を用いて、入力値による動的なガイドの挿入や、疑似的な入力規則を画面に配備し、ユーザーのデータ入力を支援する画面構築を紹介します！

動作イメージ

フロー全体像

・Salesforceの[設定]→フロー→画面フロー上での設定についての記事となります。

フロー設定と動作

入力値による動的なガイド の動作紹介と設定方法

今回の例ではレンタカーを借りに来たお客様の契約情報をSalesforce上に入力するシチュエーションを想定してみましょう。

動作紹介

まず、レコードを開いた際の画面が以下です。

ここから「編集」を押下して (フロー全体像の1) レコードの編集画面( フロー全体像の2 )に遷移しますが、ユーザーに対するガイドを添えることが可能です。

例えば「年齢」を22から60に変更すると、次のように警告が表示されます。

「年齢」を22から16に変更した場合も、同じように表示されます。

このように、入力値に対して画面上で動的なガイドを挿入することが可能です。

他にも「ご契約プラン」であったり、「車名」の画像などを選択した値によって動的にガイドを挿入しています。

例：ご契約プラン・・・"ミニプラン"から”スタンダードプラン”に変更したときにメッセージを変化

例：車名・・・”T社 コンパクトカー”から”T社 セダン”に変更したときに車の画像を変化

標準機能のヘルプテキストのような使い方ですが、ヘルプテキストは"？"マークを触る必要があります。
今回紹介しているガイドでは、入力値によって自動的にガイドが挿入されるので、ユーザーとしてはこちらの方がありがたいのではないでしょうか？

設定方法

「年齢」を例に挙げて設定方法をご説明します。

次のような手順で設定していきます。
①．「画面」要素を追加
②．入力用の「表示テキスト」コンポーネントを用意する
③．添えたいガイドを「表示テキスト」として任意の数で用意する
④．③で用意した「表示テキスト」にて、「コンポーネントの表示を設定」を設定する

「コンポーネントの表示を設定」に上記の設定を行うことで編集画面に動的なガイドを設定することが可能です。

フロー入力規則 の動作紹介と設定方法

もし、ガイドを無視して不適切な値が入力された場合の制御も問題ありません！
不適切な入力値として赤枠の項目を用意しました。

動作紹介

このまま更新しようとすると、、、

このようにエラー画面(フロー全体像の5)に遷移します。

“標準機能の「入力規則」を使用すれば良いのでは？" という声が聞こえてきそうですが、「入力規則」ではレコードを保存するときに初めてエラーが発生することに対して、フローの「入力規則」では画面上で不適切な値が入力された際に注意文を表示されることができ、予めデータの誤入力を防ぐことが可能です。

設定方法

「電話番号」の 入力チェック を例に挙げて設定方法をご説明します。この例では「電話番号」に数字以外の入力を認めないというチェックを入れることにします。

①．予めBoolean型の「数式」リソースを用意する
②．「電話番号」の入力チェック数式を作成する。正規表現を使って数字以外が入っている場合にTrueとなるような数式

③．「決定」要素を追加
④ ． ③で用意した「決定」要素にて任意の入力制御パターンを作成し、条件に合致した場合はエラー画面へ、それ以外の場合にレコード更新に移動させるように設定

⑤．エラー画面として「画面」要素を追加(フロー全体像の5)、任意の数のエラーメッセージを追加する

⑥．⑤で追加したエラーメッセージにて、「コンポーネントの表示を設定」を設定する
⑦．エラー画面の接続先を「編集画面」(フロー全体像の3)に設定する

上記の設定で不適切な値の制御と入力規則に抵触した項目だけを示して注意することが出来ます。

メリット・デメリット

Lightning レコードページと比較して、ご紹介した画面フローを使用するメリット・デメリットをまとめます。

メリット

Salesforce画面上で1列当たりに配置できる数が多い

Lightning レコードページの場合は、図のように2つまでしか配置できません。

画面フローを使った場合は、1列あたり4つまで配置できます。

「編集」や「保存」ボタンの拡張性が高い

Lightning レコードページの場合は、画面上には1つの「編集」「保存」ボタンしか配置することができません。

画面フローを使った場合は、任意の数のフローを用意することで複数の「編集」、「保存」ボタンを配置することが可能です。つまり更新したいセクション毎に部分的な更新が可能となります

入力値に対するリアルタイムなガイドが設定可能

「年齢」を22から60に変更した場合
Lightning レコードページの場合、レコードを保存するときに初めてエラーが発生します

画面フローを使った場合、画面上でガイドをつけることでユーザーの誤入力を防ぐことが可能です

デメリット

画面フロー内の項目数によって、画面のロードに時間がかかる

今回ご紹介した画面フローでは、読み込みが遅い時に1~2秒かかりました。

Lightning レコードページと比較すると設定箇所が多い

オブジェクトの項目追加や入力制御の追加による影響が大きく、見た目や機能にこだわる場合は実装に時間がかかってしまいます。

最後に

設定箇所が多く時間はかかりますが、Lightning レコードページでは実現できない画面に対する細かい要望を実現できる拡張性が魅力だと思います！