酒店预订示例集合渲染器覆盖列表输出本示例展示如何使用集合渲染器Collection Renderer——这是一种自定义列表项显示方式的模式。与航班示例中使用的顶级 renderer/editor 覆盖不同集合渲染器控制列表中每一项的渲染方式。我们将使用 HotelReservation Apex 类查找可用酒店然后创建 hotelResponse 自定义 Lightning Type将酒店列表渲染为精美的卡片。Apex 类设计HotelReservation — 主 InvocableMethodInvocableMethod(labelFind hotels descriptionFind Available Hotels)输入HotelRequestcity、checkInDate、checkOutDate—— 三个简单字段输出HotelResponse → ListHotel ——关键区别输出是列表数据类结构类字段Hotelname (String), address (String), rooms (ListRoom), hotelCategory (HotelCategory)Roomtype (String), available (Integer), discountPercentage (Double), price (Long), petAllowed (Boolean)HotelCategorystar (String) — 如 four、fiveHotelRequestcity (String), checkInDate (Date), checkOutDate (Date)示例硬编码两家酒店生产环境应从外部服务获取Sahara Hotels四星Gacchibowli HyderabadDELUX 房间 $200015.15% 折扣和Taj Vivanta五星KokapetDELUX 房间 $200015.15% 折扣。默认 UI 和结果数据创建 Agent Action方法Find hotels输入checkInDate (dateType), checkOutDate (dateType), city (textType)输出hotels —list 类型使用 apexClassType/c__Hotel默认输出问题原始 JSON 无格式显示——酒店名称、地址、星级、房间信息全部混杂在一起无法快速浏览和比较酒店选项{hotels: [ {name: Sahara Hotels, address: Gacchibowli Hyderabad, hotelCategory: {star: four}, rooms: [{type: DELUX, price: 2000, discountPercentage: 15.15, available: 2}] }, {name: Taj Vivanta, address: Kokapet, hotelCategory: {star: five}, rooms: [/* 同上结构 */] } ]}目标创建 hotelResponse CLT使用集合渲染器将每个酒店显示为带样式的卡片。自定义输出hotelResponse CLT目录结构lightningTypes/ hotelResponse/ schema.json lightningDesktopGenAi/ renderer.jsonschema.json引用单个 Hotel 的 Apex 类类型而非列表{ title: Hotel Reservation, description: Hotel Reservation, lightning:type: apexClassType/c__Hotel }renderer.json — 集合渲染器与航班示例的关键区别使用collection键包裹 componentOverrides告诉系统对列表中的每个单独项目应用 LWC{ collection: { renderer: { componentOverrides: { $: { definition: c/hotelDetails } } } } }两种覆盖模式对比模式渲染器结构适用场景顶级 Renderer航班示例renderer: {componentOverrides: {...}}覆盖整个输出组件集合 Renderer酒店示例collection: {renderer: {componentOverrides: {...}}}覆盖列表中每一项的渲染方式。LWC 每次接收一个列表项LWChotelDetails 组件Targetlightning__AgentforceOutputsourceTypelightning__listTypeitemTypeNamec__hotelResponseHTML 布局lightning-card Available Hotels 带旅行图标 —— 迭代 {value} 数组 —— 每个酒店名称 位置图标 地址 —— 每个房间类型、可用数量、宠物政策、价格₹、折扣标签JS极简 —— 仅api value组件通过 value 属性接收数据关键区别集合渲染器中的 LWC 接收单个列表项而非整个列表通过api value属性。这使得每个酒店都能获得一致的卡片样式。集成和最终效果集成步骤打开 Agent Action → 编辑 HotelResponse 的 Output Rendering 参数选择hotelResponse自定义 Lightning Type保存忽略 Unsupported Data Type 提示测试前重新加载 Agent 页面改造前默认 UI原始 JSON —— 酒店名称、地址、星级和房间信息全部混杂无视觉卡片、无图标、无结构无法快速比较酒店改造后hotelResponse CLTAvailable Hotels 卡片 旅行图标标题每个酒店以独立样式卡片展示酒店名称标题 位置图标 地址每个房间在阴影子框中展示房型粗体标题、可用数量事件图标、宠物政策动物图标、价格₹ 突出显示、折扣百分比标签/芯片干净、专业、可快速浏览的布局三种覆盖模式最终总结模式renderer.json 结构适用场景顶级 Renderer{renderer: {componentOverrides: {$: {definition: c/xxx}}}}覆盖整个输出显示航班示例集合 Renderer{collection: {renderer: {componentOverrides: {$: {definition: c/xxx}}}}}覆盖列表中每项渲染——LWC 接收单个项酒店示例顶级 Editor{editor: {componentOverrides: {$: {definition: c/xxx}}}}覆盖输入表单显示航班 Filter 示例集合渲染器是列表输出的核心模式 —— 它将每个列表项作为独立卡片渲染配合顶级 Renderer 和 Editor 模式组成了 Custom Lightning Types UI 自定义的完整工具箱。发布来源Custom Lightning Types 实战酒店预订集合渲染器 | Salesforce CRM 中文站
Custom Lightning Types 实战：酒店预订集合渲染器
酒店预订示例集合渲染器覆盖列表输出本示例展示如何使用集合渲染器Collection Renderer——这是一种自定义列表项显示方式的模式。与航班示例中使用的顶级 renderer/editor 覆盖不同集合渲染器控制列表中每一项的渲染方式。我们将使用 HotelReservation Apex 类查找可用酒店然后创建 hotelResponse 自定义 Lightning Type将酒店列表渲染为精美的卡片。Apex 类设计HotelReservation — 主 InvocableMethodInvocableMethod(labelFind hotels descriptionFind Available Hotels)输入HotelRequestcity、checkInDate、checkOutDate—— 三个简单字段输出HotelResponse → ListHotel ——关键区别输出是列表数据类结构类字段Hotelname (String), address (String), rooms (ListRoom), hotelCategory (HotelCategory)Roomtype (String), available (Integer), discountPercentage (Double), price (Long), petAllowed (Boolean)HotelCategorystar (String) — 如 four、fiveHotelRequestcity (String), checkInDate (Date), checkOutDate (Date)示例硬编码两家酒店生产环境应从外部服务获取Sahara Hotels四星Gacchibowli HyderabadDELUX 房间 $200015.15% 折扣和Taj Vivanta五星KokapetDELUX 房间 $200015.15% 折扣。默认 UI 和结果数据创建 Agent Action方法Find hotels输入checkInDate (dateType), checkOutDate (dateType), city (textType)输出hotels —list 类型使用 apexClassType/c__Hotel默认输出问题原始 JSON 无格式显示——酒店名称、地址、星级、房间信息全部混杂在一起无法快速浏览和比较酒店选项{hotels: [ {name: Sahara Hotels, address: Gacchibowli Hyderabad, hotelCategory: {star: four}, rooms: [{type: DELUX, price: 2000, discountPercentage: 15.15, available: 2}] }, {name: Taj Vivanta, address: Kokapet, hotelCategory: {star: five}, rooms: [/* 同上结构 */] } ]}目标创建 hotelResponse CLT使用集合渲染器将每个酒店显示为带样式的卡片。自定义输出hotelResponse CLT目录结构lightningTypes/ hotelResponse/ schema.json lightningDesktopGenAi/ renderer.jsonschema.json引用单个 Hotel 的 Apex 类类型而非列表{ title: Hotel Reservation, description: Hotel Reservation, lightning:type: apexClassType/c__Hotel }renderer.json — 集合渲染器与航班示例的关键区别使用collection键包裹 componentOverrides告诉系统对列表中的每个单独项目应用 LWC{ collection: { renderer: { componentOverrides: { $: { definition: c/hotelDetails } } } } }两种覆盖模式对比模式渲染器结构适用场景顶级 Renderer航班示例renderer: {componentOverrides: {...}}覆盖整个输出组件集合 Renderer酒店示例collection: {renderer: {componentOverrides: {...}}}覆盖列表中每一项的渲染方式。LWC 每次接收一个列表项LWChotelDetails 组件Targetlightning__AgentforceOutputsourceTypelightning__listTypeitemTypeNamec__hotelResponseHTML 布局lightning-card Available Hotels 带旅行图标 —— 迭代 {value} 数组 —— 每个酒店名称 位置图标 地址 —— 每个房间类型、可用数量、宠物政策、价格₹、折扣标签JS极简 —— 仅api value组件通过 value 属性接收数据关键区别集合渲染器中的 LWC 接收单个列表项而非整个列表通过api value属性。这使得每个酒店都能获得一致的卡片样式。集成和最终效果集成步骤打开 Agent Action → 编辑 HotelResponse 的 Output Rendering 参数选择hotelResponse自定义 Lightning Type保存忽略 Unsupported Data Type 提示测试前重新加载 Agent 页面改造前默认 UI原始 JSON —— 酒店名称、地址、星级和房间信息全部混杂无视觉卡片、无图标、无结构无法快速比较酒店改造后hotelResponse CLTAvailable Hotels 卡片 旅行图标标题每个酒店以独立样式卡片展示酒店名称标题 位置图标 地址每个房间在阴影子框中展示房型粗体标题、可用数量事件图标、宠物政策动物图标、价格₹ 突出显示、折扣百分比标签/芯片干净、专业、可快速浏览的布局三种覆盖模式最终总结模式renderer.json 结构适用场景顶级 Renderer{renderer: {componentOverrides: {$: {definition: c/xxx}}}}覆盖整个输出显示航班示例集合 Renderer{collection: {renderer: {componentOverrides: {$: {definition: c/xxx}}}}}覆盖列表中每项渲染——LWC 接收单个项酒店示例顶级 Editor{editor: {componentOverrides: {$: {definition: c/xxx}}}}覆盖输入表单显示航班 Filter 示例集合渲染器是列表输出的核心模式 —— 它将每个列表项作为独立卡片渲染配合顶级 Renderer 和 Editor 模式组成了 Custom Lightning Types UI 自定义的完整工具箱。发布来源Custom Lightning Types 实战酒店预订集合渲染器 | Salesforce CRM 中文站
