Configure Components for Experience Builder

Make your custom Aura components available to drag to the Lightning Components pane in Experience Builder.

Add a New Interface to Your Component

As of Spring ’21, you can build Experience Builder sites using two programming models: the Lightning Web Components model, and the original Aura Components model. The Marketing Website template is based on LWC and can only be used with Lightning web components, not Aura components. Other templates are based on the Aura Components model and can use both Lightning web components and Aura components. See the Experience Builder Developer Guide for more information.

Note

To appear in Experience Builder, a component must implement the forceCommunity:availableForAllPageTypes interface.

Here’s the sample code for a simple “Hello World” component.

1<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
2    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
3    <aura:attribute name="subject" type="String" default="World" access="global" />
4
5    <div style="box">
6      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
7    </div>
8</aura:component>

Mark your resources, such as a component, with access="global" to make the resource usable outside of your own org. For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or a Experience Builder user in another org.

You can also create documentation for a component, event, or interface marked access="global". This documentation is automatically displayed in the Component Library of an org that uses or installs your package.

Note

Next, add a design resource to your component bundle. A design resource describes the design-time behavior of an Aura component—information that visual tools need to allow adding the component to a page or app. It contains attributes that are available for administrators to edit in Experience Builder.

Adding this resource is similar to adding it for the Lightning App Builder. For more information, see Configure Components for Lightning Pages and the Lightning App Builder.

When you add custom components to your Experience Builder site, they can bypass the object- and field-level security (FLS) you set for the guest user profile. Lightning components don’t automatically enforce CRUD and FLS when referencing objects or retrieving the objects from an Apex controller. This means that the framework continues to display records and fields for which users don’t have CRUD permissions and FLS visibility. You must manually enforce CRUD and FLS in your Apex controllers. Alternatively, use a base component that implements Lightning Data Service.

Important

Lightning Aura Components Developer Guide

Configure Components for Experience Builder

Add a New Interface to Your Component

See Also