DocumentationAEM 6.4Communities Guide

Alter the Appearance (HBS) alter-the-appearance-hbs

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

Now that the components for the custom comment system in the application directory (https://experienceleague.adobe.com/apps?lang=en) are in place, with a resourceSuperType referencing the default comment system and the custom Model/View registered, it is possible to modify the implementation.

For a simple demonstration, a visual feature, the avatar shown of the signed-in user who posts a comment, is removed.

NOTE
To make use of the extension, the instance of the comment system in a website to be affected (https://experienceleague.adobe.com/content?lang=en) must set its resourceType to be the custom comment system.

Modify the HBS Scripts modify-the-hbs-scripts

Using CRXDE Lite:

  • Open /apps/custom/components/comments/comment/comment.hbs

    • Comment out the tag which includes the avatar for a comment post (~ line 21):

      code language-none 
      <!--
 <<img class="scf-comment-avatar {{#if topLevel}}withTopLevel{{/if}}" src="{{author.avatarUrl}}"></img>
 -->

  • Open /apps/custom/components/comments/comments.hbs

    • Comment out the tag which includes the avatar for the next comment entry (~ line 44):

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

  • Select Save All

Replicate Custom App replicate-custom-app

After the application has been modified, it is necessary to re-replicate the custom component.

One way to do so is

  • From the main menu

    • Select Tools > Operations > Replication
    • Select Activate Tree
    • Set Start Path: to /apps/custom
    • Uncheck Only Modified
    • Select Activate button

View Modified Comment on Published Sample Page view-modified-comment-on-published-sample-page

Continuing the experience on the publish instance, still signed in as the same user, it is now possible to refresh the page in the publish environment to view the modification to remove the avatar:

chlimage_1-81

Sample Comment Extension Package sample-comment-extension-package

Attached is a package of the custom comments application created in this tutorial.

Get File

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6