Renderer.json for Custom Lightning Types

An optional file that you can configure for a custom Lightning type that you create. With this file you can customize how data is presented to the user by defining the output component.

You can define a single renderer for your entire custom Lightning type.

Let’s say that you have a custom Lightning type named flightFilter with the schema.json file. For information about how to create custom Lightning types, see LightningTypeBundle Metadata API.

You configure renderer.json to define a renderer for your entire custom Lightning type. As a result, the same renderer applies whenever you use the instance of this type as output.

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

+--lightningTypes
        +--flightFilter
            +--schema.json
            +--lightningDesktopGenAi
               +--renderer.json

To illustrate the concept, this example uses the Apex Class.

The Filter class contains two fields: price and discountPercentage.

By default, individual out-of-the-box renderers are displayed as output to the user. This example uses c/myFilterRenderer in a renderer to display flight details.

Color coding can help represent discount percentages based on their values. For example, the higher the percentage, the more prominent the color used to display the discount.

Let’s create a custom LWC component, myFilterRenderer, that contains the fields price and discountPercentage.

Here’s a sample code that shows the LWC component myFilterRenderer.

import { LightningElement } from 'lwc';
export default class MyFilterRenderer extends LightningElement {
    @api
    price = 0;
    @api
    discountPercentage = 0;
   …
   …
}

Reference this component in the renderer.json file.

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

{
  "renderer": {
    "componentOverrides": {
      "$": {
        "definition": "c/myFilterRenderer"
      }
    }
  }
}

Let’s say that you built the LWC component myExistingFilterRenderer that contains fields with the names cost and discountPercentage.

import { LightningElement } from 'lwc';
export default class MyExistingFilterRenderer extends LightningElement {
    @api
    cost = 0;
    @api
    discountPercentage = 0;
   …
   …
}

You decide to reuse the myExistingFilterRenderer component instead of creating a new one, myFilterRenderer, with field names price and discountPercentage. However, the field name price in the Flight Class doesn’t match the field name cost in myExistingFilterRenderer.

To map the fields from Flight class to the corresponding fields in the LWC component myExistingFilterRenderer, use attribute mapping.

Here’s a sample code that shows how to reference the LWC component myExistingFilterRenderer to override the renderer for the Filter output in the renderer.json file with attribute mapping.

{
  "renderer": {
    "componentOverrides": {
      "$": {
        "definition": "c/myExistingFilterRenderer"
        “attributes”: {
           “cost”: “{!$attr.price}”
        }
      }
    }
  }
}

The expression “cost”: “{!$attr.price}” indicates:

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

You can define a renderer for your structure list of data using the collection construct within the renderer configuration. This approach allows you to associate a custom Lightning Web Component (LWC) for rendering structured lists of data.

Let’s say that you have a custom Lightning type named hotelResponse with the schema.json file. For information about how to create custom Lightning types, see LightningTypeBundle Metadata API.

You configure renderer.json for rendering the entire list of hotel data.

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

+--lightningTypes
        +--hotelResponse
            +--schema.json
            +--lightningDesktopGenAi
               +--renderer.json

To illustrate the concept, this example uses the Apex Class.

By default, individual out-of-the-box renderers are used to display the list of hotel data. This example uses c/hotelDetails in a collection renderer to display the list of hotel data.

For example, to display a list of hotels.

Let’s create a custom LWC component, hotelDetails, that contains the field value.

Here’s a sample code that shows the LWC component hotelDetails.

import { LightningElement, api } from "lwc";
export default class HotelDetails extends LightningElement {
  @api value;
}

Reference this component in the renderer.json file.

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

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

j

No Results

Search Tips:

• Please consider misspellings
• Try different search keywords

Get Started

Agentforce Agents

Create Actions with Apex REST Agent Actions (Beta)

Build and Test Agents with Agentforce DX (Beta)

Chat with Agents Using Agent API

Test Agents Using Testing API

Enhance the Agent UI with Custom LWCs and Lightning Types

Get Started

Standard Lightning Types

Custom Lightning Types

Schema.json

Editor.json

Renderer.json

View a List of Lightning Types in Your Org

Custom Lightning Type Examples

Reference

Metadata and Tooling

Models

VS Code Extension