Decide on the Editor for Each Property in the Component

Your desired user experience for entering values into each property of a custom component determines whether you can use a standard property editor or whether to create a custom one.

For example, for a text alignment property, consider whether you want the property editor to be a text input field, dropdown menu, or button group. Look at the default property editor that comes with the property type for each property in your custom component and decide if that editor offers the user experience that you want. If it doesn't, create a custom property editor. (For a list of standard Lightning property types, including images of their default property editors, see Lightning Types Reference in the Lightning Types Developer Guide.)

In the Custom Article component example, these are the desired editors for the properties in the component.

  • articleDate—The default property editor for lightning_dateType is a date selector. That's the desired user experience, so you don't need to create a custom editor for this property.
  • textAlignment—The default property editor for this property is a combobox. You want a button group to visually show the alignment options. This user experience requires a custom property editor.
  • layoutProperties—You want to arrange the layout properties on separate tabs in the property panel, but the default editor for lightning__objectType is a vertical layout. For the borderStyle property, you want to show different labels for each of the dropdown options and not their actual values. For these user experiences, you must create a custom property type and a custom property editor.

In this example, the desired property editors require you to create a custom property editor for textAlignment and layoutProperties. In addition, the desired separate tab layout for layoutProperties requires you to define this layout in an editor.json file.

See Also