Define a Top-Level Renderer Override

You can define a single renderer for your entire custom Lightning type. The renderer applies whenever an instance of the type is returned as output.

For example, you have a custom Lightning type named flightFilter that corresponds to an Apex class Filter with two fields: price and discountPercentage You want to display the data using a custom card that color-codes the discount.

Here’s an example of what the renderer.json file can look like for the custom Lightning type flightFilter.

This example uses lightningDesktopGenAi to configure the custom Lightning type. Only specific channels support output overrides (renderer.json). Verify that your channel supports this feature before configuring the file.

Example: Basic Configuration Using the value Property

This example shows you how to configure a component to handle the entire object via a single @api value property. The component receives the full object in one field.

  1. Create the LWC.

    This sample code shows the LWC component myFilterRenderer.

  2. Update the js-meta.xml file.

    Include the lightning__AgentforceOutput target.

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

  3. Configure the renderer.json file.

    Use the $ keyword to map the type to the component.

    Here’s how to reference the LWC component myFilterRenderer to override the renderer for the Filter output in the renderer.json file.

Example: Attribute Mapping

If you’re reusing an existing component and the property names don't match your schema (for example, the component uses cost instead of price), you must map the fields.

  1. Create the LWC.

    This sample code shows myExistingFilterRenderer.

  2. Update the js-meta.xml file.

    Expose the properties in targetConfigs to register them as valid input fields for the lightning__AgentforceOutput target.

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

  3. Configure the renderer.json file with attribute mapping.

    Use the attributes object to link schema fields to component fields.

    This sample code shows how to reference myExistingFilterRenderer to override the renderer for the Filter output in the renderer.json file.

You must map the component’s fields to the corresponding fields in the Apex class, even if they have the same name. However, if the component receives the entire Apex class object through a single value attribute, you don’t need to map the individual attributes.

The expression "cost": "{!$attrs.price}" indicates:

  • cost: Field in the LWC component myExtistingFilterRenderer
  • {!$attrs}: Pointer to the Filter class
  • price: Field in the Filter class
  • {!$attrs.price}: Links the price field of the Filter Apex class to the cost field of the LWC component myExtistingFilterRenderer and vice versa

See Also