自動化コンポーネントについて知る

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Trail Together の動画

エキスパートの説明を見ながらこのステップを進めて行きたい場合は、Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 02:33 分から開始されます。)

はじめに

自動化コンポーネントでは、Apex クラスと Lightning コンポーネントを使用して Flow Builder の機能を拡張できます。フローで使用できるコンポーネントには、呼び出し可能なアクション、フロー画面コンポーネント、フローローカルアクションの 3 種類があります。この 3 種類のコンポーネントについて、そのコードを確認して詳しく学びましょう。

呼び出し可能なアクション

必要とする自動化ロジックは、Flow Builder の宣言的な機能より広範囲に及ぶことがあります。呼び出し可能なアクションを使用すると、開発者は Apex で複雑なロジックを記述して、Flow Builder で有用な宣言的ビルディングブロックの形式で公開できます。

組織にインストールされている呼び出し可能アクションの 1 つ、[Clone Record List (レコードリストをコピー)] アクションを確認してみましょう。この呼び出し可能なアクションは、フロー内からレコードのリストをコピーするために使用されます。

Clone Record List (レコードリストをコピー) アクションを表示する

このプロジェクト用の Automation Components パッケージをすべてインストールしたわけではないため、GitHub に戻ってフロー画面コンポーネントのコードを調べてみましょう。

「Trailhead Sample Gallery (Trailhead サンプルギャラリー)」に移動します。
「Browse Demos (デモを参照する)」セクションで、automation を検索します。Automation Components アプリケーションタイルで、[Explore on GitHub (GitHub で詳細を確認する)] をクリックします。
src-collections | main/default/classes | CloneRecordList.cls をクリックして、Apex クラスのコンテンツを表示します。(Apex クラスのコンテンツを表示できない場合は、[View Code (コードを表示)] をクリックします。)

InputParameters 内部クラスと OutputParameters 内部クラスを確認します。各クラスのプロパティは @InvocableVariable アノテーションが付加されており、フローとのデータの受け渡しに使用することができます。

// Wrapper class for input parameters
  global class InputParameters {
       @InvocableVariable(required=true)
       global List<SObject> collection;
  }
  //Wrapper class for output parameters
  global class OutputParameters {
       @InvocableVariable
       global List<SObject> collection;
  }

bulkInvoke Apex メソッドも確認します。@InvocableMethod アノテーションを付加することで、フローアクションとして呼び出せるようになりました。

最後に、bulkInvoke メソッドの実行で InputParameters クラスと OutputParameters クラスが使用されていることを確認します。

@InvocableMethod(label='Clones a list of records' category='Collections')
  global static List<OutputParameters> bulkInvoke(List<InputParameters> inputs) {
       List<OutputParameters> outputs = new List<OutputParameters>();
       for (InputParameters input : inputs) {
            OutputParameters output = new OutputParameters();
            output.collection = input.collection.clone();
            outputs.add(output);
       }
       return outputs;
  }

automation-components をクリックして、プロジェクトのルートディレクトリに戻ります。

Flow Builder から呼び出し可能なアクションにアクセスすると、Apex クラスで定義されている入力パラメーターと出力パラメーターと共に、アクションの表示ラベルと説明も取り込まれていることがわかります。

Flow Builder のフローの呼び出し可能なアクションとその変数

フロー画面コンポーネント

Flow Builder には、充実した画面の作成やユーザー操作の取得に使用できる画面コンポーネントが数多く付属しています。開発者は、画面フロー内のユーザーエクスペリエンスを向上させるカスタム画面コンポーネントを作成できます。

画面コンポーネントは、Lightning Web コンポーネント (LWC) または Aura コンポーネントで作成できます。このプロジェクトでは、Lightning Web コンポーネントを中心に説明します。

src-flows | main/default | lwc | flowPicker | flowPicker.js-meta.xml をクリックして、Lightning Web コンポーネントのコンテンツを開きます。
ここで、Lightning Web コンポーネントの js-meta.xml ファイルの標準的なメタデータ構造を参照できます。

メタデータ内の <target> を確認します。lightning__FlowScreen を target として追加することで、コンポーネントが Flow Builder に表示されるようになります。

次に、<property> タグ内でフローに公開されている多数のプロパティを確認します。各プロパティで名前、種別、ロール、表示ラベル、デフォルトテキスト、説明が指定されていることがわかります。これにより、Flow Builder でアクセスした場合に識別しやすくなります。

<targets>
  <target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
  <targetConfig targets="lightning__FlowScreen">
       <property
            name="label"
            type="String"
            role="inputOnly"
            label="Label"
            default="Select a Flow"
            description="Set the text to appear above the Flow selection box"/>
  </targetConfig>
</targetConfigs>

完了したら、プロジェクトのルートディレクトリに戻ります。

フローローカルアクション

フローローカルアクションは、画面フローの使用中にユーザーのブラウザーでアクションを実行する Aura コンポーネントです。画面フローとは異なり、ローカルアクションの Aura コンポーネントでは UI は公開されません。このコンポーネントは UI を操作するサービスコンポーネントにすぎません。これは、ユーザーインターフェースを変更するアクションを実行したり、Salesforce サーバーを介さずにサードパーティシステムからデータを取得したりするために使用できます。

src-ui/main/default |aura | minimizeUtilityItem | minimizeUtilityItem.cmp をクリックして、Aura コンポーネントのコンテンツを表示します。
```
<aura:component implements="lightning:availableForFlowActions" access="global">
  <lightning:utilityBarAPI aura:id="utilityBar" />
</aura:component>
```
lightning:availableForFlowActions を実装する標準の Aura コンポーネントを確認します。これにより、Flow Builder 内でコンポーネントにアクセスできるようになります。
次に、utilityBarApi は Aura コンポーネントによるユーザーインターフェースの変更をトリガーするために使用されます。
フローローカルアクションにはユーザーインターフェースがないため、コンポーネント内にマークアップはありません。

完了したら、[Back (戻る)] ボタンをクリックしてコンポーネントディレクトリに戻ります。

では、アクションの背後にある JavaScript を見てみましょう。

minimizeUtilityItemController.js をクリックします。

({
  invoke: function (component) {
       var utilityAPI = component.find('utilityBar');
       // Minimize utility bar if it's open
       utilityAPI.getUtilityInfo()
       .then(function (response) {
            if (response.utilityVisible) {
            utilityAPI.minimizeUtility();
            }
       })
       .catch(function (error) {
            console.error(error);
       });
  }
});

コントローラーが invoke 関数で始まっていることを確認します。invoke は、ローカルアクションがフローで実行されるときにコールされます。
次に、アクションは関数のボディ内のコードを介して実行されます。この例では、utilityAPI.minimizeUtility(); をコールしてユーティリティバーを最小化しています。

さまざまな種類の自動化コンポーネントを一通り見たところで、サンプルアプリケーションのコンポーネントを使用するフローを作成する準備が整いました。

このステップでは作業内容の確認は行いません。[Verify (検証)] をクリックして、次のステップに進みます。

ヘルプをお探しですか?

もっと探す