Reference component in AEM

Introduction

Any web page built using AEM consists of a bunch of components. Some of these components are used on a need basis, whereas some components such as header, footer, navigation, etc. provide the basic structure of the page. These are often logically categorized as structural components.

An important thing to consider while implementing structure components is that an author should need to author them only once for the entire website. The rest of the pages should be able to fetch the structure components from the index page/home page directly. Any changes done to the structural components within the index page/home page should be cascaded & reflected in the child pages automatically.

Implementing structure components using Reference component

There are many ways to implement structure components (header, footer, navigation, etc.) within an AEM website. One of the ways is to use a reference component.

Reference component as the name suggests takes the reference/content from the parent page & makes it available to the child page. What this means in terms of header & footer is that a content author needs to author the header/footer on the root level page template only & this reference component will fetch the content of these authored header/footer from parent & will display it on the child page.

Code Snippet for Reference component

Reference-component.html

<sly data-sly-use.model="com.fitbit.aem.core.models.ReferenceServiceModel">

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html" />

<sly data-sly-test.component="${model.componentPath}" data-sly-resource="${@path=model.componentPath, selectors='content', wcmmode='disabled'}"></sly>

<div class="cq-placeholder" data-sly-test="${!component && wcmmode.edit}" data-emptytext="Reference Component"></div>

ReferenceServiceModel.java

private String getComponentReferencePath(String referenceComponentName, Page page) {

                  Page parentPage = page.getParent();

                  if (parentPage != null) {

                           log.info("inside page path , parentPage.getTemplate() : {}  :  {}",page.getPath(),parentPage.getTemplate());

                           if (parentPage.getTemplate().getTitle().equalsIgnoreCase(StringConstants.LOCALE_CONFIG_TEMPLATE)) {

                                    Resource jcrContentResource = parentPage.getContentResource();

                                    log.info("Parent path resource:: {}", parentPage.getContentResource().getPath());

                                    Node jcrContentNode = jcrContentResource.adaptTo(Node.class);

                                    if (jcrContentNode != null) {

                                             return getNodePath(referenceComponentName, jcrContentNode);

                                    }

                           } else {

                                    return getComponentReferencePath(referenceComponentName, parentPage);

                           }

                  }

                  return null;

         }

private String getNodePath(String referenceComponentName, Node jcrContentNode) {

                  try {

                           if ("header".equalsIgnoreCase(referenceComponentName) && null != jcrContentNode

                                             && jcrContentNode.hasNode("header/global-header")) {

                                    Node headerNode = jcrContentNode.getNode("header/global-header");

                                    return headerNode.getPath();

                           }

                  } catch (PathNotFoundException e) {

                           log.error("Unable to find the path : ", e);

                  } catch (RepositoryException e) {

                           log.error("Error occured : ", e);

                  }

                  return null;

}