Skip to main content

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

メモ

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。必ず英語の値をコピーして貼り付けてから、Trailhead Playground の言語を [English] に、ロケールを [United States] に切り替えてください。こちらの指示に従ってください。

翻訳版の 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 に戻ってフロー画面コンポーネントのコードを調べてみましょう。

  1. 「Trailhead Sample Gallery (Trailhead サンプルギャラリー)」に移動します。
  2. 「Browse Demos (デモを参照する)」セクションで、automation を検索します。Automation Components アプリケーションタイルで、[Explore on GitHub (GitHub で詳細を確認する)] をクリックします。
  3. src-collections | main/default/classes | CloneRecordList.cls をクリックして、Apex クラスのコンテンツを表示します。(Apex クラスのコンテンツを表示できない場合は、[View Code (コードを表示)] をクリックします。)
  4. 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;
  }
  5. bulkInvoke Apex メソッドも確認します。@InvocableMethod アノテーションを付加することで、フローアクションとして呼び出せるようになりました。
  6. 最後に、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;
  }
  7. automation-components をクリックして、プロジェクトのルートディレクトリに戻ります。

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

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

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

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

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

  1. src-flows | main/default | lwc | flowPicker | flowPicker.js-meta.xml をクリックして、Lightning Web コンポーネントのコンテンツを開きます。
  2. ここで、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>
  3. 完了したら、プロジェクトのルートディレクトリに戻ります。

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

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

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

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

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

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

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

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

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップ ログイン
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる
今はしない