SidebarSite navigation.
More
Cert++
Close

Exposing a custom component's properties in Experience Builder

Key Takeaway

To make a custom component's properties editable in Experience Builder, add lightningCommunity__Default to targets, define the properties in a targetConfig, and declare each one as a public @api property with the same name in the JavaScript class.

A custom Lightning web component can let an admin change its settings, such as a text value or a color, directly in Experience Builder instead of in code. You set this up in two places: the component's .js-meta.xml configuration file and its JavaScript class.

How to make a component usable in Experience Builder
  1. Open the component's .js-meta.xml file.
  2. Set isExposed to true.
  3. Add a target to targets for the way the component will be used.
TargetUse it forWhere it appears in Experience Builder
lightningCommunity__PageA drag-and-drop component"Components" panel
lightningCommunity__Page_LayoutA page layout"Page Layout" window
lightningCommunity__Theme_LayoutA theme layout"Settings", in the "Theme" area
Salesforce Accredited B2B Commerce Developer Professional Study Guide

Checklist progress

0/124Learned

Prepare for the Exam

Play Today's Certle

Study Community

Ask questions and get the latest info from other Salesforce Accredited B2B Commerce Developer Professional studiers.

Go to Discord