[Flow Builder x LWC] Custom Property Editor 해봤어요.

Salesforce의 Flow Builder의 편집 설정 정의 부분Custom Property Editor LWC를 LWC로 구축해 보십시오.
인증 시 API 버전은 51입니다.자주 공식 문서에서 최신 정보를 확인하세요.
백문이 불여일견.나는 아래의 물건을 만들었다.

Flow Builder 화면

Flow 실행 화면
그림을 그릴 수 있는 HTML Canvas를 Flow Builder에 표시합니다.Custom Property Editor입니다.묘사된 데이터 베이스를 64화하여 Flow에 표시된 LWC에 입력 값으로 전달합니다.
그런 다음 Flow Screen Component(LWC)를 통해 Builder가 정의한 이미지 데이터를 표시합니다.
소스 코드는 여기.
※ 샘플 코드.

Custom Property Editor 정보

Flow Builder 내에서 정의된 UI를 설정하는 기능을 자유롭게 구성할 수 있습니다.
Lightning Web Component로 구성된 이 UI는 간단한 텍스트만 입력할 수 있는 UI를 보다 유연하게 설정하기 위한 것입니다.
이 기능은 윈터 21에서 가.입니다.공식 문서
Custom Property Editor를 사용할 수 있는 영역은 다음과 같습니다.

Flow Action (Apex @InvocableMethod)

Flow Screen Component(LWC)

Flow Action(Apex@InvocalbleMethod)에 메서드 지정하기

공식 문서(샘플)
MyAction.apex

global class MyFlowAction {

  @InvocableMethod(label='My Action Name' configurationEditor='c-my-custom-property-editor-for-action')
  global static List<MyResult> execMyAction(List<MyRequest> requests) {
    ...
  }

@Invocalble Method의configurationEditor에 c-를 더해 불고기 카트리지로 Custom Property Editor의 LWC 이름을 지정합니다(사용자 정의 이름 공간이 있으면 c-의 위치를 변경).
Flow Builder에서 작업을 구성하면 Custom Property Editor가 표시됩니다.
CustomPropertyEditorForAction.js

import { LightningElement, api } from 'lwc';
export default class CustomPropertyEditorForAction extends LightningElement {
  // 入力変数
  @api
  inputVariables;
  /* データ構造は以下のよう
  [{
    name: 'variableApiName', // 変数API名
    value: '値',
    valueDataType: 'String' // データ型
  }]
  */
  
  // validate()で、Flow Builder上で、設定入力のバリデーションルールを定義。
  // カスタムのエラーメッセージをArrayで返す。
  @api
  validate() {
    const validity = [];
    // ここでEditorの入力値バリデーションロジックを記述
    if (false) {
      validity.push({
        key: 'UniqueErrorKey',
        errorString: 'エラーメッセージ',
      });
    }
    return validity;
  }
  
  notifyValueChangeToFlowBuilder() {
    // 'configuration_editor_input_value_changed' というカスタムイベントをDispatchで、
    // Flow Builderの設定値を更新する
    const valueChangedEvent = new CustomEvent(
      'configuration_editor_input_value_changed',
      {
	bubbles: true,
	cancelable: false,
	composed: true,
	detail: {
	  name,
	  newValue,
	  newValueDataType: 'String',
	}
      }
    );
    this.dispatchEvent(valueChangedEvent);
  }
}

여러 Custom Property Editor에서 사용하는 JavaScript Interface가 나타납니다.

@api inputVariables;: 입력 변수가 저장되어 있습니다.

@api validate(): 유효성 검사를 입력합니다.aray의 length > 0 값을 반환하는 동안 오류가 발생했습니다.

또한 공식 문서에는 취합되지 않지만 Custom Event를 사용하여 Editor의 변경 사항을 알립니다.

configuration_editor_input_value_changedCustom Event: 변경 사항을 컴파일러에 반영

CustomPropertyEditorForAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

isExposed 는 진짜든 가짜든 상관없습니다.
이 밖에 아직 검증되지 않았으며일반 유형의 sObject를 지원하는 샘플도 공식 문서에서 확인할 수 있다.
inputVariables 외에도 builderContext와 genericTypeMappings 인터페이스 속성을 추가합니다.genericType Mappings에서 Apex의 @InvocalbleVariable가 정의한 속성 유형 정보는 입력T__하면 출력U__에 접두사가 있고 속성에 따라 저장됩니다.
또한, sObject의 종류(Accent, Case 등)의 변경 시configuration_editor_generic_type_mapping_changed에는 Custom Event를 분배하고, sObject의 기록 변경 시에는 2종의 Custom Event를 갱신하고 사용하도록 분배configuration_editor_input_value_changed한다.

Flow Screen Component(LWC)에 지정하는 방법

기본적으로 Flow Action과 동일합니다.
이번에 제작된 HTML Canvas의 Custom Property Editor는 이것을 사용했다.
Flow Screen Component
lwcForFlowWithCustomPropertyEditor.html

<template>
    <h1>LWC for Flow with Custom Property Editor</h1>
    <p>Flow Builder上で描いたサインです↓</p>
    <div>
      <img src={base64image} />
    </div>
</template>

lwcForFlowWithCustomPropertyEditor.js

import { LightningElement, api  } from "lwc";
export default class LwcForFlowWithCustomPropertyEditor extends LightningElement {
  @api
  base64image;
}

Flow Screen Component에서 Apex의 @InvocalbleVariable는 @api로 정의됩니다.
lwcForFlowWithCustomPropertyEditor.js-meta.xml

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>51.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel
  >Canvasを使ったCustom Property Editorが定義されたFlow Screen Component</masterLabel>
  <targets>
    <target>lightning__FlowScreen</target>
  </targets>
  <targetConfigs>
    <targetConfig
      targets="lightning__FlowScreen"
      configurationEditor="c-custom-canvas-property-editor"
    >
      <property name="base64image" type="String" />
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

lightning__FlowScreen Custom Prooperty Editor의 LWC 이름을 대상의 target ConfigconfigurationEditor 속성에 추가합니다. 네임스페이스 + 검파 상황에서.입력할 때 사용할 변수를property로 지정합니다.
LWC 화면 어셈블리의 경우 Custom Property Editor 하나만 사용할 수 있습니다.
CustomEvent에서 여러 property 값이 변경됩니다.
Custom Property Editor
customCanvasPropertyEditor.html

<template>
  <h1>HTML Canvas in Flow Builder (Custom Property Editor)</h1>
  <canvas class="canvas" id="canvas" width="240" height="180"></canvas>
  <lightning-button
    label="Clear"
    variant="brand"
    onclick={onClickClear}
  ></lightning-button>
</template>

customCanvasPropertyEditor.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
	<masterLabel>HTML Canvas Editor</masterLabel>
</LightningComponentBundle>

customCanvasPropertyEditor.js

import { LightningElement, api } from 'lwc';

export default class CustomCanvasPropertyEditor extends LightningElement {
  // ...
  // getter / setterに分けています。
  _inputVariables = [];

  @api
  get inputVariables() {
    return this._inputVariables;
  }

  set inputVariables(variables) {
    // 入力変数に対応して、CanvasにBase64の画像を反映
    const param = variables.find(({ name }) => name === "base64image");
    if (param) {
      // ...保存された入力値（画像データ）をCanvasに表示
    }
    this._inputVariables = variables || [];
  }

  // ...描画処理

  // Flow Builderに、描いたものをBase64化して文字列で渡す。
  submit = () => {
    const base64 = this.canvas.toDataURL("image/jpeg");
    const valueChangedEvent = new CustomEvent(
      "configuration_editor_input_value_changed",
      {
        bubbles: true,
        cancelable: false,
        composed: true,
        detail: {
          name: "base64image",
          newValue: base64,
          newValueDataType: "String"
        }
      }
    );
    this.dispatchEvent(valueChangedEvent);
  };
}

Flow Action에서 사용된configuration_editor_input_value_changed을 사용하여 컴파일러에 Custom Property Editor의 설정 값을 알립니다.
Screen Component는 일반 sObject도 지원합니다. 있는 것 같아요.
이상은 정보가 매우 적은 분야이기 때문에 총결하였다.
세일즈포스의 라이트닝 플로우는 부호 없는 도구로 진화해 강력하지만 복잡한 처리, 동적 입력, 출력 등 디테일이 닿지 않는 경우도 있다.하지만 그걸 보완하는 역할로 LWC의 플로우 스크린 컴포니츠, 에이펙스의 @Invocalble Method, 여기에 커스텀 프로퍼티 에디터까지 더해져 플로우가 더 유연하고 강해진 느낌이다.