航班预订示例自定义 Lightning Types 输入和输出本示例展示如何使用自定义 Lightning Types 来覆盖 Agent Action 的默认输入和输出 UI。我们将使用 FlightAgent Apex 类查找可用航班创建两个自定义 Lightning TypeflightResponse输出渲染器——以精美的卡片布局展示航班和 flightFilter输入编辑器——带标签的表单字段收集价格和折扣输入。Apex 类设计FlightAgent — 主 InvocableMethodInvocableMethod(labelFind Flights descriptionFinds available flights)输入FlightRequestoriginCity、destinationCity、dateOfTravel、filters输出FlightResponse → AvailableFlight → ListFlight数据类结构类字段FlightflightId (String), numLayovers (Integer), isPetAllowed (Boolean), price (Long), discountPercentage (Double), durationInMin (Integer)AvailableFlightglobal ListFlight flightsFlightRequestFilterprice (Long), discountPercentage (Double) — 可选搜索过滤器FlightRequestoriginCity, destinationCity, dateOfTravel, filters (FlightRequestFilter)示例硬编码了四个航班演示用生产环境应从外部服务获取IX 28141 次转机$100020.2% 折扣70 分钟、6E 4882 次转机$200015.15% 折扣120 分钟、6E 5231 次转机$300013.14% 折扣75 分钟、6E 61662 次转机$400014.14% 折扣130 分钟。创建 Agent Action 和默认 UI 问题使用 FlightAgent 类创建 Agent Action 后默认 UI 存在严重问题默认输入 UI 问题只显示基本字段出发城市、目的城市、旅行日期过滤器字段价格和折扣百分比完全不可见——用户无法筛选航班默认输出 UI 问题航班数据以原始 JSON格式返回无标签、布局混乱、难以理解无视觉层次或样式 —— 用户必须手动解析 JSON 才能比较航班// 默认输出 —— 原始 JSON {aFlight: {flights: [ {flightId: IX 2814, price: 1000, numLayovers: 1, ...}, {flightId: 6E 488, price: 2000, numLayovers: 2, ...} ]}}目标创建两个自定义 Lightning Type —— flightResponse 将原始 JSON 转换为精美的航班卡片flightFilter 显示带标签的价格和折扣输入字段。自定义输出 UIflightResponse CLT目录结构lightningTypes/ flightResponse/ schema.json lightningDesktopGenAi/ renderer.jsonschema.json引用 Apex 类类型告诉系统这个自定义类型映射到哪个数据结构{ title: My Flight Response, description: My Flight Response, lightning:type: apexClassType/c__AvailableFlight }renderer.json — 用自定义 LWC 覆盖默认渲染使用顶级 renderer覆盖整个输出组件{ renderer: { componentOverrides: { $: { definition: c/flightDetails } } } }LWCflightDetails 组件Targetlightning__AgentforceOutput在 js-meta.xml 中sourceTypec__flightResponseHTML 布局lightning-card 展示每个航班——航班 ID 折扣标签、价格粗体、持续时间、出发/到达时间线、转机次数、宠物政策JS 逻辑将持续时间从分钟格式化为 X hr Y min、计算到达时间、将 petAllowed 映射为 Yes/No渠道支持lightningDesktopGenAi文件夹用于桌面 Agentforce 聊天可额外配置enhancedWebChat文件夹用于 Web 聊天渠道。集成步骤打开 Agent Action → 编辑 aFlight 的 Output Rendering选择flightResponse自定义 Lightning Type保存忽略 Unsupported Data Type 提示——无害测试前重新加载 Agent 页面自定义输入 UIflightFilter CLT目录结构lightningTypes/ flightFilter/ schema.json lightningDesktopGenAi/ editor.jsonschema.json{ title: Flight Filter, description: Flight Filter, lightning:type: apexClassType/c__FlightRequestFilter }editor.json — 用自定义 LWC 覆盖默认输入表单{ editor: { componentOverrides: { $: { definition: c/flightRequestFilter } } } }LWCflightRequestFilter 组件Targetlightning__AgentforceInputtargetTypec__flightFilterHTMLlightning-card Price and Discount Percentage 包含两个 lightning-input 字段——Price数字min 1000 / max 20000 / step 1、Discount Percentage数字min 0 / max 100 / step 1关键模式 — handleInputChange()这是输入数据绑定的核心connectedCallback()—— 加载已有值handleInputChange()—— 捕获用户输入、更新组件状态、派发valuechangeCustomEvent包含 {price, discountPercentage} detail通知父 Planner 组件、使用stopPropagation()阻止不需要的事件传播集成打开 Agent Action → 编辑 filters 的 Input Rendering选择flightFilter自定义 Lightning Type → 保存重新加载 Agent 页面后测试注意确保子代理指令正确引导 LLM 使用 UI 表单输入而非文本输入改造前后对比输出改造方面改造前默认改造后flightResponse CLT展示方式原始 JSON 无格式精美卡片布局 航班图标标签无航班 ID 折扣标签、价格加粗、出发/到达时间线可读性难以扫描和比较一目了然比较航班差异输入改造方面改造前默认改造后flightFilter CLT可见字段仅基本字段origin、destination、date新增 Price 和 Discount Percentage 卡片过滤器能力无法筛选航班带约束的数字输入min/max/step核心技术模式总结模式用途关键配置顶级 Renderer覆盖整个输出显示renderer: {componentOverrides: {$: {definition: c/xxx}}}顶级 Editor覆盖输入表单显示editor: {componentOverrides: {$: {definition: c/xxx}}}schema.json映射 Apex 类类型lightning:type: apexClassType/c__ClassNameLWC Target输出组件lightning__AgentforceOutputLWC Target输入组件lightning__AgentforceInput输入数据绑定实时更新 PlannerhandleInputChange()valuechangeCustomEvent通过 schema.json 引用 Apex 类型、renderer.json 覆盖输出渲染、editor.json 覆盖输入表单配合自定义 LWC 组件你可以将 Agent Action 的默认原始 JSON UI 完全改造为品牌化、专业级的用户体验。发布来源Custom Lightning Types 实战航班预订示例 | Salesforce CRM 中文站
