Alter the Appearance (HBS)

Now that the components for the custom comment system in the application directory (/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.

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):

    <!--
     <<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):

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

• Select Save All

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

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:

Sample Comment Extension Package

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

Get File

Business.Adobe.com resources

Ecommerce Integrations Automated Onboarding Targeted Content Asset Collections Responsive Forms Content Management System