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.

Use these Apex classes together to create a custom agent action that finds available hotels. The main HotelReservation class contains the invocable method, and the other classes define the complex data structures for the request and response.

When you create your custom agent action, select the method Find hotels.

HotelReservation Class

This class is the main class that contains the logic for the find hotels agent action.

HotelResponse Class

This class defines the data structure for the response that returns a list of available hotels.

Hotel Class

This class defines the data structure for hotel details.

Room Class

This class defines the data structure for rooms within a hotel.

HotelCategory Class

This class defines the data structure for a hotel’s star rating.

HotelRequest Class

This class defines the data structure for the agent action’s input criteria.

The Apex class Hotel Reservation 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 Hotel Reservation 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, City. Output: hotels.

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

  • apexClassType is the bundle name.
  • Hotel is the Apex class.

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__Hotel. This HTML markup ensures that the data is displayed in an intuitive and customized format.

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.