Headless In AEM 

By reading this article we will be able to understand headless approach. Many time we went to interview and maximum time the interviewer is interested to listen about the headless approach and lots of questions about the headless. But if a person did not get any opportunity to work on the Headless approach so he/she will not be able to answer the questions or defend and interviewer thought like the candidate only knows the component and template in AEM he is not aware about the headless concept. The main motive to share knowledge on AEM headless approach is not all about the clearing interview but as per my understanding if we are working on any technology and we did not get any chance to work on a particular module/approach than it doesn't mean we will not do any effort to understand the other concepts. I hope this article will help you a lot and you will be able to understand and explain the Architecture of AEM as a Headless.

What is Headless?

To understand the headless concept we have to understand the given diagram 

Head:-Head is known as frontend and headless means the frontend is missing. In AEM Headless approach the frontend is missing but still we need frontend to develop the application/website. So that end user can interact with your website. And it means the another head/frontend is going to take it but AEM will be there s a repository. We will create some API and expose those API so that we can send the data/content to another's head(frontend) and content will be render via another's head. For fetching the data from AEM we have number of options like 

• Sling Model Exporters.
• Assets API
• Content Fragments using Graph QL.

In this article we are going to discus about the Content Fragment using Graph QL.

Note:-Graph QL with AEM generally works properly with the AEM as a cloud service flavor of AEM.

Advantage of Headless:-

• Fast content delivery.
• Same content can be used for different views.
• Easy Integration.
• Can be used for different channels like React/Angular, Web application, Mobile App etc.
  

What is Graph QL?

OR

How Graph QL is different from the REST?

Graph QL stands for Graph Query Language. Graph QL is a query language to create and consume the API. Graph QL API is not the replacement of REST API. But we can say Graph QL is alternative of REST. Let us understand how Graph QL is better than REST.

To understand the difference we have to understand the working of REST API.

REST 
How REST Works?

Suppose we have a table present in the RDBMS and in that table we have a student's info like name, roll no, age, mobile no, marks obtained, result, father's name, mother's name, father's contact no, mother's contact no, address. Suppose I want to get the contact details from REST API so we need to create a END Point like we will pass the roll no from frontend and we will get the contact details of that particular student and we will get the response in JSON form.

And on other hand if requirement is to fetch the fetch the result's details on the basis of roll no than we have to again create a endpoint for the result.

In this way REST API works. Ultimately we can say that in REST whenever we will be needing the new type of response we will be needing the REST Developer to create the endpoint.

Graph QL

Basically in Graph QL we have two things.

• Graph QL Server.
• Graph QL Client.

Graph QL Server will be handled by the backend developer and Graph QL Client will be handled by the front end developers. Suppose we have a table in DB so backend developer need to create the schema and resolver of the table. And frontend developer need to fire the query based on the requirement. The main difference is that in case of Graph QL we don't need developer again and again to create the endpoint the frontend person can change the response of data based on the query. when the frontend person will write the query he/she can change the parameters and response will be change.

Graph QL is solving two problems here.

• Over fetching(If we need one parameter from the API and we are sending all the data related to that as a response is called over fetching).
• Under fetching(If we need three parameters and we are fetching one parameter from the API is called under fetching).

Basically in REST we need to create the endpoint for each and every requirement but in Graph QL we need only one end point we have flexibility to change the response even without touching the backend.

These are two main problems(over fetching and under fetching) those we are facing in the REST but these are solved by the Graph QL. This the main reason why Graph QL comes in the use  

How to Create and Content Fragment Model and Content Fragment ?

To create a content fragment model and content fragment click here.

Let us discus some important data type for the content fragment model.

1.How can we use the JSON Object Data type in the content fragment?

Create a content fragment model and add a JSON Object Data type  like 

Create a content fragment and author it like 

Add a sample JSON Data like 

Click on the preview like 

Getting error. Which is obvious

We have to create a endpoint like Tools>Assets>GraphQL like 

Click on GraphQL and create a endpoint like 

Endpoint has been created successfully getting popup like 

Again click on preview  and you will be able to see the response like 

Anytime we can pass the JSON Data object and we can pass the JSON data in JSON Data object and we will get the response.

2.How to use the fragment reference in the Content Fragment Model? 

In this we will see how can we use the fragment reference data type in the content fragment model. I have created a new content fragment model and I have added the fragment reference data type in it.

 

The fragment reference data type looks like 

In next step drag and drop the fragment reference data type in the CF Model.

From Renderer As dropdown you can choose for single filed of multi field type. And you can add more than one fragment reference in the CF Model.

Why Fragment Reference is used for ?

Fragment reference is used for the refer the another content fragment model in one content fragment model. Now the content fragment model has been created and fragment reference data type has been added in the content fragment model. Now its time to create the content fragment from the content 

Click on open.

My content fragment looks like 

In this CF  we have two fragment reference. The upper one is single fragment reference and the lower one is multi fragment reference. You can also create by choosing the Render as dropdown from RHS in the content fragment model.

I have authored the already created content fragment or you can create your own new content fragment by clicking on + icon like 

I have authored my already created content fragment that was using JSON Object data type . And I have authored the path ( /content/dam/aemgeeks/content-fragments/json-data-type).

 And after authoring the reference of content fragment click on preview and I am able to see the JSON response .

My JSON data in one CF Model is like  

After preview I am getting the response like.

In this way we can use the fragment reference data type in the content fragment model.

3.How to use the Multi Line Text Data type and its features?

Now we will cover how to use the multi line text data type and its important features.

Let us perform the following step:-

• Create a Content fragment model and drag, drop the multi line text component.
• Create a content fragment for the created content fragment model and add some data in the multi line text data type.
• I have already created content fragment in which JSON Object data type we are using like 
  
• And in case of preview 

  
• Created a new content fragment model and using the multi line text component inside it  and allowing the fragment reference 

  
• After creating the content fragment getting option to add content fragment(Where cursor is hovering in the screenshot) 

  

  
  
• I am adding some text and in the component and adding the content fragment by clicking the icon where cursor is hovering.
• After clicking the insert content fragment getting option to choose the path of content fragment like 

  

  
  
• Now my content fragment looks like 

  

  
  

Click on the preview and now we should get the JSON response of both the content fragment. Let us check 

Here we are getting the response of both the components.

How to create Graph QL endpoint?

Let us create the Graph QL endpoint. We have created some Content fragment models and from these content fragment models we have created some content fragments these content fragments are nothing but information/data. And we have to expose this information/data into the URL(endpoint). We will be having some http requests and from the requests we will have the response from the content fragment.

We have to create endpoints by using following steps:-

• Create configuration from configuration browser like 
  
  
  

Click on Graph QL. And create end point.  

The highlighted one is our end point.  

Graph QL Query Editor

To access the Graph QL explorer you have to visit the here. Or simply you have to navigate to Graph QL editor like Tools>General>Graph QL Editor like 

When you will open the Query Editor you will be able to see the following interface like. 

You have to select the your endpoint from top right side in the dropdown  and if you are not able to see your created endpoint means there is some issue with your endpoint creation. click on the Docs link just below the endpoint in top right side.  

Click on Query Type like 

And you will get 

In Schema section we are getting the details of our content fragment models. 

We are getting the content fragment model by path,  list and Paginated.

You can use cntrl + space to get the suggestions like 

I run the query to get the list of all content fragments created from this content fragment models.

 You can choose bypath when you want to fetch the data from the specified path and you will choose list for you want all the data.

Filter In Graph QL

You will be happy to know that we can apply the filters in the Graph QL to filter the result by using by path like we had two content fragment created from my content fragment model 

After apply the filter 

You can filter it on any parameter and you can check it with the help of cntrl + space.

Filter The Result By Specific Object

I run the following query to find the all result  

Content Fragments in AEM

Content Fragments

Content fragments allow you to design, create and publish  the page independent content.

What is Page independent content?

Suppose you have a page and you need some content on that page so you will create that content on the page. But if you need the same content on the different-different pages what you need to you need to create the same content on different-2 pages but this is not a good approach. We should have capabilities to reuse the content as well as we are using the AEM as a CMS. 

• As per the content fragment you will create a content fragment with the content that you need on the pages and you will reuse that content on different-2 pages mean you can reuse the content.

• Content fragment allows you to create the different-2 variation of same content.
• Content fragment are editorial content primarily text and images. It is pure content it doesn't have any styling and layout.
• Content fragment allows you to create the channel specific content along with the variation.
• There is one OOTB(Out of the Box ) Component came in the core components is known as Content Fragment Component. You can use this component to display the content from content fragment.
• Content fragment also delivered the content in JSON format It uses the sling.

Architecture of content fragment

• We will be needing a content fragment model and in the CF model we will define the fields and its type.
• In this step you will create a content fragment from the content fragment model that you created in step 1. Now those fields will be available to add the content.
• You can create the different-2 variation of the content like in variation 1 you can have different data and in variation 2 you can have different data.
• To use this content fragment you have to use the content fragment model that come OOTB. And you can create your own component as well.
• You will use this Content fragment component on pages .
• You can export the content fragment in Raw JSON format and you can use this data in any third party application.

1.Content Fragment Model Or How to create the Content        Fragment Model

• To create content fragment model go to tools>Assets>Content Fragment Model  or click here to go 
  
  
  
• Check either you are able to see your project specific folder here or not if yes than no need to perform any other step.
• If you are not able to see you project specific folder in the content fragment model than go to the Tools>general>configuration browser 
  
  
  
• In the configuration browser you will be able to see your project specific folder. Select it and go to the properties of that folder 
  
  
  
• Open the properties and you will be able to see the properties like 
  
  
  
• Select the checkbox of content fragment models and click on save and close.
• Now you will be able to see you project specific folder inside the content fragment models. 
• One case can be your project was created through old archetype in this case you may need to create the folder manually here and at last can add that folder in your code base.
• Go in the Tools>assets>content fragment model and go inside your project specific folder. 
• And you will be able to see 
  
  
   
• Click on create and create your content fragment model and edit it like 
  
• Click on Create and click on open like 

  

  
  
• After clicking on open button you will be able to see the content fragment model in edit mode like 

  

  
  
• In LHS canvas you can drag and drop the field from RHS and from properties tab you can change the properties from properties tab.
• My content fragment model looks like 

  

  
  
• Click on save .
• Now your content fragment model is ready with the fields.

Note:-By default your content fragment model will be Enable.

How to create the Content Fragment and use it on the Page?

• Go to the Navigation>Assets>Files>Project Specific Folder like 
  
  
  
  
  
  
  
  
• The content fragment will store in Navigation>Assets>files>Project specific folder.
• Ans in JCR the content fragment will store in the /content/dam/project-specific-folder/content-fragments like 
  
  
  
• Go to the Navigation>Assets>files>Project specific folder and you will be get an option to create the content fragment like click on create button 
  
  
  
• After clicking on create you will get an option to create the content fragment  
  
  
  
• Click on Content Fragment and you will get 
  
  
  
• I am not able to see my content fragment model that I have created  but I am not getting . To resolve this issue go to the Navigation>Assets>files>Project specific folder select the folder and go to the properties of folder like  
  

  
  
  
• Select the properties and go to the Policies Tab 
  
  
  
• And select content fragment models that you want to allow and click on save and close.
• Now again try to create the content fragment and I am able to see the content fragment models that I created  
  
  
  
• Select your content fragment model click on Next and give the title like 
  
  
  
• Open it. And now my content fragment looks like 
  
  
  
• Author it  like 
  
  
  
• Click on Save.
• Now Content Fragment is ready to use.

How to use the content Fragment on the Page?

To render the content fragment's data on the page we have to use the content fragment component that comes OOTB.

Content Fragment OOTB Component 

We should not use this component directly in our project. We will check the content fragment component in our project if it will not present there we will create a proxy component. But it is present in our project  

• Will create a page and drag & Drop the content fragment component.
• When I am trying to author the component I am getting this dialog 
  
  
  
• In first path field we have to choose the path of the content fragment.
• I have authored the path of my content fragment in the content fragment component like 
  
  
  
• And I can see the the data on the page  that I authored in the content fragment like 
  
  
  
• Display Mode:-We have two display mode in the content fragment component one is single line and another is multi line. In Multi line the component will display the all data authored in the content fragment.
• And in case of single line we have to choose what field we want to display on the page. We can choose more than one field as well like 
  
• Variation:-From variation field you can choose the different-2 variation of the content fragment. To test it let us create a another variation. master variation is present by default you can see 

  

  
  
• Click on create variation to create another variation 

  

  
  
• And you will be able to see the empty fields here. You have author it for variation1 like 

  

  
  
• Variation means in different-2 variation you will have different-2 data. If you will change the variation from the CF Component the content will be change. Let us check.
• Navigate to the page and author the CF Component 

  

  
  
• Now in the variation dropdown we will be able to see the two variation(master and variation 1) and if we will choose variation1 we should get the content authored in variation1 

  

  It is working as expected.
• The ID Field in the content fragment component is for giving the HTML ID in case you want to apply and CSS.

Export the Content Fragment's Content Or How to export the content fragment's content to third party system?

We can export the content fragments by using two ways

• Sling Exporters.
• Assets API.

Let us see first how can we export the content using Sling Model Exporter Capabilities.

Copy the component path till component node in the page's jcr:content

Copy the path and append .json on the last and append it with http://localhost:4502/{path till component node}+{.json}

For example:http://localhost:4502/content/aem-pro/en/homepage/osgi-service-test/jcr:content/root/responsivegrid/container/layoutcontainer/contentfragment.json

And now we are getting  

• If we are adding the .json extension at last in the URL we are getting all the data but we want only the content that we authored in our content fragment so we have to add .model.json extension at last like(http://localhost:4502/content/aem-pro/en/homepage/osgi-service-test/jcr:content/root/responsivegrid/container/layoutcontainer/contentfragment.model.json)
• Now we are getting our content fragment's specific data 
  
  
  
• What variation you will use and you export the content using Sling Exporter you will be able to see only that variation's content that you authored in the component.

How to export the content of content fragment with Assets API?

• Open the content fragment in edit mode and replace  (/editor.html/content/dam with /api/assets)in the URL the like and add .json at last for example(http://localhost:4502/api/assets/aem-pro/content-fragment-for-demo.json) 
  

  
  

  By using Assets API you will be able to see all the variation's content.

Difference between the Sling Exporter and Assets API in terms of content fragment?

The main difference is Sling Export export only that content that we are using on the page. But using Assets API you can have all the data including master and other variations.