Let's go Headless

Headless AEM mit Content Fragments

Back to Insights
/de/en/insights
Share
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
medium
Content Fragment Article
medium

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:

Let’s create something great.
We bring bold ideas to life. As your partner for digital transformation, we’re here to support shaping outstanding projects for leading brands. Reach out and discover how our expertise can drive your success.
/content/dam/ews/videos/alex_hands_contact_code_2K_recbitrate.mp4
Let’s talk
/de/en/about-eggs/contact
Your next big project starts here.
Looking for fresh ideas, innovative solutions, or a partner who takes your goals seriously? Let’s connect and start building success together.