Configure Lightning Components for Community Builder

We will see here how to add the custom lightning component on to the community builder. 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..

1.Create a Component 

Here’s the sample code for the custom component that will be used in the community builder.

Apex Class

public class GetUserInfo {
    public static User getCurrentUser(){
        return [Select Id , Name ,AboutMe,FullPhotoUrl,UserRole.Name ,Title,Email,FirstName,LastName from User where id =:Userinfo.getUserId()];

Component (FirstCommunityCmp.cmp)

<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global" controller="GetUserInfo">
    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
    <aura:attribute name="subject" type="String" default="World" access="global" />
    <aura:attribute name="userDetails" type="User" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <h2> {!v.greeting} ,{!v.subject} </h2>
    <div class="card">
        <img src="{!v.userDetails.FullPhotoUrl}" alt="{!v.userDetails.LastName}" style="width:100%"/>
        <div class="container">
            <p >{!v.userDetails.UserRole.Name} </p>
            <h6> Preferred locale info </h6>
            <p><b>Language:</b> {!$Locale.language}</p>
            <p><b>Timezone: </b>  {!$Locale.timezone}</p>
            <p><b>Number Format: </b> {!$Locale.numberFormat}</p>
            <p><b>Currency Format:</b>  {!$Locale.currencyFormat}</p>
    doInit : function(component, event, helper) {
        var action = component.get("c.getCurrentUser");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.userDetails", response.getReturnValue());


.THIS.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;

.THIS.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

.THIS.container {
    padding: 2px 16px;


  • To make a resource, such as a component, usable outside of your own org, mark it with access=” global”.
  • 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
  • You must manually enforce CRUD and FLS in your Apex controllers.

2. Add a Design Resource to  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.

Here is the designer code

<design:component label="First Community Cmp">
    <design:attribute name="greeting" label="Greeting" />
    <design:attribute name="subject" label="Subject" />

3. Add an SVG Resource to Component 

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. Here is the code for SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<svg xmlns=""
width="400" height="400">
<circle cx="100" cy="100" r="50" stroke="black"
stroke-width="5" fill="red" />

4. Drag and Drop the component to Community 

Now go the Salesforce community builder and drag and drop the component as shown below.

Configure the component attribute as shown below and publish your changes

After publishing the community you can able to see the basic information of the user as shown below.