Define a Top-Level Editor Override

You can define a single editor for your entire custom Lightning type in the editor.json file. This editor applies whenever an instance of the type is used as an input parameter.

For example, you have a custom Lightning type named flightFilter that corresponds to the Apex class Filter with two fields: price and discountPercentage. You want to use a slider to select a value for the discount percentage and apply minimum and maximum limits for the price.

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

This example uses lightningDesktopGenAi to configure the custom Lightning type. To configure the type for a different channel, create the editor.json file inside the folder that corresponds to that channel.

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

  2. Update the js-meta.xml file.

    Include the lightning__AgentforceInput target.

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

  3. Configure the editor.json file.

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

    Here’s how to reference myFilterComponent to override the editor for the Filter input in the editor.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 myExistingFilterComponent.

  2. Update the js-meta.xml file.

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

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

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

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

    This sample code shows how to reference myExistingFilterComponent to override the editor for the Filter input in the editor.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 myExistingFilterComponent
  • {!$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 myExistingFilterComponent and vice versa.

See Also