AEM 6.2: Customizing Social Components

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.