【基礎編】Salesforceの画面フローとは？作成方法と配置場所を実例付きで解説

Salesforceのフローとは、ビジネスプロセスを自動化するノーコード・ローコードツールです。その中の「画面フロー」ではユーザーに提示する「画面」を開発することなく、クリックベースで簡単に実装することが可能です。
 
VisualforceやLightning Web Componentはコーディングが必要となる画面開発ですが、画面フローはコーディングすることなく直感的な操作で画面開発ができるという点が大きな特徴です。
 
今回はそんな「画面フロー」の基本的な使い方について解説をしていきます！

それでは早速、画面フローを作成していきましょう。
今回は、ユーザーに〈今日の日付を提示する〉画面を作成していきます！

設定画面から、フローのメニューにアクセスします。右上の「新規フロー」をクリックしましょう。

「最初から開始」を選択し、「次へ」をクリックします。

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

「要素を追加」から、「画面」要素を選択しましょう。

画面のプロパティでは、任意の表示ラベルとAPI参照名を入力します。
今回はシンプルな画面表示にしたいので、ヘッダーとフッターは非表示に設定します。
画像の赤枠の通り、表示のチェックを外しておきましょう。

それでは画面上に表示する文字を設定していきたいと思います。
左側のコンポーネント一覧から、「表示テキスト」を画面上にドラッグアンドドロップします。

API参照名を入力します。
テキストボックスでは、以下のように入力します。

今日の日付は、{!$Flow.CurrentDate}です。
 
{!$Flow.CurrentDate}の部分ですが、「リソースを挿入」から$Flowを選択し、CurrentDateを選択することで入力可能です。

なお、{!$Flow.CurrentDate}は現在の日付を示すグローバル変数です。
この画面フローを起動すると、実行した今日の日付が動的に表示されるという想定です。
 
表示テキストを編集したら、続いて文字が見やすいように、フォントサイズや配置などをカスタマイズします。

設定ができましたら、「完了」ボタンをクリックします。
ではフローを保存し、有効化を行いましょう。

Salesforceについてイチから勉強したい！という方向けに、研修サービスを提供しています📝
特徴やラインナップはこちら　→　https://www.terrasky-tech.co.jp/services/training

では実際に作成した画面フローをホーム画面に配置していきます。
ホーム画面に配置することで、ユーザーがログインした際にすぐ今日の日付を確認することが可能です。

任意のアプリケーションを選択し、〈ホーム〉タブをクリックします。
歯車アイコンから「ページを編集」を選択します。

左側のコンポーネント一覧から「フロー」を選択し、任意の画面上に配置します。

右側プロパティ＞フローから先ほど作成した画面フローを選択します。

選択できましたら、Lightningページを保存し、有効化してください。
有効化ができましたら、戻ってホームページを表示し、本日の日付が表示されることを確認しましょう。

動作確認をしてみて、思ったように文字や日付が表示されないなどの場合は必要に応じて表示形式を調整してください。
このように、簡単に現在の日付を表示するような画面を構築し、表示することができました！
 

続いて、画面フローを配置できる場所について確認していきます。
先ほどはLightningホームページに画面フローを配置しましたが、その他さまざまな場所に配置することが可能です。

Lightningホームページに配置する際と同様の手順で、Lightningレコードページ上に画面フローを配置可能です。
例えば商談レコードのページに配置すると、画像のようなイメージになります。

ページレイアウト上にも画面フローを配置できます。
配置するにあたり、必要な準備があるため確認していきます。

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

アクション種別で「フロー」を選択し、作成した画面フローを選択しましょう。
表示ラベルや名前を入力し、保存ボタンをクリックします。

アクションが作成できましたら、ページレイアウトにアクションを配置していきます。
「ページレイアウト」を選択しましょう。
 
パレット左側から「モバイルおよびLightningのアクション」を選択すると、先ほど作成したアクションが候補として表示されるはずです。
該当のアクションを選択し、ページレイアウトの「Salesforce モバイルおよび Lightning Experience のアクション」セクションにドラッグアンドドロップで配置します。

配置ができましたら、保存ボタンをクリックします。

設定が完了しましたので、任意のレコードを開いて確認していきたいと思います。

レコードを開いてみると、画面右上のアクションに先ほど作成した「現在の日付は？」というアクションが配置されていることが分かります。

想定通り、現在の日付を表示する画面が表示されました！

ユーティリティバーとは、Salesforceのフッターからさまざまなデータに素早くアクセスできる機能のことです。

ではこちらに画面フローを配置していきましょう。 
設定から、アプリケーションマネージャーのメニューにアクセスします。
ユーティリティーバーに画面フローを配置したいアプリケーションを探し、の右側▼から「編集」をクリックします。
 
左側の「ユーティリティ項目」を選択し、「ユーティリティ項目を追加」ボタンをクリックします。
表示される要素から「フロー」を選択します。

表示ラベルでは今回分かりやすいように「現在の日付は？」と入力します。
コンポーネントのプロパティ＞フローから、作成した画面フローを選択し、保存しましょう。

それではユーティリティ項目を設定したアプリケーションを開き、確認します。
しっかりと設定したユーティリティ項目が反映されています。こちらをクリックしてみましょう！

こちらも想定通り、現在の日付が表示されました！

今回は簡単な画面フローを作成し、さまざまな場所に配置してみました。
紹介した配置場所以外にも、リンクやリストビューなどに配置することが可能です。

フローはSalesforceの年3回実施されるバージョンアップで段々と進化を遂げています。
フロー実装の際は常に最新情報をキャッチすることを心がけ、最適な設計・実装をしていきましょう！

あなたのやりたいことを、ノーコード・ローコードで実現します！
テラスカイ・テクノロジーズのエンジニア派遣の資料ダウンロードはこちら→https://www.terrasky-tech.co.jp/document/about