Example Out-of-the-Box Components Extended in AEM

Every manager who purchases Adobe Experience Manager always wants to use the Out-of-the-Box (OOB) components to begin to build their ridiculously custom website. Most have listened to Adobe’s marketing pitch and concluded that everything is all ready for them to be able to get authors working in the system right away without any custom development tasks. Nothing could be further from the truth, unless you are looking to rebuild Geometrixx.

The Geometrixx components were set up to showcase what AEM is capable of doing. That’s where a good AEM architect and an implementation partner come in to play. They will listen to the needs of the customer and then architect a solution, for their Authoring process, around them.

If you think that the OOB AEM components won’t be used then you are dead wrong. Within our organization, some components, such as the iparsys (or inherited paragraph system), are actually used OOB without any change, as well as others. Every good implementation of AEM starts with the OOB components, but our developers extend them along the way in order to create a system and set of tools that are useful for that organization’s needs. There are three ways that you can extend components: overlay, replicate, and supertyping. I won’t get into the details of these for now (we’ll have one of our developers cover how to extend a component in another post); just know that there are multiple ways to accomplish an extension, and it all depends on what your end goal is.

Here are a few simple OOB components that almost invariably get extended out and built upon.

We have found that the list component is usually the most commonly extended component. It is very versatile in its uses and application. Here is the default List component in the Touch UI.geometrixx list

Below is how it was extended for one of our customers. We set up some new “Display As” options and removed some of the other features of the List component (not shown in the above Geometrixx screen shot, such as Enable Feed or Paginate After). Sometimes we actually need to remove functionality in order to optimize the authoring experience because certain options might not be needed or they could confuse the author. extended list

Shown below is a new tab we added called Details where the author can: Put in a heading, select the path that it links to, and choose whether it opens in a new window or the same window. Then for each list item you can stipulate the background color, which corresponds to various areas of the site, thus giving a visual queue to the front-end user. extended list detail

Here is the standard OOB Image component as seen in the Classic UI.geometrixx image

Here is an extended Image component that we created. As you can see, all we did was add a new dropdown that allows the image to be floated right, left, or center. Most of the time the Image component is extended to allow authors to be able to float the image. extended image

Text & Image
Here is the standard OOB Text & Image component as seen in the Classic UI.
Text editor section:geometrixx T&I
Image properties section:geometrixxT&I

Here is the extended T&I component. As you can see, we added the float capability to the Image section. For the text editor, we added additional authoring capabilities to allow for some formatting.
Text editor section:
extended T&I
Image properties section:
extended text and positionable image

Here is the standard OOB Carousel component as seen in the Classic UI. geometrixx carousel

Here is an example of how we extended this component for another customer to give them the opportunity to search, based on tags or date, and gets results that could be placed into the Carousel. extended carousel

These are fairly simple examples. As you can see, these aren’t monumental changes to the components. The concept of extending them should not be looked at as “customization” in the sense that you are making your own creation from scratch. If your customer or manager is having a hard time understanding the need for “custom components,” you can help them understand by showing them these simple examples of extending the base AEM components. If you have any questions around extending components then don’t hesitate to reach out to us via email to [email protected].