Example: Customizing User Interface Using Custom Lightning Types with Collection Renderer Override

This example explains how to override the default user interface to create a customized appearance of responses on the custom agent’s action output with custom Lightning types.

In this example, you specify a renderer collection override for the custom Lighting type that you created.

Download these sample data files.

This section includes the Apex class Hotel Reservation that retrieves hotel information based on your request.

Use this Apex class to create a custom agent action.

This Apex class accepts the hotel search criteria, including the check in date, check out date, and city, and then returns a list of available hotels.

For this example, hotel availability data is already included in the Apex class. However, in a real-time scenario, hotel information is fetched from an external service, and the Apex class processes that data to generate the final response.

For information about how to create a custom action by using Apex class, see Create a Custom Agent Action.

Inputs and outputs for the agent action are defined by using standard Lightning types.

Input:

  • checkInDate, checkOutDate, and city use standard Lightning types such as lightning__dateType and lightning__textType.

Output:

  • The output hotels for the agent action is a list type.

Here’s an image that shows the custom agent action created.

Input and output settings for a 'Find hotels' agent action. Inputs: checkInDate, checkOutDate, filters, City. Output: hotels.

The available flight information is retrieved by using @apexClassType/c__HotelReservation$Hotel in the agent action output, where:

  • apexClassType is the bundle name.
  • HotelReservation is the parent class.
  • Hotel is a nested Apex class within HotelReservation.

When you execute this agent action, it prompts you to provide input and then generates the output.

The agent’s action UI collects these details to find available hotels.

  • Check in date
  • Check out date
  • City

Here’s the image that shows how the custom agent action input appears in an agent conversation.

Agent action input collects hotel details: checkInDate, checkOutDate, and city.

The agent’s action UI returns the available hotel details.

Here’s the image that shows how the custom agent action’s output appears in an agent conversation.

Agent's response to a hotel details request. The response lacks labels and is presented in a format that is hard to understand.

The agent displays the hotel data in the response.

Here’s the sample code that shows the available hotel data.

Create a custom Lightning type named hotelResponse to enhance the visibility of the information in the output UI.

Override the agent’s action UI for output to enhance the user experience by using Custom Lightning Types (CLTs). With CLTs, you can add your own Lightning Web Components (LWC) to present data for lists in a more structured and intuitive format.

Configure the renderer.json file to override the default UI of a custom Lightning type in the agent action.

Here’s an example showing a lightningTypes folder for a custom Lightning type named hotelResponse.

The custom Lightning type hotelResponse includes a schema.json file and a renderer.json file. The renderer.json file controls how the data is displayed to the user in the agent action output.

This sample code shows the contents of the schema.json file.

This sample code shows the contents of the renderer.json file.

This section explains how the components are created and deployed for agent action output.

This image shows the Lightning Web Component (LWC) folder structure.

The lwc folder contains a folder named hotelDetails, which is the LWC component. The hotelDetails folder includes CSS, HTML, JS, and metadata files.

The LWC component includes HTML markup designed to accept output for @apexClassType/c__HotelReservation$Hotel. This HTML markup ensures that the data is displayed

This sample code shows the contents of the hotelDetails.js-meta.xml file.

When you create an LWC component to override the UI for action input, use lightning__AgentforceInput as the target. For output, use lightning__AgentforceOutput. For information about LWC target types, see lightning__AgentforceInput Target and lightning__AgentforceOutput Target.

This sample code shows the contents of the hotelDetails.html file.

This sample code shows the contents of the hotelDetails.js file.

See Also

To add a custom Lightning type to the agent action, complete these steps.

  1. Open the agent action.
  2. Edit the Output Rendering parameter of the agent action output for HotelResponse.
  3. Select the custom lightning type HotelResponse.
  4. Save the agent action.

This image shows the custom Lightning type that you created.

The agent action output settings with 'hotelResponse' selected in the Output Rendering field.

Before executing the agent action that you modified, reload the agent page. The agent prompts you to provide input and then generate the output. The output provides a new UI experience.

This image shows how the custom agent action’s input appears in an agent conversation.

Agent's response to a hotel details request. The response includes clear labels and is presented in a format that is easy to understand.