使用 LWC 创建 Flow 本地操作
用 LWC 构建 Flow 本地操作（Local Action）——在客户端执行逻辑，无需往返服务器。例如从第三方系统获取数据、在新浏览器标签页打开 URL。配置后组件在 Flow Builder 中作为 Core Action 元素可用。限制：必须遵守 Locker 限制、仅支持 Lightning Runtime、仅限 Screen Flow（需要浏览器上下文）。
Flow 本地操作 —— 配置与 invoke()
添加 lightning__FlowAction target。关键是实现 @api invoke() 方法——Flow 执行到此操作时调用。HTML 模板应为空白（本地操作没有 UI）。
<!-- .js-meta.xml -->
<targets><target>lightning__FlowAction</target></targets>
<targetConfigs>
<targetConfig targets="lightning__FlowAction">
<property name="toastTitle" type="String" label="Toast title"/>
<property name="toastMessage" type="String" label="Toast message"/>
</targetConfig>
</targetConfigs>
// JS——同步操作
@api toastTitle; @api toastMessage;
@api invoke() {
this.dispatchEvent(new ShowToastEvent({ title: this.toastTitle, message: this.toastMessage }));
}
// JS——异步操作（返回 Promise）
@api invoke(cancelToken) {
return new Promise((resolve, reject) => {
cancelToken.promise.then(error => reject(new Error("Request timed out.")));
// 异步工作...完成后 resolve() 或 reject("Custom error")
resolve();
});
}同步：方法结束→Flow 执行下一个元素。异步（推荐用于 XHR 等）：返回 Promise→resolve→下一个元素；reject→走 fault connector→$Flow.FaultMessage 设为 reject 的 Error 消息。默认超时 120 秒。调用外部服务器需allowlist + CORS 配置。cancelToken 用于超时时中止请求并自定义错误消息。
管理员在 Flow 中通过 Set Input Values 设置属性（从 Flow 传数据给组件），通过 Store Output Values 存储属性值到 Flow 变量。
验证自定义 Flow 屏幕组件
在组件 JS 中创建 @api validate() 方法——返回 { isValid: true/false, errorMessage: '...' }。不能用箭头函数——validate = () => {} 在 Flow Screen target 下不被识别。
@api validate() {
if (/* 有效条件 */) { return { isValid: true }; }
else { return { isValid: false, errorMessage: '/* 错误信息 */' }; }
}自定义错误显示——三个 @api 方法：
validate()——Flow 用户导航到下一屏或完成时调用。返回内部验证状态。不要在 validate 中渲染错误——在 set 方法中验证并设内部错误消息setCustomValidity(externalErrorMessage)——Flow 有外部输入验证错误时调用。存储消息到本地状态——不是渲染请求。空字符串=外部错误已解决，不应显示。非空字符串=富文本格式的外部错误消息reportValidity()——Flow 请求组件显示所有错误的时机。渲染内部+外部错误消息到 HTML
最佳实践：防止首次加载时显示错误——用 hasUserInteracted 标志跟踪用户是否交互过。首次访问时不显示错误；当 validate() 返回错误导致用户被退回时显示错误。
验证方法 —— 时间线与决策表
方法调用时机：
- validate()：Flow 移动到下一屏或完成时调用
- setCustomValidity()：存在外部错误消息或外部错误变为空字符串时调用。不随 validate() 结果调用（独立触发）
- reportValidity()：基于多种条件调用
reportValidity 调用决策关键规则：
- 有外部错误→必须调用（无论首次加载与否，无论有无内部错误）
- 无外部错误 + 有内部错误 + 首次加载→调用（显示 validate 返回的错误）
- 无外部错误 + 有内部错误 + 非首次→可选（根据实现决定）
- 无外部错误 + 无内部错误→不调用（无错误报告）
- 外部错误变为空（已解决）+ 非首次→调用（不渲染外部错误，可选内部）
完整示例流程：setCustomValidity("error") 存储→reportValidity() 显示。第二次 setCustomValidity("") 清空→reportValidity() 移除外部错误显示。
自定义属性编辑器 —— 概述与对比
无自定义编辑器→Flow Builder 中用文本框/组合框编辑属性。自定义编辑器→可使用任何输入组件和自定义样式——滑块、按钮组等简化管理体验。
自定义编辑器 = 一个 LWC 组件，通过特定 JavaScript 接口与 Flow Builder 通信。用于两种场景：① Apex Invocable Action 的输入配置（@InvocableMethod(configurationEditor='c-editor')）② Flow Screen Component 的属性编辑（configurationEditor="c-editor" 在 targetConfig 中）。
核心 JS 接口：用 @api inputVariables 接收 Flow 数据、用事件向 Flow 报告变更——configuration_editor_input_value_changed（值变化）、configuration_editor_input_value_deleted（值删除）、configuration_editor_generic_type_mapping_changed（泛型 sObject 类型变化）。
自定义属性编辑器 —— Invocable Action 示例
Apex 类中 @InvocableMethod(configurationEditor='c-html-email-editor') 注册编辑器。编辑器 @api inputVariables 接收 [{name, value, valueDataType}] 数组。每个属性用 getter 从数组中提取：this.inputVariables.find(({name}) => name === 'senderName')。
值变化→派发 configuration_editor_input_value_changed 事件（{ name, newValue, newValueDataType } detail）。Flow Builder 接收→更新 Flow 中的值。
validate() 编辑器验证：返回 [{key, errorString}] 数组。Flow Builder 显示错误数量（阻止保存）——要显示具体错误消息需自行编写代码。
自定义属性编辑器 —— Screen Component 与泛型 SObject
Screen Component 编辑器：<targetConfig configurationEditor="c-volume-editor">。与 Action 编辑器相同模式——inputVariables 接收 + 事件报告变更。
泛型 SObject 输入（Screen Component）：配置文件中声明 <propertyType name="T" extends="SObject"/> + <property name="inputValue" type={T}/>。类型用花括号引用 propertyType 的 name。编辑器通过 @api genericTypeMappings 接收 [{typeName, typeValue}]。类型变化→派发 configuration_editor_generic_type_mapping_changed。
泛型 SObject（Invocable Action）：typeName 自动加前缀——输入 T__paramName，输出 U__paramName。
SObject 输入编辑器与 JavaScript 接口
完整 JS 接口五要素：
- inputVariables：
[{name, value, valueDataType}]——Flow 中的属性值。用 getter/setter 模式存储（_inputVariables = variables || []） - builderContext：Flow 中所有元素和资源——
{variables, screens, actionCalls, formulas, ...}。用于构建下拉选项（如从 variables 数组生成选项列表） - elementInfo：
{apiName, type}——type 为 "Screen" 或 "Action"。用于区分同一组件的不同实例 - genericTypeMappings：
[{typeName, typeValue}]——泛型 sObject 的类型映射 - validate：返回
[{key, errorString}]——Flow Builder 仅显示错误数量
三种事件类型：configuration_editor_input_value_changed（detail: name/newValue/newValueDataType）、configuration_editor_input_value_deleted（detail: name）、configuration_editor_generic_type_mapping_changed（detail: typeName/typeValue）。事件必须设 bubbles:true, composed:true。
SObject 字面值编辑器：Contact 对象输入→ newValue 为 JSON 字符串（含 attributes.type + 字段值）、newValueDataType: "SObject"。集合输入→ newValue 为 JSON 数组字符串。
支持的数据类型与外形尺寸配置
Flow 与 LWC 间的类型映射：Apex（自定义类/@AuraEnabled 字段）、Boolean（true=1/true、false=0/false）、Currency→Integer、Date→"YYYY-MM-DD"、DateTime→"YYYY-MM-DDThh:mm:ssZ"、Email/Phone/Picklist/URL→String、Number→Number、Percent→Double、Record→特定 sObject 类型名、Multi-Picklist→分号分隔 String。
外形尺寸配置：<supportedFormFactors> 标签控制组件在哪些设备上渲染——Large（桌面）、Small（手机）。App/Record 页面支持两者，Home 页面仅支持 Large。一旦组件在页面中使用，只能增加不能减少支持的外形尺寸。
感谢阅读本指南。如需继续学习，请参阅下一章：Lightning App Builder。