Box + Salesforce: 画面フローとExperience Cloud

Yuko Taniguchi
Box Developer Japan Blog
12 min readOct 11, 2023

Dreamforce 2023が始まりました。

このチュートリアルでは、Box APIとともにSalesforceの画面フローExperience Cloudを使用する場合について説明します。

今年の5月に、管理パッケージに含まれるようになった新しいBox for Salesforceフローテンプレートの使い方に関するブログ記事を公開しました。Salesforceフローとは何か、またSalesforceフローによってどのように開発を強化できるかがわからない場合は、まずそのブログ記事を確認してください。その時以来、BoxのSalesforce製品チームは管理パッケージの更新 (123) をリリースしてきました。今回は、Salesforceのエクスペリエンスにさらに多くのBox機能を簡単に追加する方法を紹介します。

それでは、始めましょう。

今回作成する機能

例えば、以下のスクリーンショットのようなExperience Cloudサイトで、ユーザーがサポートサイトに新しいケースを作成するとします。そのプロセスの一環として、ユーザーが関連コンテンツをアップロードしてBoxに保存する方法が必要になります。そうすれば、サポートエージェントがフォローアップする際に、そのケースとコンテンツをすべてSalesforce内で確認できるようになります。こうした場合に、画面フローを使うことができます。

Experience Cloudのケース作成ページ
関連するケースコンテンツのアップロード
関連コンテンツがBoxフォルダにアップロードされているSalesforceのケースの作成

前提条件

このチュートリアルでは、特定のBox for Salesforce画面フローをExperience Cloudサイトで実装する方法について説明します。この説明を理解できるように、このブログ記事では取り上げないいくつかの前提条件を以下に示します。

  • こちらのガイドに従い、最新のBox for Salesforce管理パッケージをインストールして構成しておく必要があります。古いバージョンを使用している場合は、更新が必要になることがあります。これには、BoxとSalesforce両方のEnterpriseアカウントが必要です。また、使用するインスタンスに対する管理者の権限も必要です。テストと開発は、BoxSalesforce両方の開発環境またはサンドボックス環境で行うことを強くお勧めします。
  • Experience Cloudを有効化する必要があります。
  • Experience Cloudサイトを作成する必要があります。ここでは、ごく基本的なサイトを使用します。このサイトとまったく同じものを作成する必要はありませんが、参考までに、今回はBuild Your Own (Aura) サイトテンプレートを使用しました。基本的な概念はどのサイトにも当てはまるはずです。
  • (私の他のブログで説明しているように) APEXトリガーとAPEXクラスを使用してチュートリアルのレコードタイプに対応するようSalesforceインスタンスをすでにカスタマイズしたことがある場合は、そのロジックを廃止する必要があります。そうしないと、新しいフローと古いコードがクラッシュすることがあります。

このブログは、不可能なことは追い求めずに実現できることを実行する技術を示すものであり、運用レベルの本格的なアプリケーションを示すものではないことに注意してください。独自のアプリケーションでは、おそらく追加のテスト、画面、ロジックが必要になります。

一連の手順

完成したフローがどのようになるかを以下に示します。ここでは、Boxを接続する方法を確認するために、各要素について説明します。

完成したフロー図

まず、画面インタラクションを追加しました。

画面インタラクションの追加

画面内で、左側から2つのテキスト入力 (1つは件名用、もう1つは説明用) をドラッグアンドドロップしました。右側に表示される画面、件名、説明の入力に関するポップアップで、一意のラベルとAPI名の情報を追加する必要があります。テキストは、一意であれば、何でもかまいません。

[Subject (件名)] フィールドの追加
[Description (説明)] フィールドの追加

また、[Show Header (ヘッダーを表示)] チェックボックスをオフにして画面のヘッダーを非表示にしました。ヘッダーを表示したままでもかまいませんが、表示しない方が最終的な見栄えがよくなると考えました。この画面の編集が終了したら、[Done (終了)] をクリックします。

ヘッダーの非表示

ケースを作成するには、ケースを作成するユーザーの取引先責任者情報が必要です。そのために、現在のユーザーの取引先責任者レコードを取得してみましょう。

[Get Records (レコードの取得)] の新しいデータ要素を追加します。

[Get Records (レコードの取得)] の選択

ポップアップで、適切なラベルとAPI名の情報を追加します。[Object (オブジェクト)] フィールドで、[Contact (取引先責任者)] を選択します。

取引先責任者オブジェクトの選択

[Field (フィールド)] では [Id]、[Operator (演算子)] では [Equals (等しい)]、[Value (値)] では [$User.ContactId] を選択します。[Done (終了)] をクリックします。

取引先責任者情報のフィルタの追加

これで、ケースを作成できます。もう一つデータ要素を追加しますが、今回は [Create Records (レコードの作成)] のデータ要素です。

ラベルとAPI情報を入力します。次に、[Use separate resources, and literal values (個別のリソースとリテラル値を使用する)] のラジオボタンを選択し、[Object (オブジェクト)] フィールドにCaseと入力します。

ケースレコードの作成要素

最後に、新しいケースの4つのフィールドの情報 (AccountId、ContactId、Description、Subject) の情報を追加しました。それぞれの値は、フロー内の前の要素から取得しました。以下のスクリーンショットに示すように、フロー内の要素のいずれかから派生したデータを使用できます。[Done (終了)] をクリックします。

フィールド情報の追加

ケースが作成されたので、Boxにケースフォルダを作成する必要があります。管理パッケージのインストールと設定は完了しているので、Flow Builderではネイティブにいくつかのメソッドにアクセスできます。

新しいアクション要素を追加します。

アクション要素の追加

[Filter By (フィルタ条件)] ドロップダウンで [Type (タイプ)] オプションを選択し、[Apex Action (Apexアクション)] を選択します。[Action (アクション)] フィールドで、[Create Folder for Record ID (レコードIDのフォルダの作成)] メソッドを使用します。

フォルダを作成するためのアクションの選択

[Record ID (レコードID)] で、前に使用したケースの作成要素のCaseIdを選択します。その後、[Always start a new transaction (常に新しいトランザクションを開始する)] ラジオボタンを選択します。[Done (終了)] をクリックします。

追加のApexアクションの設定

次に、別の画面インタラクションを追加します。[Box Upload (Boxアップロード)] の入力をドラッグアンドドロップします。画面とアップロードの選択にラベルとAPI名を指定します。

[Box Upload (Boxアップロード)] で、このステップの前に設定したApexアクションのフォルダIDを選択します。ファイル数の上限を10に引き上げましたが、これはユースケースに合わせて変更できます。

さらに、ヘッダーとフッターを非表示にしました。完了したら、[Done (終了)] をクリックします。

[Box Upload (Boxアップロード)] 要素の追加

この次の画面は必要ありませんが、ある程度完成したケースフローを作成するために、ヘッダーを非表示にした送信済みの画面を追加しました。これは表示テキストコンポーネントにすぎず、実際のロジックは実行されません。

送信済み画面の追加

この時点でフローは完成です。試してみましょう。

[Save (保存)] (これまでに保存している場合は [Save As (名前を付けて保存)]) をクリックします。次に、[Debug (デバッグ)] をクリックすると、ポップアップが表示されます。[Run (実行)] をクリックします。

デバッグのポップアップ

作成した3つの画面 (件名と説明の画面、ファイルのアップロード画面、送信済みの画面) を実際に手順に沿って操作できるようになります。右側には、ステップのログがあります。正しく動作しないものがあれば、エラーも表示されます。

デバッグメッセージの例

画面フローが正常にデバッグされたら、フローエディタに戻り、右上隅にある [Activate (有効化)] をクリックして画面フローを有効化します。

これで、この画面フローをExperience Cloudサイトに追加できます。これを行うには、サイトのビルダーに移動します。次に、フローセクションをページにドラッグアンドドロップするだけです。

[Process Automation (プロセスの自動化)] にある [Flow (フロー)] の選択

ドロップしたフローセクションを選択した後、ドロップダウンで先ほど作成した画面フローを選択します。次に、右上の [Publish (公開)] をクリックします。

ドロップダウンにある適切なフローの選択

サイトのURLにアクセスすると、フローの動作をライブで確認できます。

ライブのExperience Cloudサイト

新しいケースを作成するプロセスを実行します。すべてが正しく設定されている場合は、作成されたケース、そのケース用に作成されたBoxフォルダ、そのBoxフォルダ内にアップロードされたファイルが表示されます。

注 — これまでに、Boxの設定ガイドのレイアウトに関するセクションで説明されているように、取引先責任者ページにBoxコンポーネントを追加しました。

関連コンテンツがBoxフォルダにアップロードされているSalesforceのケースの作成

便利だと思いませんか? 最も良かった点は、カスタムコードを書く必要さえなかったことです。ご利用のBox for Salesforce管理パッケージに予定されているさらなる機能強化にご期待ください。

関連リソース

Salesforce画面フローのTrailhead

Salesforce Experience CloudのTrailhead

Box for Salesforce管理パッケージの最新バージョン

Box for Salesforceのインストールガイド

SalesforceでのBox Signボタンの作成に関するガイド

Box for Salesforceに関する開発者向けのリソース

Box for Salesforceに関するこのブログが皆さんのお役に立てば幸いです。質問がある場合は、Developer Forumに英語で投稿してください。

--

--