Reference Component in AEM


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

An important thing to consider while implementing structure components is that an author should need to author them only once for entire website. Rest of the pages should be able to fetch the structure components from the index page/home page directly. Any changes done to the structure components within 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 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 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


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

private String getComponentReferencePath(String referenceComponentName, Page page) {
		Page parentPage = page.getParent();
		if (parentPage != null) {"inside page path , parentPage.getTemplate() : {}  :  {}",page.getPath(),parentPage.getTemplate());
			if (parentPage.getTemplate().getTitle().equalsIgnoreCase(StringConstants.LOCALE_CONFIG_TEMPLATE)) {
				Resource jcrContentResource = parentPage.getContentResource();"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;


About The Author