Lightning Communities Developer Guide

Get Up to Speed with Lightning Communities
Develop Lightning Communities: The Basics
Using the Developer Console
Configure Drag-and-Drop Components for Community Builder
Exposing Component Attributes in Community Builder
Tips and Considerations for Configuring Components for Community Builder
Supported Aura Components, Interfaces, and Events for Communities
Customize the Look and Feel of a Lightning Template
Example: Build a Condensed Theme Layout Component
Develop Secure Code: Lightning Locker and Stricter CSP
Analyze and Improve Community Performance
Connect Your Community to Your Content Management System
Report on Deflections: The Deflection Signals Framework
Deploy a Community from Sandbox to Production
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Configure Drag-and-Drop Components for Community Builder

Before you can use a custom Lightning component in Community Builder, there a few configuration steps to take.

1. Add an Interface to Your Component

To appear as a drag-and-drop component in Community Builder, a component must implement the forceCommunity:availableForAllPageTypes interface.

After you create the Lightning component, it appears in the Components panel of all Lightning communities in your org.Components panel

Here’s the sample code for a simple “Hello World” component. A component must be named componentName.cmp.

To make a resource, such as a component, usable outside of your own org, mark it with access="global". For example, use access="global" if you want a component to be usable in an installed package or by a Community Builder user in another org.

Note

When you add custom components to your community, 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.

Warning

2. Add a Design Resource to Your Component Bundle

A design resource controls which component attributes are exposed in Community Builder. The design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Lightning component—information that visual tools need to display the component in a page or app.

For example, to set a default value for an attribute, or make a Lightning component attribute available for administrators to edit in Community Builder, your component bundle needs a design resource.

Here’s the design resource that goes in the bundle with the “Hello World” component. A design resource must be named componentName.design.

Optional. Add an SVG Resource to Your Component Bundle

To define a custom icon for your component, add an SVG resource to the component bundle. The icon appears next to the component in the Community Builder Components panel.

If you don’t include an SVG resource, the system uses a default icon (Default component icon).

Here’s a simple red circle SVG resource to go with the “Hello World” component. An SVG resource must be named componentName.svg.

Optional. Add a CSS Resource to Your Component Bundle

To style your custom component, add a CSS resource to the component bundle.

Here’s the CSS for a simple class to go with the “Hello World” component. A CSS resource must be named componentName.css.

After you create the class, apply it to your component.