Cristian Romero, January 11, 2022
A forward-thinking client was looking to future-proof their content management capabilities, seeking flexibility when it came to their AEM components. They wanted to be able to manage events on a calendar but also have the option to author additional event attributes later. They also wanted to create page-specific instructional walkthroughs for users that would contain different steps depending on the site page.
We always encourage clients to think ahead so that we build AEM site and content features that they can use long-term to improve their content creation capabilities so we welcomed this challenge.
Though these two components sound very different, we were able to leverage one AEM feature to build both.
AEM Content Fragments
AEM Content Fragments allow authors to design, create, curate and publish page-independent content. They are created and managed as page-independent assets and allow them to prepare content ready for use in multiple locations and over multiple channels.
What makes Content Fragments incredibly versatile is that they can be delivered in JSON format using the Sling Model (JSON) export capabilities of AEM core components. This means a single Content Fragment can be leveraged to create multiple types of components where the authoring and data is agnostic to the way the component is implemented.
Below, I’ll demonstrate this by using Content Fragments to create the aforementioned Calendar and Walkthrough components.
Implementation
The simplicity of the implementation model is another of the advantages of using Content Fragments to create AEM components.
The overall implementation flow looks like this:
The Content Fragment Model defines the data that the authors input when creating Content Fragments. Once we create the Content Fragment Model, the authors can create new Content Fragments based on the model, authoring data for the component. Content Fragments are stored in Assets and should be managed like any other assets.
Content Fragment Model
AEM Assets Best Practice: Create a folder for each of the component types for which the author will create Content Fragments. This will keep the CF’s organized in the DAM. For example there will be a folder for events for our Calendar and a folder with Page Steps for our Walkthrough.
Content Fragment List
The Content Fragment List is an out-of-the-box (OOTB) component that will allow us to order, filter and select the information from Content Fragments. For our examples we are going to use it as is, but if alternative behavior is needed it can be easily extended.
In the Properties tab the author will first select the Content Fragment Model we previously created and the folder where all the Content Fragments that will be used in the component are located.
The Elements tab allows the authors to select what information will be displayed on the front-end.
The custom AEM Component will include the Content Fragment List. Through the Sling Model get the information created by the authors, and filter by the Content Fragment List as a JSON. It’s in charge of presentation and interaction with the end user.
Component
The basic structure of the component will looks like this:
Then we access the information by doing a GET request to resource/cf_list.model.json Where resource is the resource path and can be obtained using ${resource.path} in the Custom Component.
After this is just working in the presentation, for our examples we are using Vue.js and some third party libraries but you can use anything you want.
User Walkthrough Component
This component allows authors to give a certain page a Walkthrough when the user accesses the page for the first time.
User Walkthrough Step has a title, text, step number and alignment and the HTML element where the Walkthrough window will be shown.
We are loading IntroJs using some of the optimization strategies discussed in this article.
Calendar Component
This component allows the author to select a group of events to be displayed in an interactive Calendar.
The Calendar UI is built using only Vue.JS and CSS. Once the author adds the component to the page, they need to select the Calendar Event Content Fragment Model we created. Then, in the list, select the fields they want to display in the Calendar.
Calendar Events have an Event Description, Event type, Date and a link.
Conclusion
Content Fragments allow for speedy and versatile development. Updating and maintaining the content is simple and straightforward. There is a high potential for development of customizations, but even using mostly OOTB elements, it is possible to achieve great results.
Do you have a similar business problem to solve? Or are you thinking about making some changes to your AEM implementation? 3|SHARE would love to help. Contact us!
Image credit: Photo by Yan Krukov from Pexels
Topics: Development, Adobe, Content Fragments