Lightning Type UI Configuration
The UI configuration files in a LightningTypeBundle control the visual representation of your custom Lightning type. By organizing these files into channel-specific folders, you can define unique UI experiences.
The channel identifies the Salesforce application that displays your custom Lightning type. A channel subfolder stores the Saleforce app’s configuration files.
This table lists the supported configuration files for each channel.
| Channel | Editor Support | Renderer Support |
|---|---|---|
lightningDesktopGenAi | Yes | Yes |
experienceBuilder | Yes | No |
enhancedWebChat | Yes | Yes |
If enhancedWebChat isn’t configured, it uses the configuration defined in lightningDesktopGenAi.
To configure the UI behavior, add these JSON files to the channel folder.
Modify the editor.json file to specify which input Lightning web component and layouts to use.
This example configures the custom Lightning type flightFilter.
Modify the renderer.json file to specify which output Lightning web component to use to render the type or its individual properties. The renderer is used wherever the type appears as output within the channel.
This example configures the renderer for the custom Lightning type flightFilter.
See Also
- Lightning Types Configuration Files
- Understand the LightningTypeBundle Structure
- Configuring Component Overrides
Attribute mapping creates a bridge between your data model and your interface. To display or edit data by using a custom Lightning web component (LWC), you map the fields defined in your schema.json to the component’s fields.
When mapping, these elements are required.
- Source: The data fields defined in your
schema.json. - Connector: The
attributesobject in your configuration file (editor.json or renderer.json), which uses the{!\$attrs.propertyName}syntax. - Destination: The variables in your LWC, decorated with
@api.
In the editor.json and renderer.json files, use the attributes key in the componentOverrides section to map the fields.
- Key: The name of the field in your LWC (the variable with
@api). - Value: The schema reference that uses the syntax
{!\$attrs.propertyName}.
This sample code references myExistingFilterComponent to override the editor for the Filter input in the editor.json file.
The componentOverrides section in your JSON files controls which components render the data. You can override the UI for the entire type or for specific fields within it.
Top-Level Override
To use a single LWC to render the entire Lightning type, use the $ symbol as the key. In this configuration, the component receives the full schema payload and is responsible for rendering all fields together, for example, as a summary card or composite UI.
This example references myFilterComponent to override the editor for the Filter input in the editor.json file.
Property-Level Override
To use a specific LWC to render an individual property within the type, use the property name (such as lastName) as the key in the componentOverrides section. In this configuration, the component renders only the specified property, and default editors handle the rest of the type.
This example references customLastNameInput to override the editor for the lastName property in the editor.json file.
Use these examples to configure input and output overrides for your custom Lightning types. For details on each configuration, see these topics.