Example: Customizing User Interface Using Custom Lightning Types with Top-Level 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.

• apexClass.zip
• hotelLWCandCLT.zip

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.

Before you can add custom Lightning types to agent actions, create the agent and configure it to use your Apex class.

1. From the Agentforce Studio app, create a new Agentforce Employee Agent or Agentforce Service Agent and name it (for example, Hotel Search Agent).
2. Open your agent, create a new subagent named Hotel Search, and open it to add actions.
3. Add a new action named Find hotels to your subagent, set the Reference Action Type to Apex, and select the Find hotels method from the HotelReservation class you deployed earlier.
4. Switch to Script mode and add is_user_input: True to each input that the agent collects from the user.
5. In the Hotel Search subagent, add instructions that tell the agent when to use the action and what data to collect. For example: “When a customer asks about hotel availability or wants to search for hotels, use the {!@actions.Find_hotels} action. Collect the checkin date, checkout date, and city from the customer before running the action.”

This code shows the Hotel_Search subagent and Find_hotels action that the preceding steps create. To create the same configuration directly, add this code to the agent script.

When you add the code directly to the agent script, also add this transition to the Agent Router’s actions section to route hotel-search requests to the Hotel Search subagent.

This image shows the transition in the Agent Router’s actions section.

See Also

• Create an Agent
• Create a Custom Subagent
• Create a Custom Action
• Add an Action to a Subagent from the Asset Library
• How Subagent Instructions are Resolved to Build a Prompt

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.

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.

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.

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.

This image shows an example of the hotelResponse folder structure.

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 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.

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

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

See Also

• Lightning Web Components Developer Guide: Get Started with Lightning Web Components

After you create a custom Lightning type and Lightning Web Component, configure the agent action to use them.

1. In Agentforce Builder, open your agent.
2. In the Explorer panel, go to your subagent and select the Find hotels action.
3. Switch to Script mode using the toggle at the top of the canvas.
4. Locate the filters output parameter in the action configuration
5. Replace the existing value of the complex_data_type_name property ‌with c__hotelResponse. Custom Lightning types use the c__ namespace prefix.
6. Click Save.

Here’s an image that shows the custom Lightning type configured in Script mode:

See Also

• Agent Script Reference: Actions

After you configure the custom Lightning types for output in the agent script, preview the conversation to verify the user experience. Once you’re satisfied with the customized UIs, commit and activate your agent to make it available to users.

1. In Agentforce Builder, click the Preview tab.

2. Enter a test utterance, such as “Find hotels.”

3. When the agent prompts for details, enter the input and review the agent’s final response to verify that the hotel data renders using your custom hotelResponse LWC cards.

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

   

4. At the top of the canvas, click Commit Version and then click Commit to confirm.

   To make further changes after this point, you must create a new draft from the committed version.

5. With the committed version selected, click Activate and confirm the activation to make the agent available to users. The currently active version (if any) is automatically deactivated.

See Also

• Explore Agentforce Builder
• Commit an Agent Version
• Activate or Deactivate Your Agent