Say Hello to Composites

02 August 2017
Andrzej Szymkowiak
Frink_Cognifide_2016_HeaderImages_0117
With the launch of AEM 6.3, we introduced some exciting, new features to our accelerator and authoring tool,  Zen Garden. One of those is Composites. Composites bring together two or more atomic components to create an entirely new and reusable Composite component. In atomic design methodology, these are often referred to as molecules.

In this previous post, you can learn how to create bigger pieces of a page structure from a few smaller components. Here, I'm going to show you a practical implementation of this.

Let's work through the simple story of a recent project. The client has briefed us and we understand the requirements. The designers have prepared their brief and we now have a page breakdown featuring the different modules that will be needed to assemble a page. 


We can create many of these modules using Zen Garden base components; Image, Richtext, Navigation or Accordion, for example. But not all modules can be covered with just a single component. And the designers want to use one of these modules across multiple pages.

It's a customer testimonial module and this is how it looks.

image1

One solution is to map this experience into box and Rich Text components, aligning and styling them properly. From a business point of view, this is one entity but it will always require assembly and we already know that it will have multiple uses on various pages.

So how can we avoid rebuilding this customer testimonial each time we need to use it? 

This is where Composites come to the rescue!  Composites allow us to assemble these three components once and then use them as one single component from now on. All without writing a single line of code.

How does it work? Simple. First, create a new composite within the experience fragments console, since Composites use the same configuration storage (this is nicely explained here).

image5


Then set it up as you would normally set up a page; build it block by block. You can even give it a custom icon so you'll easily identify it each time.

image3


Once it's created, when an author opens a page for editing, there will be a new section in the side bar called Composites:

image4


The customer testimonial composite is now ready to drag and drop across all of the pages where it is required in the same way as a basic component.

image2


So why should I use Composites over Experience Fragments, I hear you ask. Experience Fragments are a great feature to use if you want a reusable piece of content that will never change. But if you want to extend your toolbox with a reusable set of components that play a specific role but can be populated with different content, then Composites and Zen Garden will save you a huge amount of time.

For more information on Zen Garden visit our website.