快速上手：构建响应式屏幕 Flow

创建响应式屏幕（Create a Reactive Screen）

欢迎来到这个快速上手项目。你将在这里学会 Salesforce Flow Builder 最强大的特性之一——响应式（Reactivity）：让同一屏幕上的组件对彼此的变化即时做出反应，而无需用户点击"下一步"或刷新页面。本项目中，Pyroclastic 公司的支持部门需要一个用来创建 bug 工单的 Flow，你将构建一个收集工单详情、在勾选确认框后响应式锁定字段、根据主题关键词预选优先级、按优先级加滑块计算到期日、并用条件可见性显示审批提示的完整屏幕——每一个特性都展示了响应式的一种不同侧面。

完成本项目后，你将能够：

• 描述屏幕 Flow 的响应式如何为用户带来收益
• 创建一个能响应式禁用的屏幕组件
• 创建能响应式设置组件默认值的公式
• 创建能对特定文本值做出反应的公式
• 配置能响应其它组件取值的条件可见性

前置知识：强烈建议你在开始前已对屏幕 Flow 有较好的了解。想全面学习屏幕 Flow，可先完成 Screen Flows 徽章；如果你是 Flow 新手，建议先完成 Build Flows with Flow Builder 学习路径。

什么是响应式（一）：概念与示例（So What Is Reactivity, Anyway? (1): Concept & Example）

响应式，是指屏幕 Flow 的各个部分能对彼此做出反应，即使它们位于同一个屏幕上。换句话说，当用户在某个屏幕组件中做了改动，它就能自动影响另一个屏幕组件，而无需用户导航到下一个屏幕。

为什么响应式如此重要？看一个例子：假设你有一个让销售人员在商机中添加产品并设置价格的屏幕 Flow，还需要在销售人员把价格设得过低时立即显示警告。

• 没有响应式：你必须把价格字段和警告放在两个不同的屏幕上，因为价格字段无法控制警告文本的可见性。你也可以用验证规则，但用户仍必须点击才能知道自己的价格是否有效。
• 有了响应式：用户一输入价格，警告和审批消息就能瞬间显示出来。

响应式减少了用户需要执行的点击次数，节省了他们的时间和精力，整体上创造出一种更流畅、更直观的体验——这些品质对 Flow 的用户采纳率至关重要。它就像现代 Web 应用那样：用户一边操作，结果一边实时呈现，而不是点一次、等一次、改一次。

什么是响应式（二）：好处与限制（So What Is Reactivity, Anyway? (2): Benefits & Limits）

响应式带来的收益远超"方便"二字：

• 更少的点击——用户停留在一个屏幕上，而不是在"下一步 → 返回 → 下一步"之间反复跳转；
• 更好的体验——流畅、直观的交互，感觉像一个现代应用；
• 更高的采纳率——Flow 好用，用户才会真正去用；
• 即时的反馈——校验、计算和引导随着用户的输入即时出现。

不过，也有必须知道的限制：

• 并非所有屏幕组件和 Flow 资源在所有场景下都支持响应式；
• 有些组件即使支持响应式，其中的某些函数或特定情形也可能不支持；
• Flow 的 API 版本等设置也会影响响应式行为。

关键是：响应式强大且具有变革性，但请针对你的具体配置充分测试，并查阅 Make Your Screen Flows Reactive 及其子页面，获取最新的支持矩阵。先从可用的部分做起，充分测试，再针对边界情况查文档。

启动 Trailhead Playground（Launch Your Trailhead Playground）

这是一个动手项目，你需要在属于自己的 Salesforce 环境——Trailhead Playground 中完成。先准备好你的 Playground：

1. 登录 Trailhead；
2. 点击本页底部的 Launch；
3. 你的 Playground 会在新的浏览器标签页中打开；
4. 做项目的过程中，保持 Playground 窗口打开；
5. 完成项目步骤后，回到本窗口，点击页面底部的 Verify step。

所有步骤都在你自己的 Playground 中使用 Flow Builder 完成——不需要任何外部工具，也不会影响任何真实的生产组织。创建 Flow、配置组件、实时测试响应式，全部在这里进行。

创建响应式 Flow（一）：搭建 Flow（Create a Reactive Flow (1): Flow Setup）

现在搭建基础。Pyroclastic 公司的支持团队需要一个 Flow 来创建 bug 工单，需求如下：

• 收集工单的主题（subject）、描述（description）、优先级（priority）和到期日（due date）；
• 为到期日提供一个建议值，并限制用户能偏离该日期的幅度；
• 提示用户确认主题和描述已包含所有必要信息。

本项目只专注于创建这个屏幕，先从一个全新的 Flow 开始：

1. 从 App Launcher 中搜索并打开 Flows；
2. 点击 New；
3. 选择 Screen Flow；
4. 在 Flow 画布上，点击 Start 元素后面的加号，选择 Screen 添加一个 Screen 元素；
5. 在 Screen Properties 面板中，将 Label 设为 Get Case Details，并确认 API Name 为 Get_Case_Details。

现在画布上有一个空的 Screen 元素，准备就绪。这是整个 Flow 唯一需要的屏幕——我们构建的所有响应式都发生在这一个屏幕内，组件之间实时相互响应，无需页面导航。这正是它与传统 Flow 的关键区别：一个屏幕、多个组件、全部以响应式方式连接。

创建响应式 Flow（二）：文本与 Picklist 组件（Create a Reactive Flow (2): Text & Picklist Components）

先往 Get Case Details 屏幕添加前三个组件：

文本字段（均为必填）：

• Subject——API Name 为 Subject，勾选 Require，是 bug 报告的标题/摘要；
• Description——API Name 为 Description，勾选 Require，是 bug 的详细说明。

Picklist——Priority：

• Label 设为 Priority，API Name 为 Priority，勾选 Require；
• Resource Type 选择 Picklist Choice Set，API Name 输入 choicePriority；
• Object 选 Case，Data Type 选 Picklist，Field 选 Priority；
• 点击 Done；若 Choice 字段未显示 {!choicePriority}，手动选择 choicePriority。

为什么这里用 Picklist Choice Set 而不是静态 Picklist？因为它会动态从 Case 对象的 Priority 字段加载取值。如果组织管理员将来新增了一个优先级级别（比如 Critical），它会自动作为选项出现在你的 Flow 里，无需编辑 Flow。选项永远与组织的配置保持同步——这是任何"可能随时间变化"的 Picklist 的最佳实践，让你保持 DRY（Don't Repeat Yourself）。

创建响应式 Flow（三）：日期、确认与保存（Create a Reactive Flow (3): Date, Confirmation & Save）

接着添加最后两个组件并保存：

日期字段——Due Date：

• Label 设为 Due Date，API Name 为 Due_Date；
• Read Only 选 True（这很关键！）——因为我们之后会基于"优先级 + 滑块输入"响应式地计算这个值，用户不应该手动输入它。

复选框——Confirmation：

• API Name 为 Confirmation；
• Label 输入一段很长且具体的文字："我确认该工单的主题和描述已包含复现该 bug 所需的全部信息，包括必要的登录信息。"

长而具体的标签 = 清晰的预期，用户不会对"确认的是什么"产生歧义。模糊的"我确认"复选框往往被用户不假思索地勾选；而把"包括必要的登录信息"这样的具体要求写进去，能确保用户真正理解他们在确认什么。

最后保存 Flow：Flow Label 输入 New Bug Case，API Name 为 New_Bug_Case。此时屏幕上共有 5 个组件：Subject、Description、Priority、Due Date、Confirmation。基础结构已完整——所有积木都就位了，接下来用响应式把它们连起来。

响应式禁用字段（一）：配置（Disable a Field Reactively (1): Setup）

目标：一旦用户勾选确认框，就锁定 Subject 和 Description 字段，防止用户修改。如果用户在勾选确认框后这两个字段被禁用，他们就只能先取消勾选确认框才能再次编辑主题或描述。

配置如下（在 Get Case Details 屏幕上）：

1. 选中 Subject 组件；
2. 在 Disabled 中选择 Get Case Details，再选择 I confirm that the case's subject… 这个屏幕组件；
3. 对 Description 组件重复第 1、2 步；
4. 点击 Done；
5. 保存 Flow。

就这么简单！没有公式、没有代码，只是一个直接的组件引用。现在 Subject 和 Description 的 Disabled 设置会实时读取 Confirmation 复选框的取值：勾选 → 字段锁定；取消勾选 → 恢复可编辑。

响应式禁用字段（二）：工作原理（Disable a Field Reactively (2): How It Works）

这是响应式最简单的形式，却极其强大。Confirmation 复选框是一个布尔值——要么勾选（True），要么未勾选（False），或者为 null（通常被视作 False）。把 Subject 和 Description 的 Disabled 属性直接指向 Confirmation 组件，就创建了一个实时绑定：

• 用户勾选确认框 → Flow 立即从 Confirmation 组件读到 True → 应用到 Disabled 属性 → 字段变灰；
• 取消勾选 → Disabled 立即变为 False → 字段恢复可编辑。

关键在于：Disabled 属性是一个持续的实时绑定，它不是只读取一次，而是持续监听 Confirmation 组件的变化，并即时把任何变化传播到所有引用它的地方。这与传统表单行为有本质区别——传统上你需要 JavaScript 或页面重载才能切换字段状态，而 Flow 自动处理了这一切。

想亲眼看看，点击菜单栏的 Run 在新标签页运行 Flow，勾选"I confirm…"复选框，观察 Subject 和 Description 字段瞬间锁定；取消勾选，它们又恢复可编辑——无需刷新。而且这还只是个开始。

禁用 vs 只读（Disabled Versus Read Only）

Disabled 和 Read Only 看起来都能限制编辑，但它们有重要区别，尤其影响键盘用户和屏幕阅读器用户的体验：

Disabled（禁用）：

• 字段显示为灰色、不可用状态；
• 无法用 Tab 键进入禁用字段，键盘用户会完全跳过它们；
• 屏幕阅读器可能根本不会播报禁用字段；
• 适用于"在条件满足前，该字段应完全不可访问"的场景。

Read Only（只读）：

• 字段正常显示，但不能编辑；
• 可以用 Tab 键进入只读字段，键盘可导航；
• 屏幕阅读器能找到并播报其内容，可访问性更好；
• 适用于"用户需要看到这个值但不能修改"的场景。

你可以实际测试：先用 Disabled 运行 Flow，再改成 Read Only 对比一下。选择标准很简单——Disabled 是"暂时别碰这个"，Read Only 是"你可以看但不能改"。对我们这个 bug 工单 Flow，用 Disabled 更合适，因为我们希望主动阻止编辑，直到用户取消勾选确认；而对那些"用户应查看但不应修改"的计算字段，Read Only 往往是更好的选择。

响应式预选 Picklist（一）：公式（Pre-Select a Picklist Value Reactively (1): The Formula）

客户在有紧急请求时，使用的语言往往是可以预测的，我们可以利用这一点来减少用户点击。让我们创建一个公式：它查找 Subject 字段中的特定关键词，一旦发现，就把 Priority 设为 High。

1. 点击工具箱图标以显示 Toolbox；
2. 点击 New Resource，API Name 输入 DefaultPriority，Data Type 选择 Text；
3. Formula 输入以下公式：

IF(
   OR(
      CONTAINS(LOWER({!Subject}),"urgent"),
      CONTAINS(LOWER({!Subject}),"cancel")
   ),
   "High",
   "Medium"
)

1. 点击 Done；
2. 在 Get Case Details 屏幕中选中 Priority 组件；
3. 把 Default Value 设为 DefaultPriority；
4. 点击 Done，保存 Flow。

现在，当 Subject 字段中出现 "urgent" 或 "cancel" 时，Priority 会自动切换为 High；否则为 Medium。这个公式对每一次击键都会做出反应——用户一边输入，Priority 一边变化。

响应式预选 Picklist（二）：工作原理（Pre-Select a Picklist Value Reactively (2): How It Works）

逐步拆解这个公式：

• LOWER({!Subject})——把主题文本全部转为小写，使匹配大小写不敏感；
• CONTAINS(LOWER({!Subject}), "urgent")——检查规范化后的主题文本中是否包含 "urgent"；
• OR(...)——任一条件为真即返回 True，"urgent" 或 "cancel" 出现任意一个都会触发 High；
• IF(OR(...), "High", "Medium")——为真则 Priority = High，否则 Priority = Medium。

一个关键细节：页面首次加载时，Subject 字段为空，所以 LOWER 返回空字符串，CONTAINS 返回 False，Default Value 就是 "Medium"。用户一输入匹配的词，公式立即重新求值，Priority 立即更新——用户不需要离开字段、点击任何地方或刷新任何内容。他们输入 "urgent"，看着 Priority 跳到 High，这就是让用户感觉软件"懂他们"的智能行为。

最佳实践：在公式中检查用户输入文本时，始终使用 LOWER()。像 CONTAINS()、BEGINS()、FIND()、SUBSTITUTE() 这些函数都是大小写敏感的，LOWER() 能让它们变得可预测——无论用户如何大写输入，都能正确匹配。

响应式计算日期（一）：滑块与业务规则（Calculate a Date Reactively (1): Slider & Business Rules）

支持团队成员创建工单时，Flow 让他们可以把 Due Date 设为任意值。但 Pyroclastic 的规范是：到期日应基于工单优先级——低优先级 18 天、中优先级 10 天、高优先级 3 天，并且团队成员最多可再增加 4 天。让我们基于 Priority 字段设置一个默认到期日，并给用户一个简单、可控的滑块来调整它。

第一步——添加滑块组件：

1. 在 Toolbox 中点击 New Resource；
2. 配置：API Name 输入 AdjustDueDate，Label 输入 Adjust Due Date，Range Maximum 设为 4，Slider Size 选 medium，其余字段保持默认；
3. 点击 Done。

滑块给用户提供了一个简单、可控的到期日调整方式——不用输入，只需从 0 拖到 4 天。滑块非常适合"有边界的调整"：用户能看到范围、拖到想要的数值，也不会误输入一个巨大的数字。滑块本身也是天生响应式的——用户一拖动，任何引用滑块值的公式都会实时更新。下一步，我们用公式把优先级映射和滑块调整合并成一个计算日期。

响应式计算日期（二）：日期公式（Calculate a Date Reactively (2): The Date Formula）

第二步——创建动态计算到期日的公式：在 Toolbox 中新建 Resource，API Name 输入 DefaultDueDate，Data Type 选 Date，Formula 输入：

TODAY()
+CASE({!Priority},"High",3,"Medium",10,"Low",18,10)
+IF(
   ISNULL({!AdjustDueDate.value}),
   0,
   {!AdjustDueDate.value}
)

三个部分协同工作：

1. TODAY()——获取当前日期作为起点；
2. CASE(...)——把 Priority 映射为天数："High"→3、"Medium"→10、"Low"→18，未匹配时默认 10；
3. IF(ISNULL(...))——加上滑块的值（0~4 天），若为 null 则加 0。

第三步——应用到 Due Date 组件：选中 Due Date → Default Value 设为 DefaultDueDate → Done → 保存。现在，改变 Priority 或拖动滑块，Due Date 就会在同一屏幕上即时重新计算。

响应式计算日期（三）：IF Null 修复（Calculate a Date Reactively (3): The IF Null Fix）

为什么要把滑块包在 IF/ISNULL 里？这是滑块组件的一个怪癖：当它的默认值是 0 时，其响应式取值会被框架当作 null 而不是 0。而日期字段无法处理 null 值——这会导致 Due Date 组件加载时变成空白，而不是显示计算出的日期。

修复方式很优雅：用 IF 语句先检查 ISNULL——如果滑块值是 null（页面加载时正是如此），就返回 0；否则返回滑块的真实值。这样公式总能产出一个有效的天数，Due Date 也总能正确显示。

这个 null 防护模式适用于任何可能产出 null 的响应式组件——文本字段、Picklist、复选框——只要你在把它们的值喂给"无法处理 null"的计算时，就应该套用。修复前，Due Date 在打开屏幕时加载为空白；修复后，Due Date 立即显示计算日期，滑块停在 0。

点击 Run 试试：改变优先级、拖动滑块，观察 Due Date 实时重新计算。

响应式引导用户（一）：条件可见性（Guide Users Reactively (1): Conditional Visibility）

输入校验对保护数据（和保护用户免受自己的错误）至关重要，但它要等用户点击离开当前屏幕才触发。有了响应式，你可以在用户做决定的那一刻就实时告知问题，节省他们的时间和精力。

为此，你使用所有 Flow 屏幕组件都具备的响应式特性：条件可见性（conditional visibility）。给组件添加条件可见性后，Flow 只在你指定的条件成立时才显示该组件。这些条件几乎可以引用 Flow 中的任何东西，包括同一屏幕上的其它组件。组件会根据指定条件响应式地出现或消失。

Pyroclastic 的支持团队最多可以把到期日往后推 4 天，但推后 3 天及以上需要申请审批。业务规则：

• 滑块增加 3 天及以上 → 需要审批；
• 滑块增加 少于 3 天 → 无需审批。

我们将创建两个 Display Text 组件，同一时刻只有一个会显示——Flow 会随着滑块移动而响应式地切换它们。为什么条件可见性优于验证规则？验证规则在用户点击"下一步"之后才触发（用户已经精神上"翻篇"了），而条件可见性在用户离开屏幕之前就发出提醒（用户可以当场修正）。响应式，就是实时引导用户，而不是事后责备用户。

响应式引导用户（二）：警告消息（Guide Users Reactively (2): Warning Messages）

先配置 WarningApproval（需要审批的警告）组件：

• API Name 输入 WarningApproval；
• 把 ⚠️ 表情复制粘贴到文本区，设成大号（48 大小看起来醒目又好看），后面跟上文字 This due date requires approval from your supervisor.；
• When to Display Component 选 All Conditions Are Met (AND)；
• Resource 依次选 Get Case Details → Adjust Due Date → Value，Operator 选 Greater Than or Equal，Value 输入 3；
• 点击 Done。

再配置 GreenNoApproval（无需审批）组件：

• API Name 输入 GreenNoApproval；
• 把 👍 表情复制粘贴到文本区（这个可以稍小一点，约 36 大小），后面跟上文字 This due date doesn't require approval.；
• When to Display Component 选 Any Condition Is Met (OR)；
• 第一条：Adjust Due Date → Value，Operator 选 Less Than，Value 输入 3；
• 第二条：Adjust Due Date → Value，Operator 选 Is Null，Value 选 True；
• 点击 Done 关闭 Screen 元素，保存 Flow。

为什么 GreenNoApproval 要加 null 条件？页面加载时滑块默认 0 → 取值是 null。没有这条 null 条件，默认状态下"无需审批"的消息就不会出现，用户得不到任何引导；加上它，绿色的"无需审批"消息会在页面加载时立即显示。拖动滑块，两条消息会响应式地互换——正好在 3 天处，警告出现、绿色消息消失；拖回去，它们又换回来。

响应式引导用户（三）：运行与回顾（Guide Users Reactively (3): Run & Review）

见证成果的时刻到了——运行完整的 Flow，体验一切协同工作：

1. 在 Subject 字段输入内容——当你输入 "urgent" 或 "cancel" 时，Priority 自动跳到 High；
2. 手动改变 Priority——Due Date 即时重新计算；
3. 拖动 Adjust Due Date 滑块——Due Date 逐日变化，同时审批消息在绿色👍和黄色⚠️之间切换；
4. 勾选 Confirmation 复选框——Subject 和 Description 变灰（Disabled）；
5. 取消勾选——它们恢复可编辑。

这一切都发生在一个屏幕上，交互之间无需点击任何"下一步"按钮。最终的用户体验是：输入主题 → 优先级自动建议；设置优先级 → 到期日自动计算；拖动滑块 → 审批引导出现；确认详情 → 字段锁定待审。这就是现代 Flow UX 该有的样子——响应式、智能、快速。恭喜你，你已经构建出了一个生产级的响应式 Flow！

---

文章来源：Trailhead - Quick Start: Build Reactive Screen Flows