Build the UI for a Custom Property Editor

Unlike the component class, which requires you to follow the property editor contract, the HTML markup and CSS for a custom property editor don’t require you to follow a contract. You can make the editor look and feel however you like. For example, assign the font, type size, and text color.

In the Custom Article component example, you want to create a custom property editor for textAlignment so that your Experience Builder users can select alignment from a button group. Here’s how the HTML for this custom property editor can look.

1<template>
2  <div>
3    <lightning-button-group onclick={handleAlignmentClick}>
4      <template for:each={buttons} for:item="button">
5        <lightning-button-icon-stateful
6          key={button.value}
7          value={button.value}
8          selected={button.selected}
9          icon-name={button.icon}
10        ></lightning-button-icon-stateful>
11      </template>
12    </lightning-button-group>
13  </div>
14</template>

See Also

Release Preview

This release is in preview. Features described here don't become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can't guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.