You can define a specific editor for an individual property within your custom Lightning type in the editor.json file. This editor applies only to the specified property, while default editors continue to handle the remaining properties.
For example, you have a custom Lightning type named contactType with two properties: firstName and lastName. You want to use a custom input component to handle the lastName property (perhaps to add specific validation or styling), while the default text editor handles the firstName.
Here’s an example of what the editor.json file organization looks like for the custom Lightning type contactType.
1+--lightningTypes
2 +--contactType
3 +--schema.json
4 +--experienceBuilder
5 +--editor.jsonExample: Configuration Using Property Names
This example shows you how to configure a component to handle a specific property. The component receives only the value for that property via an @api value property.
Define the schema.json file.
This schema defines the data structure. It defines a firstName and lastName property, but you override only the lastName.
1{
2 "title": "Contact Type",
3 "description": "Contact of a Person",
4 "lightning:type": "lightning__objectType",
5 "properties": {
6 "firstName": {
7 "title": "First Name",
8 "description": "First Name of person",
9 "lightning:type": "lightning__textType",
10 "maxLength": 50
11 },
12 "lastName": {
13 "title": "Last Name",
14 "description": "Last name of person",
15 "lightning:type": "lightning__textType",
16 "maxLength": 50
17 }
18 },
19 "required": ["firstName", "lastName"]
20}Create the LWC Bundle.
Create a custom Lightning Web Component (such as c/customLastNameInput) to handle the specific property.
The customLastNameInput.html template binds the standard input component to your custom logic.
1<template>
2 <lightning-input
3 type="text"
4 label={label}
5 value={value}
6 required={required}
7 disabled={disabled}
8 onchange={handleChange}
9 placeholder="Enter Last Name (Custom)"
10 message-when-value-missing="Last Name is required for this contact type."
11 >
12 </lightning-input>
13</template>The customLastNameInput.js file handles the data flow. The component exposes public properties—such as value, label, and required—to receive data. To capture the user’s input, the component dispatches a valuechange event whenever the value updates.
1import { LightningElement, api } from "lwc";
2
3export default class CustomLastNameInput extends LightningElement {
4 @api value; // Receives the current value of 'lastName'
5 @api label; // Receives the 'title' from the schema ("Last Name")
6 @api required; // Receives the required state (true)
7 @api disabled; // Handled by the panel (e.g., after submission)
8
9 handleChange(event) {
10 const newValue = event.detail.value;
11
12 // Notify the system that the value has changed
13 this.dispatchEvent(
14 new CustomEvent("valuechange", {
15 detail: {
16 value: newValue,
17 validity: event.target.checkValidity(), // Optional: pass validity state
18 },
19 }),
20 );
21 }
22}The customLastNameInput.js-meta.xml file exposes the component to the editor.
1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 <apiVersion>64.0</apiVersion>
4 <isExposed>true</isExposed>
5 <targets>
6 <target>lightning__PropertyEditor</target>
7 </targets>
8</LightningComponentBundle>Configure the editor.json file.
Use the property name lastName as the key in the componentOverrides section.
Here’s how to reference customLastNameInput to override the editor in the editor.json file.
1{
2 "editor": {
3 "componentOverrides": {
4 "lastName": {
5 "definition": "c/customLastNameInput"
6 }
7 }
8 }
9}Example: Layout Configuration
If you’re reusing an existing component and decide to use layouts, you can combine the layout and componentOverrides sections in the editor.json file. With this approach, you control the visual arrangement of properties while simultaneously assigning a specific custom component to handle the behavior of an individual property.
In this scenario, you arrange the firstName and lastName properties horizontally by using a layout, while specifically overriding the lastName property to use a reused custom component (c/customLastNameInput).
Define the schema.json file.
This schema defines the data structure. It defines a firstName and lastName property, but you override only the lastName.
1{
2 "title": "Contact Type",
3 "description": "Contact of a Person",
4 "lightning:type": "lightning__objectType",
5 "properties": {
6 "firstName": {
7 "title": "First Name",
8 "description": "First Name of person",
9 "lightning:type": "lightning__textType",
10 "maxLength": 50
11 },
12 "lastName": {
13 "title": "Last Name",
14 "description": "Last name of person",
15 "lightning:type": "lightning__textType",
16 "maxLength": 50
17 }
18 },
19 "required": ["firstName", "lastName"]
20}Create the LWC Bundle.
Create a custom Lightning Web Component (such as c/customLastNameInput) to handle the specific property.
The customLastNameInput.html template binds the standard input component to your custom logic.
1<template>
2 <lightning-input
3 type="text"
4 label={label}
5 value={value}
6 required={required}
7 disabled={disabled}
8 onchange={handleChange}
9 placeholder="Enter Last Name (Custom)"
10 message-when-value-missing="Last Name is required for this contact type."
11 >
12 </lightning-input>
13</template>The customLastNameInput.js file handles the data flow. The component exposes public properties—such as value, label, and required—to receive data. To capture the user’s input, the component dispatches a valuechange event whenever the value updates.
1import { LightningElement, api } from "lwc";
2
3export default class CustomLastNameInput extends LightningElement {
4 @api value; // Receives the current value of 'lastName'
5 @api label; // Receives the 'title' from the schema ("Last Name")
6 @api required; // Receives the required state (true)
7 @api disabled; // Handled by the panel (e.g., after submission)
8
9 handleChange(event) {
10 const newValue = event.detail.value;
11
12 // Notify the system that the value has changed
13 this.dispatchEvent(
14 new CustomEvent("valuechange", {
15 detail: {
16 value: newValue,
17 validity: event.target.checkValidity(), // Optional: pass validity state
18 },
19 }),
20 );
21 }
22}The customLastNameInput.js-meta.xml file exposes the component to the editor.
1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 <apiVersion>64.0</apiVersion>
4 <isExposed>true</isExposed>
5 <targets>
6 <target>lightning__PropertyEditor</target>
7 </targets>
8</LightningComponentBundle>Configure the editor.json file.
Use the property name lastName as the key in the componentOverrides section.
Here’s how to reference customLastNameInput to override the editor in the editor.json file.
1{
2 "editor": {
3 "componentOverrides": {
4 "lastName": {
5 "definition": "c/customLastNameInput"
6 }
7 },
8 "layout": {
9 "definition": "lightning/verticalLayout",
10 "children": [
11 {
12 "definition": "lightning/horizontalLayout",
13 "children": [
14 {
15 "definition": "lightning/propertyLayout",
16 "attributes": { "property": "firstName" }
17 },
18 {
19 // This will render the overridden c/customLastNameInput
20 // defined in componentOverrides above.
21 "definition": "lightning/propertyLayout",
22 "attributes": { "property": "lastName" }
23 }
24 ]
25 }
26 ]
27 }
28 }
29}When you use lightning/propertyLayout to place a property, the editor checks for a corresponding componentOverrides definition. If an override exists (such as in the lastName example), the custom component renders. Otherwise, the default input renders.
Note
See Also
j