When viewing a page in author mode, AEM automatically injects a sidekick into page components. This works great when viewing a single page, but what happens when one page needs to load all or parts of another page, like in the following example?
<!-- Code snippet to inject all child pages into current page -->
<%
Iterator<Page> childPages = resourcePage.listChildren();
while (childPages.hasNext()) {
Page childPage = childPages.next();
String childPageUrl = childPage.getPath() + ".html";
%>
<sling:include path="<%= childPageUrl %>" />
<% } %>
Problem: Nested AEM pages will spawn multiple Sidekicks, none of which will load correctly
The screenshot above illustrates this problem. The only javascript error outputs the following to the console per page loaded:
Uncaught TypeError: Cannot read property 'style' of undefined widgets.js:9872
Solution: Remove the Sidekick on child pages, either entirely, or just when viewing as a child page
Step 0: We’ll assume a page component has been overwritten for the project. This means all or some of the files from /libs/foundation/components/page/ have been copied over.
If this hasn’t occurred, do so, and make sure the child pages have a jcr:content/sling:resourceType property that points to your new page type.
Step 1: Now, find head.jsp and the line that includes /libs/wcm/core/components/init/init.jsp
Step 2: That line loads the Sidekick. Either remove it or get creative and only display it when the page is being viewed on its own.
Example:
<%@include file="/libs/foundation/global.jsp" %>
<!-- Load the sidekick only when viewing issue page on its own -->
<% if(currentPage.getPath().equals(resourcePage.getPath())) { %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<% } %>
Summary: Problems with AEM’s automatic component injection in author mode can be overcome by overriding parent components and adding more precise logic.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.