Extending the communities component – Part 2

In one of the earlier post, I talked about extending the communities component. While working on this in my project, I faced another problem. I had a use case to override the toolbar in order to adhere to the custom styles we wanted to apply on the component.

Problem:

  • In comment.hbs, the below line includes the toolbar.hbs. 
{{include this template="toolbar"}}
  • The problem that I faced was that my template changes were not getting picked. I was over-riding the toolbar.hbs, but it was always picking the default OOTB template file.
  • The reason is that whenever we post a comment, it gets saved in the usergenerated content and resource type always points to the OOTB component.community.PNG
  • This resourceType property gets picked up and passed as a parameter to a servlet which resolves the template. You should be able to see the below call in the networks tab of the browser.

http://localhost:4502/services/social/templates?resourceType=social/commons/components/hbs/comments/comment&ext=hbs&selector=toolbar

Solution:

To resolve this issue, we need to tell AEM that it needs to pick our custom resource type rather than OOTB one. There is a configuration for this in the component.

  • Go to the design mode and open the design dialog for comments component.

communities-design-dialog

  • As shown in the above image, you need to specify the path of the custom comment resource type that you want to use in the design dialog. Once you save the changes, you should be able to see your template loading fine.

Hope it helps !! 🙂