Custom Lightning Types 实战：酒店预订 Collection Renderer

酒店预订示例：Collection Renderer 列表输出覆盖

本示例演示 Collection Renderer Override——当 Agent Action 返回酒店列表时，使用自定义 CLT 覆盖默认的 JSON 数组显示。与航班示例（单对象输出+自定义输入表单）不同，本例的核心是列表类型输出的集合渲染器覆盖。

下载示例文件：apexClasses.zip、hotelLWCandCLT.zip。

酒店 Agent Action 的 Apex 类

使用六个 Apex 类协同创建 Find Hotels 自定义 Agent Action：

类名	职责	关键字段
`HotelReservation`	主类，含 @InvocableMethod Find hotels	findHotels(List<HotelRequest>) → List<HotelResponse>
`HotelResponse`	响应包装	List<Hotel> hotels
`Hotel`	酒店详情	name, address, List<Room> rooms, HotelCategory
`Room`	房间详情	type, available, discountPercentage, price, petAllowed
`HotelCategory`	星级评分	star
`HotelRequest`	搜索输入	city, checkInDate, checkOutDate

注意：示例中硬编码了酒店数据（Sahara Hotels + Taj Vivanta）。生产环境从外部服务获取实时数据。

默认 UI 与结果数据

Agent Action 配置：输入 checkInDate/checkOutDate/city（标准 Lightning Types：dateType/textType），输出 hotels（列表类型，引用 @apexClassType/c__Hotel）。

默认输出问题：返回的酒店列表以原始 JSON 数组展示——name/address/rooms（嵌套 type/price/petAllowed）/hotelCategory（嵌套 star）。所有数据扁平堆叠，无标签、无格式化、完全不可读。

{"hotels":[{"rooms":[{"type":"DELUX","price":2000,"petAllowed":false,"discountPercentage":15.15,"available":2}],"name":"Sahara Hotels","hotelCategory":{"star":"four"},"address":"Gacchibowli Hyderabad"},{"rooms":[{"type":"DELUX","price":2000,"petAllowed":false,"discountPercentage":15.15,"available":2}],"name":"Taj Vivanta","hotelCategory":{"star":"five"},"address":"Kokapet"}]}

自定义输出：hotelResponse CLT

创建 CLT hotelResponse 覆盖列表输出 UI。关键区别：与航班示例的单对象 renderer 不同，这里使用 collection renderer。

文件结构

lightningTypes/
  hotelResponse/
    schema.json
    lightningDesktopGenAi/
      renderer.json

schema.json — 声明类型映射

{"title":"Hotel Reservation","description":"Hotel Reservation","lightning:type":"@apexClassType/c__Hotel"}

renderer.json — Collection Renderer（关键区别！）

{"collection":{"renderer":{"componentOverrides":{"$":{"definition":"c/hotelDetails"}}}}}

对比航班示例：航班用 "renderer":{"componentOverrides":...}（单对象），酒店用 "collection":{"renderer":{...}}（列表）。这是两种模式的核心区别。

LWC：hotelDetails

js-meta.xml Target：lightning__AgentforceOutput + sourceType lightning__listType + itemTypeName c__hotelResponse。注意：sourceType 是 listType 而非直接 Apex 类型——因为渲染的是列表
JS：仅 @api value;——Agent 传递的整个酒店列表作为 value。渲染逻辑完全在 HTML 中通过 for:each 处理
HTML 结构：酒店卡片（name+address+location 图标）→ 房间列表（type 粗体 + Available 数量 + Pets Allowed 状态 + 价格标签 ₹ + 折扣芯片 % Off）。两层嵌套遍历：外层 for:each={value}（酒店列表），内层 for:each={hotel.rooms}（房间列表）

集成与最终效果

集成步骤

打开 Find hotels Agent Action
编辑 HotelResponse 输出的 Output Rendering 参数
选择 hotelResponse CLT → 保存（"Unsupported Data Type" 可安全忽略）
重新加载 Agent 页面后测试

最终效果

搜索"Hyderabad"→ Agent 返回结构化的酒店卡片列表：Sahara Hotels（四星）+ Taj Vivanta（五星），每家含 DELUX 房间详情（₹2000/晚、15.15% 折扣、2 间可用、宠物友好状态）。从原始 JSON 到消费级酒店搜索体验。

Collection Renderer vs 单对象 Renderer 对比

维度	航班示例（单对象）	酒店示例（Collection）
renderer.json 结构	`"renderer":{"componentOverrides":...}`	`"collection":{"renderer":{"componentOverrides":...}}`
LWC sourceType	`c__flightResponse`（Apex 类型名）	`lightning__listType` + `itemTypeName="c__hotelResponse"`
数据接收	@api value 接收单个对象	@api value 接收整个数组，HTML 中 for:each 遍历
适用场景	返回单个复杂对象（如航班详情）	返回列表（如搜索结果、多酒店、多产品）

总结：航班和酒店两个示例完整覆盖了 Custom Lightning Types 的两大核心模式——单对象输出+自定义输入表单（编辑器+渲染器），以及列表输出的集合渲染器覆盖。选择哪种模式取决于 Agent Action 的输出是单个对象还是列表。

Custom Lightning Types 实战：酒店预订集合渲染器