Cookies & Privacy

We are using cookies on your computer to help improving this website. If you agree to our use of cookies, please clos this message and continue to use this site. More information on how we use cookies can be found in our privacy statement

more details

Essential

These tags are required for the basic functions of the website.

Marketing

Marketing/target cookies are usually used to show you advertisements that meet your interests. When you visit another website, your browser's cookie is recognized and selected ads are displayed to you based on the information stored in this cookie (art. 6 par. 1 p. 1 a) GDPR).

Imprint | privacy statement

Let's go Headless

Headless AEM mit Content Fragments

10th anniversary of the AEM Forms Forum

Highlights of the Event
All Blog Entries

Agile Onboarding Workshop

Agile Onboarding Workshop

Traditional content management systems (CMS) were developed for websites. However, content is now consumed across various mobile applications, such as apps, smartwatches, etc. This requires a new approach of managing and publishing content. Adobe Experience Manager (AEM) provides a solution called "Content Fragments" to manage content and to deliver it to any output channel.

Headless

"Headless" in connection with a content management system is by no means something negative but rather the future of content management. A headless CMS is a CMS that has no frontend (head) and only offers a backend to manage the content. This content can then be accessed via an API ("application programming interface").

The great advantage here is that the content can be used in different applications and only needs to be maintained in one central location. The content can then be displayed in an app, on a website, in an online store and/or on a smartwatch for example. The display of the content can be defined individually for each frontend. 

Adobe's solution for headless CMS has been integrated into AEM and is called "Content Fragments". As with AEM Sites the complete Adobe ecosystem can be used. For example pictures can be edited with Photoshop, synchronized to AEM and delivered together with the headless content. Or Adobe Analytics can be used to analyze the content success over multiple channels.

Content Fragments

AEM offers a flexible solution for managing headless content with the so called Content Fragments. A content fragment is a special type of asset and is also stored in the asset area in AEM. For structured storage of content fragments a folder structure suitable for the project is created such as categorization by language or categories and also tags can be used. 

Content fragments can store structured data such as text, numbers or even date and time. More complex data structures such as references to other content fragments or images and videos can also be integrated. 

"Content Fragment Models" can be used to create templates for Content Fragments. Using these models any number of Content Fragments of the same type can be created. For the Content Fragment Model AEM provides a selection of data types. For more information on the data types see AEM Content Fragments Data Types.

The Content Fragment Models and Content Fragments can be created by authors on their own without IT support. The development team then can read the content via an API.

Data Types Content Fragment Model

Case

For example if you want to store different articles, a Content Fragment Model and a filled Content Fragment could look like this:

Content Fragment Model
Content Fragment Article

Components vs. Assets API

An API makes content available through any channel and on any device. The website, mobile application or store can be developed in any programming language with their preferred tools and their own development process.

AEM offers several approaches here. You can use Components, the Assets API or GraphQL. Below you can find more information on Components and Assets API. For more information about GraphQL you can read the blog article AEM with GraphQL. 

Components

The Content Fragments can be used with Components. This means that you also use a Page and link the Content Fragments to it. AEM already provides two Core Components that can display Content Fragments: the Content Fragment and the Content Fragment List Component. Below is a Page with a Content Fragment Component. In our example, the Content Fragment Component contains the article "Cats and Dogs".

The content is made available to the end application by publishing the Content Fragment and the Page. Developers who want to retrieve the content access the Sling Model Exporter of the Page and thereby get the content as JSON format. 

For example if there is a Page at /content/newspaper/en_GB/articles where all articles are available the content of the Page can be retrieved via this URL: https://XYdomain/content/newspaper/en_GB/articles.model.json

Assets API

The Assets API enables Create-Read-Update-Delete (CRUD) operations on content stored in AEM. The Assets API can be used to serve content to any application that can make HTTP requests and process JSON responses. The Assets REST API is available in any default installation of a current version of AEM.

To retrieve the content, the /api/assets endpoint is used as well as the path to the corresponding content (without /content/dam). 

 

To access the article at /content/dam/newspaper/en_GB/articles/cats-and-dogs the following path is requested: /api/assets/newspaper/en_GB/articles/cats-and-dogs.

 

The HTTP method indicated in the request specifies the operation to be performed:

 

  • GET: To retrieve a JSON representation of an asset or folder.
  • POST: To create new assets or folders.
  • PUT: Update the properties of an asset or folder.
  • DELETE: To delete an asset or folder.

Example JSON output - Assets API and Components

{
  "contentfragment": {
    "id": "contentfragment-81802f5778",
    "title": "cats and dogs",
    "description": "",
    ":items": {

    },
    ":itemsOrder": [

    ],
    "elements": {
      "headline": {
        "title": "Headline",
        "dataType": "string",
        "value": "Cats and Dogs",
        "multiValue": false,
        ":type": "string"
      },
      "author": {
        "title": "Author",
        "dataType": "string",
        "value": "Marie-Philine Herale",
        "multiValue": false,
        ":type": "string"
      },
      "date": {
        "title": "Date",
        "dataType": "calendar",
        "value": 1664496000000,
        "multiValue": false,
        ":type": "calendar"
      },
      "content": {
        "title": "Content",
        "dataType": "string",
        "value": "Cats and dogs can be friends. This was proven last week when a dog saved a cats live by saving the cat from a fire. ",
        "multiValue": false,
        ":type": "text/plain"
      }
    },
    "elementsOrder": [
      "headline",
      "author",
      "date",
      "content"
    ],
    ":type": "my-project/components/contentfragment",
    "model": "my-project/models/article"
  }
}

Advantages of the APIs in detail

In itself no API is better or worse. The choice of API depends on the particular application case. The advantages of the APIs are listed below: 

 

Components

  • Authors decide which content is displayed on the page. Content can be merged from different folders 
  • A combination of web content and Content Fragments is possible 
  • A Page can be customized, e.g. a special display of the content 

 

Assets API

  • CRUD operations 
  • Create and publish Content Fragment (no additional Page needed) 
  • Manage assets (images, videos, documents, etc.) 
  • Authentication required 

Take Aways Headless AEM

AEM serves as a central content database. The content can be used in any frontend. Flexible content preparation is possible.

Authors can develop content centrally in AEM and do not need IT support.

Developers can read the content for which they have various APIs available in AEM.

 

More information:

Author

Marie-Philine Herale

AEM Consultant

Published on

11.4.2023

Topics

Assets Headless AEM Content Adobe Experience Manager