この例では、Contact オブジェクト入力パラメータを使用する呼び出し可能なアクションに対して createContactActionEditor というカスタムプロパティエディタコンポーネントを作成します。呼び出し可能なアクションは、フローに追加できる Apex メソッドです。Flow Builder では、管理者はテキスト項目を使用して、呼び出し可能なアクションの Contact 入力パラメータを設定します。ユーザがこの例のフローを実行すると、呼び出し可能なアクションで新規取引先責任者が保存されます。
この Apex クラスファイルは、呼び出し可能なアクションとして実行できる createContact メソッドとその入力変数を定義します。@InvocableMethod アノテーションは、呼び出し可能なアクションとして実行できるメソッドを識別します。@InvocableVariable アノテーションは、呼び出し可能なメソッドによって使用される変数を識別します。
呼び出し可能なメソッドは、configurationEditor 修飾子でカスタムプロパティエディタコンポーネントを登録します。組織にカスタム名前空間がなければ、コンポーネントの名前空間は c になります。組織にカスタム名前空間があれば、その名前空間を使用してカスタムプロパティエディタコンポーネントを登録します。この例では、コンポーネントの名前は c-create-contact-action-editor になっています。
1//CreateContactAction.cls
2global class CreateContactAction {
3 global class CreateContactRequest {
4
5 @InvocableVariable
6 global Contact contact;
7 }
8
9 global class CreateContactResult {
10 @InvocableVariable
11 global Boolean isSuccess;
12
13 @InvocableVariable
14 global String errorMessage;
15
16 @InvocableVariable
17 global String contactId;
18 }
19
20 @InvocableMethod(label='Create Contact' configurationEditor='c-create-contact-action-editor')
21 global static List<CreateContactResult> createContact(List<CreateContactRequest> requests) {
22 List<CreateContactResult> results = new List<CreateContactResult>();
23 for(CreateContactRequest request : requests){
24 results.add(insertContact(request));
25 }
26 return results;
27 }
28
29 public static CreateContactResult insertContact(CreateContactRequest request) {
30 List<Contact> contactList = new List<Contact>();
31 contactList.add(request.contact);
32
33 Database.SaveResult[] srList = Database.insert(contactList, true);
34
35 CreateContactResult contactResult = new CreateContactResult();
36 for(Database.SaveResult sr: srList) {
37 if (sr.isSuccess()) {
38 contactResult.isSuccess = sr.isSuccess();
39 contactResult.contactId = sr.getId();
40 }
41 else {
42 for(Database.Error err : sr.getErrors()) {
43 contactResult.errorMessage = err.getStatusCode() + ': ' + err.getMessage();
44 }
45 }
46 }
47
48 return contactResult;
49 }
50}CreateContactAction の設定ファイルは次のようになります。
1<!--CreateContactAction.cls-meta.xml-->
2
3<?xml version="1.0" encoding="UTF-8"?>
4<ApexClass xmlns="urn:metadata.tooling.soap.sforce.com" fqn="CreateContactAction">
5 <apiVersion>53.0</apiVersion>
6 <status>Active</status>
7</ApexClass>次の HTML、CSS、JavaScript、設定ファイルは、アクションのカスタムプロパティエディタコンポーネント createContactActionEditor を定義します。
コンポーネントの HTML テンプレートは、Flow Builder のカスタムプロパティエディタの UI を定義します。
1<!--createContactActionEditor.html-->
2
3<template>
4 <div class="slds-m-top_small">
5 <h2 class="slds-text-heading_medium slds-p-around_xx-small lgc-bg-inverse">
6 Contact Primary Information
7 </h2>
8
9 <lightning-input
10 label="First Name"
11 value={defaultContact.FirstName}
12 onchange={handleFirstNameChange}
13 >
14 </lightning-input>
15
16 <lightning-input
17 label="Last Name"
18 value={defaultContact.LastName}
19 onchange={handleLastNameChange}
20 >
21 </lightning-input>
22 </div>
23
24 <div class="slds-m-top_small">
25 <h2 class="slds-text-heading_medium slds-p-around_xx-small lgc-bg-inverse">Contact Source</h2>
26
27 <lightning-input
28 label="European Country Code"
29 value={defaultContact.European_Country_Code__c}
30 onchange={handleCountryCodeChange}
31 >
32 </lightning-input>
33 </div>
34</template>次の例は、カスタムプロパティエディタの UI を示しています。
カスタムプロパティエディタコンポーネントが初期化されると、JavaScript クラスは Flow Builder からフローメタデータのコピーを受信します。システム管理者がカスタムプロパティエディタで値を変更すると、カスタムプロパティエディタコンポーネントはイベントをディスパッチして変更を Flow Builder に反映します。
@api プロパティを使用して、フローのデータを取得します。イベントを使用して、実行時のフローの変更をレポートします。
Note
1//createContactActionEditor.js
2
3import { LightningElement, api } from "lwc";
4
5export default class CreateContactActionEditor extends LightningElement {
6 @api
7 inputVariables;
8
9 defaultContact = {
10 attributes: {
11 type: "Contact",
12 },
13 European_Country_Code__c: "FRA",
14 };
15
16 get contact() {
17 const param = this.inputVariables.find(({ name }) => name === "contact");
18 return param && param.value;
19 }
20
21 handleFirstNameChange(event) {
22 this.defaultContact["FirstName"] = event.detail.value;
23 this.handleContact();
24 }
25
26 handleLastNameChange(event) {
27 this.defaultContact["LastName"] = event.detail.value;
28 this.handleContact();
29 }
30
31 handleCountryCodeChange(event) {
32 this.defaultContact["European_Country_Code__c"] = event.detail.value;
33 this.handleContact();
34 }
35
36 handleContact() {
37 const newValue = JSON.stringify(this.defaultContact);
38 const valueChangedEvent = new CustomEvent("configuration_editor_input_value_changed", {
39 bubbles: true,
40 cancelable: false,
41 composed: true,
42 detail: {
43 name: "contact",
44 newValue,
45 newValueDataType: "SObject",
46 },
47 });
48 this.dispatchEvent(valueChangedEvent);
49 }
50}Flow Builder には、カスタムプロパティエディタと通信するための JavaScript インターフェースがあります。この JavaScript クラスは、inputVariables インターフェースを使用します。
カスタムプロパティエディタが初期化されると、inputVariables は、Flow Builder から呼び出し可能なアクションの入力変数の値を受信します。デフォルト値を type と European_Country_Code__c に設定します。sObject データ型の入力にリテラル値を使用する場合は、Contact などの type 値を指定してください。
inputVariables データ構造には、各入力変数の名前、値、データ型が含まれます。
1[{
2 name: 'contact',
3 value: '{
4 "attributes": {
5 "type": "Contact"
6 },
7 "FirstName" : "",
8 "LastName": "",
9 "European_Country_Code__c" : "FRA"
10 }',
11 valueDataType: 'SObject'
12}]get contact() メソッドは、カスタムプロパティエディタで使用する入力変数の値を取得します。
システム管理者がカスタムプロパティエディタで入力の値を入力すると、handleContact メソッドは configuration_editor_input_value_changed イベントを Flow Builder にディスパッチします。Flow Builder は、フローでイベントを受信して値を更新します。
createContactActionEditor の設定ファイルは次のようになります。
1<!---createContactActionEditor.js-meta.xml-->
2<?xml version="1.0" encoding="UTF-8"?>
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4 <apiVersion>53.0</apiVersion>
5 <!--isExposed can be true or false-->
6 <isExposed>true</isExposed>
7</LightningComponentBundle>The Japanese Summer '24 guide is now live
j