Your Privacy

This site uses cookies to enhance your browsing experience and deliver personalized content. By continuing to use this site, you consent to our use of cookies.
COOKIE POLICY

Skip to main content

AEM 6.2: Customizing Social Components

By Cody Halbleib

AEM 6.2:  Customizing Social Components
Back to insights

Adobe Experience Manager (AEM) is a web content management system used by Fortune 500 companies to build responsive websites. A benefit of AEM is out-of-the-box support for social communities. With AEM 6.2, website designers can simply drag and drop a social component onto a web page, publish the page, and the social functionality is pushed to the live site.

If your website is using AEM social components, it is likely that you will want to add new functionality to the default components at some point. There are two different ways to customize the social components – via overlaying and extension. Customizing a social component via overlay adds the customizations to the default instance of the component. Customizing a social component via extension creates a new instance of the component and leaves the default instance unchanged. This article will show how to add new functionality to a social component’s controller by building off Adobe’s tutorial for extending AEM 6.2’s comment system.

Begin by navigating to this link and following the tutorial for extending the comments system. Stop after you have completed the step named “Comments Clientlibs on Sample Page.” Your included clientlibs should look like the screenshot below, and not like the screenshot in the tutorial. The reason for this deviation from the tutorial is that you need to include your extended component on the page where you are using it.

Continue through Adobe’s tutorial, but stop before completing the “Alter the Appearance” steps. Instead, let’s add new functionality to the comment system’s controller

1. Change your comments.hbs file so that it contains this code:

<div id="div-commentsystem" class="scf-commentsystem scf translation-commentsystem" data-component-id="{{id}}" data-scf-component=


"/apps/example/components/custom/comments">


    <header>


        <h4>


            <span data-attrib = "items-count">{{totalSize}}</span><span>&nbsp;{{i18n "Comments" }}</span>


            {{#if configuration.followingAllowed}}


                <span class="scf-cs-subscriptions-block">


                    {{include this.id path="subscriptions" resourceType="social/subscriptions/components/hbs/subscriptions"}}


                </span>


            {{/if}}


            <span style='display:none;' evt="click=translateAll" class='generic-translation-all-button scf-link' data-translation-parent-


box-class="translation-commentsystem"


data-translation-parent-id-attr="data-component-id" data-translation-parent-box-id="{{id}}" href='#' data-translation-show-


original-text="{{i18n "Show Original


Translations"}}">


             {{#if showingTranslationAll}}


                  {{i18n "Show Original"}}


               {{else}}


                 {{#if translateAllInProgress}}


                    {{i18n "Translating"}}


                  {{else}}


                    {{i18n "Translate All"}}


                  {{/if}}


                {{/if}}


            </span>


        </h4>


    </header>


    {{#if mayPost}}


        <div id="div-comments" class="scf-composer-block scf-is-collapsed scf-js-composer-block">

             <img class="scf-composer-avatar" src="{{loggedInUser.avatarUrl}}"></img>



            <form evt="submit=addComment" class="scf-composer">


                {{#if configuration.isRTEEnabled}}


                    <textarea class="scf-composer-msg scf-rte-placeholder" placeholder="{{i18n "Write a comment"}}" evt="click=expandComposer">


</textarea>


                    <div class="scf-rte-composer">


<textarea class="scf-composer-msg" data-attrib="message" data-field-type="rte" name="message" placeholder="{{i18n "Write a comment"}}"></textarea>


                    </div>


                {{else}}


                    <textarea class="scf-composer-msg" data-attrib="message" name="message" placeholder="{{i18n "Write a comment"}}" evt="


click=expandComposer"></textarea>


                {{/if}}


                <div class='scf-composer-toolbar'>


                    {{#if configuration.isAttachmentAllowed}}


                        <button class="scf-composer-action scf-composer-attach" evt="click=openAttachmentDialog">{{i18n "Attach"}}</button>


                        <input class="scf-comment-attachment-input scf-js-cmt-att-input" type="file" data-attrib='attachment' name="attachment"


multiple evt=


"change=renderAttachmentList" />


                    {{/if}}


                    <div class="scf-composer-actions">


                       <button type="reset" class="scf-composer-action" evt="click=cancelComposer">{{i18n "Cancel"}}</button>




                        <input type="submit" value="{{i18n "Edited Post Button"}}" evt="submit=addComment" />


                   </div>


                    {{#if configuration.isAttachmentAllowed}}


                        <div class="scf-composer-attachments">


                            <ul class="scf-attachment-list scf-js-composer-att"></ul>


                        </div>


                    {{/if}}


                </div>


            </form>


            <button evt="click=styleView" class="scf-composer-action button-style">{{i18n "Style"}}</button>


        </div>


    {{/if}}


    <ul id="ul-comments" class="scf-comments-list">


        {{#each items}}


            {{#if isVisible}}


                {{include this resourceType='/apps/example/components/custom/comments/comment'}}


            {{/if}}


        {{/each}}


    </ul>


    <div class="scf-pages">


        <ul class="scf-pages-list">


            {{#pages pageInfo}}


                <li class="scf-pages-list-item">


                    <a class="scf-page{{#if currentPage}} scf-currentPage{{/if}}" data-page-suffix="{{suffix}}" evt="click=navigate">


{{pageNumber}}</a>


                </li>


            {{/pages}}


        </ul>


    </div>

 </div>

2. Change your css.txt file so that it contains this:

customcommentsystem.css

3. In the same folder as your css.txt file, create a file called customcommentsystem.css and put this in it:

.button-style {


margin: 10px 0px 10px 0px;


}

#div-comments .button-style-clicked {


      border-radius: 20px;


          background: #F79F79;


}

#div-commentsystem .div-comments-styled {


          margin: 10px 0px 10px 0px;


          border: 0px;


          border-radius: 20px;


          background: #F7D08A;


}




#ul-comments .li-comment-styled {


          border-radius: 20px;


          background: #F7D08A;


          margin: 10px 0px 10px 0px;


}

4. Change your customcommentsystem.js file so that it contains this code:

(function($CQ, _, Backbone, SCF) {


    "use strict";




    var Comment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;


    var CommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;




    var CommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;




    var CommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;


    var CustomCommentSystemView = CommentSystemView.extend({


                styleView: function() {

                           console.log("Entering the style function in the view.");




                           //Find the style button and style it


                           this.$el.find('.button-style').addClass("button-style-clicked");




                           //Find the cancel button and style it


                           this.$el.find('[type=reset]').addClass("button-style-clicked");




                           //Find the post button and style it


                           this.$el.find('[type=submit]').addClass("button-style-clicked");




                           //Find the comments system and style it


                           this.$el.find('.scf-composer-block').addClass("div-comments-styled");                               




                           //Find the posts and style them


                           this.$el.find('.scf-comment').addClass("li-comment-styled");                               




                           console.log("Exiting the style function in the view.")


                }


         });

    SCF.registerComponent('/apps/example/components/custom/comments/comment', Comment, CommentView);


    SCF.registerComponent('/apps/example/components/custom/comments', CustomCommentSystem, CustomCommentSystemView);




    })($CQ, _, Backbone, SCF);

5. Save your changes

6. Run an activation tree on the updated comment system component to publish it

Once the component is published, you should be able to load the page where the component is located and see a new button called “Style” on the comment system. Clicking the button will cause the component’s style to change like in the screenshot below.

This article outlined the steps for adding new functionality to an AEM 6.2 social component’s controller and provided the necessary guidance for completing Adobe’s comment system extension tutorial. As you can see, AEM development is not always straightforward but UDig has a team of experienced developers that can get the job done.

About Cody Halbleib

Cody Halbleib is a Senior Consultant on the Software team. His family is his partner, Jamie, and his Border Collie mix, Walter.

Digging In

  • Software Engineering

    When There’s Too Much to Fix: How Smart Prioritization Unlocks Revenue at Scale

    Every operations team has a backlog. The question isn’t whether you can clear it — it’s whether you’re clearing it in the right order. For most teams, the honest answer is no. And that gap between the order work gets done, and the order it should get done is quietly costing organizations millions. The Volume Problem High-volume exception processing shows up across […]

  • Software Engineering

    Creating Reusable Code Templates to Reduce Client Project Startup Time

    In consulting, one of the least visible but most expensive phases of a project is the beginning. Teams can spend days or weeks setting up repositories, agreeing on structure, wiring basic infrastructure, and solving problems that have already been solved many times before. Code templates are a practical way to reduce overhead while improving consistency. […]

  • Software Engineering

    Player Three Has Entered the Game: How AI Is Finally Bridging the Divide Between Design and Engineering

    As AI begins to become more prominent in our day-to-day lives, I find myself in a unique position. As a practicing software engineer and UI/UX designer, I am genuinely happy to see the introduction of AI tools begin to take shape in our industry. But more importantly, I am happy to start seeing the effects it is having on what has historically been a pretty challenging relationship: the […]

  • Software Engineering

    The Disappearing Middle of Software Work: Why the Bookends – Strategy & Impact – Matter Most Now

    Here’s a question nobody in enterprise software wants to sit with: what happens to the middle? Not the middle of the org chart. The middle of the work. The vast, expensive layer of effort that has defined enterprise software delivery for thirty years—translating what the business wants into working code. The requirements-to-implementation pipeline. The “build phase.” […]

  • Software Engineering

    Zero-Code Telemetry with OpenTelemetry’s OBI

    Full distributed tracing and exception capture for any application — without writing a single line of instrumentation code. View the source code on GitHub → The Premise Observability is essential for understanding what’s happening inside your services, but instrumenting an application by hand — adding trace spans, logging calls, and metric counters throughout your codebase […]

  • Software Engineering

    Building a Consultant in the Trenches: How Playing Offensive Line Shaped My Consulting Career

    People often ask me the same question when they find out that I played college football: “Do you miss it?” On the surface, it’s a bad question with an obvious answer. Yes. However, if I give myself a minute to sit with that question, the answer is more nuanced. Yes, I miss playing football, but […]