How do you include a custom component resource into an AEM Social Communities handlebars template?

Question

In AEM 6.2, I want to do this in handlebars.

<sly data-sly-resource="${'title' @ resourceType='myproject/components/content/common/title'}"/>

Specifically, I overlaid the qnaforum.hbs and need to include it in there. The official documentation(link) says the correct way to do this is:

{{include this.id path="title" resourceType="myproject/components/content/common/title"}}

When done this way there are three problems:

The component appears, but then disappears from the page.
I get the warning "Forcing resource type is not supported when sling including on the client side"
There is a failed(404) GET request to http://localhost:4502/content/myproject/qna-index-page/jcr:content/qna-parsys/qna/title.html in the browser console (like it's trying to find the renderer for the title resource at that path).

In the same qnaforum.hbs file, Adobe is using the same include for their subscriptions component and it seems to work fine.

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

Does this type of include only work for Social Communities components? If so, how can I include a custom resource in the handlebars template?

arunpon arunpon · Accepted Answer · 2016-08-17T17:22:07

I helped some one else who was facing a similar issue. I am attaching the code snippet that caused the issue you are facing (disappearing QnA list), and the fix for that.

The overlaid QnAForum component looked like this

{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{#if-wcm-mode mode="EDIT" }}
    <div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
    {{!-- Other QnA code --}}
</div>

But code should be like this

{{#if-wcm-mode mode="EDIT" }}
    <div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
 {{!-- moving line1 from previous code snippet inside this parent div}}
 {{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
 {{!-- rest of QnA Code }}
</div>

The change I made is, moving line1 in first code snippet into line 5.

The JS console does say missing HTML, but it gets included though. The reason for console error is the way include works.We try to fetch the html, and if we fail in fetching the HTML, we ask to sling to resolve the component.

How do you include a custom component resource into an AEM Social Communities handlebars template?

1 Answers