top of page

【応用編】Salesforce画面フローで生産性UP!リード情報を段階的に入力する画面フローを作ってみた

  • hinoue2826
  • 8月29日
  • 読了時間: 8分
ree


目次




   はじめに


Salesforceの「フロー」はビジネスプロセスを自動化するノーコード・ローコードツールですが、「画面フロー」はその中でもユーザーに提示する「画面」を開発することなく、クリックベースで簡単に実装することが可能です。


例えば、新規顧客の登録プロセスを考えてみましょう。営業担当が顧客情報を入力する際、必要な情報を漏れなく、かつ順序立てて入力してもらうために画面フローを活用できます。


標準UIでは、レコード新規作成時にページレイアウトで定義したレイアウトをもとに、ユーザーが情報を登録していくことになります。

ここで画面フローを構築すると、

・入力フォームを段階的に表示する

・入力内容に応じて次のステップを分岐させる

といったことができるため、少し複雑な業務フローでもユーザーが直感的に入力できるようになります!


…というわけで、今回は、リード情報を段階的に入力するような画面フローを構築してみましょう。

次の章から、手順を解説します。



   今回のねらい


まず、リードオブジェクトにおける標準必須項目は以下の通りです。


  • 氏名

  • 会社名

  • リード状況


ユーザーには上記3つの項目を必ず入力させ、且つリード状況で選択した値に応じて画面を切り替え、必要な項目を入力してもらうような画面を構築していきます!


Salesforceについてイチから勉強したい!という方向けに、研修サービスを提供しています📝

特徴やラインナップはこちら → https://www.terrasky-tech.co.jp/services/training



   画面フローの構築


では設定メニューから、フローにアクセスします。

右上の「新規フロー」をクリックし、「最初から開始」を選択します。

ree

次の画面では、「画面フロー」を選択し、「作成」ボタンをクリックします。


ree

画面要素を追加します。


ree

表示ラベルとAPI参照名を入力し、ヘッダーは必要に応じて非表示にします。

ree

この画面は、冒頭でお伝えした3つの必須項目を入力してもらう画面になります。

画面に項目の情報を配置するため、まずはレコード変数から作成していきます。

タブを「項目」に切り替え、レコード変数から「+新規リソース」を選択します。

ree

新規リソース画面では、以下の通り設定します。

  • API参照名:(任意入力)

  • データ型:レコード

  • オブジェクト:リード

ree

作成ができたら、完了ボタンをクリックします。

レコード変数を作成すると、左側にリードオブジェクトに存在する項目が一覧で表示されます。

上部に必須項目「会社名」「氏名」「状況」が表示されているかと思いますので、こちらを画面上にドラッグアンドドロップで配置していきましょう。

ree

必要に応じて、「表示テキスト」コンポーネントを配置し、分かりやすい文章を添えると親切です!

ree

画面下部に配置されている[一時停止][前へ]ボタンは不要になりますので、フッターを設定から非表示にしていきます。

ree

そして次は、画面を分岐させる処理を行っていきます。

今回は、

  • 画面で選択されたリード状況が「連絡済み」だった場合はそのままリードレコード作成する

  • リード状況が「連絡前」だった場合は、「説明」という項目に新たに情報を入力させるような画面を表示したうえで、リードレコードを作成する

という流れになるように実装したいと思います。


画面要素の下に、「決定」要素を追加していきます。


決定要素の表示ラベル、API参照名を入力し、以下の通り分岐の条件を設定します。

①連絡前

  • リソース:(画面でユーザーが選択した)状況

  • 演算子:[次の文字列と一致する] 

  • 値:連絡前

②連絡済み

  • 条件不要 ※連絡前以外の場合=連絡済みとなるため

ree

決定要素の設定ができましたら、「連絡前」の分岐に画面要素を追加します。


ree

画面を作成していきます。

「項目」タブに切り替えて、レコード変数で先ほど作成したリードレコード変数「var_lead」を選択します。

その後、「説明」項目を画面上に配置します。

任意で、「表示テキスト」コンポーネントなどを使用しユーザーへのメッセージを作成します。

こちらの画面では、一つ目の画面と同様、必要に応じてフッターの「前へ」「一時停止」を非表示に設定しましょう!

ree

分岐を抜けたあと、画面でユーザーが選択した情報をもとにリードレコードを作成していきます。

「レコードを作成」要素を選択していきましょう。

表示ラベルとAPI参照名を入力し、「レコードの項目値の設定方法」では「レコード変数から」を選択し、作成するレコード数は「1」を選択します。

レコード変数では、作成したリードレコード変数である「var_lead」を選択しましょう。

「var_lead」には、ユーザーが画面で入力した情報が含まれています。この変数をもとに、リードレコードを新規作成していきます。

ree

手順通りに作成すると、このようなフローになったかと思います。

作成ができましたら、保存&有効化をしていきましょう!

ree



   画面フローの呼び出し


画面フローが構築できましたので、実際にユーザーが使用できるよう設定していきます。

今回は、リードオブジェクトのリストビューからこちらの画面フローを呼び出す設定を行います。


画面フローのURLを取得する

まずは、構築した画面フローのURLを取得していきます。


設定画面のフローから、今作成した画面フローを探します。

右側の▼ボタンから、「詳細とバージョンの表示」をクリックします。

ree

URL欄に記載されている文字列をコピーします。

ree

画面フローを呼び出すボタンを作成する


準備ができましたので、リードのオブジェクトマネージャーからリストビューから画面フローを呼び出すボタンを作成していきましょう!

オブジェクトマネージャーから「リード」を選択し、「ボタン、リンク、およびアクション」をクリックします。

画面右上の「新規ボタンまたはリンク」をクリックします。

ree

表示ラベルと名前を入力し、表示種別では必ず「リストボタン」をクリックします。

リストビュー上へ配置したいボタンは、必ず「リストボタン」を選択する必要があります。

その他は任意で設定し、入力フォームにはコピーした「フローのURL」を貼り付けます。

以下のように入力されていると思います。


/flow/(ご自身の組織で作成したフローAPI名)


その後、末尾に「?retURL=00Q/o」を追加します。


/flow/(ご自身の組織で作成したフローAPI名)?retURL=00Q/o


この追加した文字列では、画面フローが起動した後に遷移する先のURL、リダイレクト先を指定しています。

画面フローの実行が完了した後は、元々ユーザーが開いていたリストビューの画面に戻る方が、挙動として自然ですよね!

「?retURL=」というのはURLのクエリパラメーターで、「00Q/o」というのはリードオブジェクトのリストビューのURL構造の一部です。

「00Q/o」をさらに分解してみると、「00Q」はリードオブジェクトのIDプレフィックスを指し、オブジェクトごとに異なる文字列が設定されています。

「/o」はオブジェクトのリストビューを表します。


よって、画面フローURLの末尾に「?retURL=00Q/o」を追加することで、画面フロー実行後はリードのリストビュー画面に遷移するという動作になります。

ree

ボタンをリストビューに配置する


画面フローを呼び出すボタンが作成できましたので、続いてこちらをリストビューに配置していきましょう!

リードのオブジェクトマネージャーから、「リストビューボタンレイアウト」をクリックします。

既存のリストビューレイアウトの右側▼から「編集」をクリックします。

ree

カスタムボタンから、選択したボタンへ先ほど作成した「リード作成(画面フロー)」というボタンを追加し、「保存」をクリックします。

ree

以上で設定は終了となります。最後は動作を確認してみましょう!



   画面フローの動作確認


それではSalesforceから、リードタブをクリックします。

画面右上のリストビューボタンに、先ほど配置したボタンが表示されていることを確認します。

※表示されない場合は、▼ボタンをクリックすると表示されることがあります。

ree

早速、こちらのボタンをクリックしてみましょう。

作成した画面フローが表示されます。リード状況で「連絡前」以外の値を選択し、情報を入力します。

ree

「次へ」ボタンをクリックすると、リードのリストビューへ画面遷移します。

ボタンで指定したリダイレクト先がしっかり効いていることが確認できます!

そして、先ほど入力した「山田太郎」さんのリードレコードもしっかり作成できています。

ree

ではもう一度画面フローを起動して、リード状況で「連絡前」を選択し、情報を入力しましょう。

ree

「次へ」ボタンをクリックすると、2つ目の画面が表示されます。

説明欄に何かしら情報を入力しましょう。

ree

次へをクリックすると、リードのリストビューへ画面遷移します。

そして、先ほど入力した「山田花子」さんのリードレコードもしっかり作成できています。

ree

レコードを開き、説明項目に先ほど入力した情報が登録されていることを確認します。


ree

2つの動作確認を行い、想定通りの挙動になっていることが確認できました。



   まとめ


今回は、Salesforceの「画面フロー」を活用して、ユーザーが直感的に操作できる画面を構築する方法をご紹介しました。

画面フローを使用することで、このようにユーザーが入力する情報や選択肢に応じて画面を分岐させたり、必要な入力項目を柔軟にコントロールしたりと、業務効率化に大きく貢献するはずです。

是非みなさんも、画面フローを活用して業務を効率化させていきましょう!


アップビルダーが300名以上在籍!

テラスカイ・テクノロジーズのエンジニア派遣の資料ダウンロードはこちら



ree