Custom Content Layout Components for Communities

In this blog, I will show how to create a custom layout for community pages by using lightning components. To appear in Community Builder as a custom layout, a component must implement the forceCommunity:layout interface. Community Builder includes several ready-to-use layouts that define the content regions of your page, such as a two-column layout with a 2:1 ratio. However, if you need a layout that’s customized for your community, create a custom content layout component to use when building new pages in Community Builder. You can also update the content layout of the default pages that come with your community template.

  • The community should be enabled.
  • Make sure that community template has Builder option.

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 Community Builder user in another org.

1. Create a Component

To appear in the New Page and the Change Layout dialog boxes in Community Builder, a content layout component must implement the forceCommunity:layout interface. Here is the sample code that we will use into the community builder

<aura:component implements="forceCommunity:layout" description="Custom Content Layout" access="global">
    <aura:attribute name="header" type="Aura.Component[]" required="false"></aura:attribute>
    <aura:attribute name="bottom" type="Aura.Component[]" required="false"></aura:attribute>
    <aura:attribute name="leftVal" type="Aura.Component[]" required="false"></aura:attribute>
    <aura:attribute name="cernterVal" type="Aura.Component[]" required="false"></aura:attribute>
    <aura:attribute name="rightVal" type="Aura.Component[]" required="false"></aura:attribute>
    
    <div class="container">
        <div class="contentPanel">
            <div class="centerheader">
                {!v.header}
            </div>
            <div class="row">
                <div class="column">
                    {!v.leftVal}
                </div>
                <div class="column">
                    {!v.cernterVal}
                </div>
                <div class="column">
                    {!v.rightVal}
                </div>
            </div>
            <div class="bottonfooter">
                {!v.bottom}
            </div>
        </div>
    </div>
</aura:component>

Here is the CSS

.THIS .contentPanel:before,
.THIS .contentPanel:after {
    content: " ";
    display: table;
}
.THIS .contentPanel:after {
    clear: both;
}
.THIS .centerheader {
    width: 100%;
}
.THIS .bottonfooter {
    float: left;
    width: 100%;
}

.THIS .left {
    width: 25%;
}
.THIS .right {
    width: 25%;
}
.THIS .center {
    width: 50%;
}
.THIS .column {
    float: left;
    width: 33.33%;
}
.THIS .row:after {
    content: "";
    display: table;
    clear: both;
}

You can include an SVG resource in your component bundle to define a custom icon for the content layout component when it appears in the Community Builder. Use Below SVG code to show the icon on the community.

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 479.953 479.953" style="enable-background:new 0 0 479.953 479.953;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M477.643,102.356c-0.011-0.011-0.023-0.023-0.034-0.034l0,0l-96-96c-1.527-1.551-3.629-2.399-5.804-2.344    c-2.172,0.039-4.234,0.961-5.711,2.555l-29.719,32c-2.899,3.122-2.844,7.968,0.125,11.023l2.253,2.317l-11.8,11.8l-18.641-4.656    c-16.719-4.092-34.358,0.918-46.43,13.188l-34.004,39.629l-39.512-39.512c-11.264-11.328-27.983-15.277-43.125-10.188    c-0.904,0.304-1.747,0.764-2.492,1.359l-2.172,1.75l-5.266-5.265l10.344-10.344c3.124-3.122,3.125-8.186,0.003-11.309    c-0.001-0.001-0.002-0.002-0.003-0.003l-32-32c-3.122-3.124-8.186-3.125-11.309-0.003c-0.001,0.001-0.002,0.002-0.003,0.003    l-104,104c-3.124,3.122-3.125,8.186-0.003,11.309c0.001,0.001,0.002,0.002,0.003,0.003l32,32c3.122,3.124,8.186,3.125,11.31,0.003    c0.001-0.001,0.002-0.002,0.003-0.003l3.613-3.613l18.957,18.957l-4.656,18.641c-4.084,16.473,0.716,33.884,12.664,45.938    L144,303.273v62.541c0.147,14.339,8.193,27.427,20.922,34.031c6.825,3.632,11.087,10.737,11.078,18.469v1.664h-8    c-4.416-0.003-7.997,3.575-8,7.991c0,0.003,0,0.006,0,0.009v40c-0.003,4.416,3.575,7.997,7.991,8c0.003,0,0.006,0,0.009,0h152    c4.416,0.003,7.997-3.575,8-7.991c0-0.003,0-0.006,0-0.009v-40c0.003-4.416-3.575-7.997-7.991-8c-0.003,0-0.006,0-0.009,0h-8    v-8.039l12.68-11.695c12.134-9.18,19.281-23.503,19.32-38.719v-93.716c9.473-1.138,18.279-5.458,24.977-12.253l42.289-45.922    c9.941-9.869,13.402-24.533,8.922-37.805c-1.282-3.858,5.609-16.484,13.819-26.167c1.465,1.454,3.437,2.284,5.501,2.315h0.078    c2.106,0,4.128-0.831,5.625-2.313l32.367-32C480.719,110.56,480.748,105.497,477.643,102.356z M40,136.666l-20.687-20.688    L112,23.29l20.688,20.687L40,136.666z M144.709,281.048l-57.084-58.726c-8.031-8.082-11.267-19.766-8.539-30.828l5.758-23.031    c0.685-2.725-0.114-5.609-2.102-7.594l-22.16-22.16L128,71.291l10.344,10.344c2.889,2.887,7.488,3.136,10.672,0.578l6.57-5.289    c9.078-2.538,18.82,0.029,25.469,6.711l44.1,44.1l-0.076,0.057c-3.569,3.279-6.229,7.427-7.719,12.039    c-4.958-2.687-10.608-3.822-16.219-3.258c-14.521,1.894-25.325,14.357-25.141,29v83.664    C160.089,252.522,147.732,265.084,144.709,281.048z M312,459.978H176v-24h136V459.978z M328,361.525    c-0.093,10.456-5.114,20.255-13.547,26.438l-15.867,14.578c-1.649,1.515-2.587,3.652-2.586,5.891v11.547H192v-1.664    c0.018-13.645-7.506-26.183-19.555-32.586c-7.507-3.832-12.291-11.488-12.445-19.914v-77.383c0.031-10.137,6.438-19.158,16-22.526    v50.073h16V165.572c-0.245-6.447,4.363-12.062,10.734-13.078c3.394-0.35,6.778,0.754,9.313,3.039    c2.529,2.264,3.968,5.503,3.953,8.898v119.547h16V148.431c-0.005-6.625,5.362-11.999,11.987-12.004c0.37,0,0.739,0.017,1.107,0.05    c6.479,1.08,11.148,6.803,10.906,13.367v134.133h16V172.431c-0.005-6.625,5.362-11.999,11.987-12.004    c0.37,0,0.739,0.017,1.107,0.05c6.479,1.08,11.148,6.803,10.906,13.367v110.133h16v-66.073c9.562,3.368,15.969,12.389,16,22.526    L328,361.525z M405.015,176.892L405.015,176.892c2.541,7.638,0.486,16.056-5.289,21.664l-42.289,45.922    c-3.659,3.698-8.337,6.219-13.438,7.242v-11.289c-0.025-19-13.39-35.37-32-39.195v-27.391    c0.281-14.871-10.748-27.537-25.516-29.305c-5.016-0.422-10.055,0.495-14.602,2.656c-0.942-13.842-11.618-25.046-25.398-26.656    c-0.34-0.029-0.675,0.035-1.015,0.019l32.14-37.487c8.083-8.028,19.766-11.264,30.828-8.539l23.031,5.758    c2.725,0.683,5.608-0.115,7.594-2.102l14.845-14.845l68.93,70.885C415.452,142.795,400.283,162.702,405.015,176.892z     M439.696,128.618l-82.423-84.766l18.891-20.352l84.445,84.445L439.696,128.618z" fill="#006DF0"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

 

2. Using Custom Layout In Communities

Open Community Builder from the Community settings page and Click on the Add a New Page as shown below

Select Standard page

You can view the custom layout you created. Select the layout for the page. Click on Next
Enter the name for the page and create a page . after creating the page you can able to see the layout of the screen as shown below.