AEM With Progressive Web Apps - Demonstrating the ability of Content Fragments in AEM - Display AEM Content to Third Party Applications

AEM - Getting more headless

We all know that AEM is the leader in CMS-world ; day by day new features are getting added as part of new version upgrades. Recently Adobe released AEM 6.5 version with lot more features.

From previous few AEM versions support head-less capability, which means AEM Content can be delivered to multi channels or third party applications.

AEM Provides headless capability through Content Fragments and Experience Fragments. 

In this post we will show a use case of , how to use content fragments with external applications

Click on image to see it big

In this tutorial we will see,

• How to create & Deploy a Progressive Web Application - PWA(Including 'what is PWA', 'how do we run a PWA')?
• Create Content Fragments in AEM.
• Integrate PWA & AEM and retrieve the AEM content from PWA.

Let us first understand what is PWA?

In my previous post I have given an overview of PWA

Progressive Web Application - PWA:
This is an application which behaves like a native application and developed using modern web technologies. This application supports offline features(using service worker & Web App Manifest) when no internet connection and are extremely fast & engaging.

• PWA is an idea proposed by Google developers.
• A PWA is mainly dependent on Service Worker and Manifest files.

What is a Service Worker?
They are scripts that stand between your web application and your network

What is a Web App Manifest?

Web App Manifest is a JSON file with meta-information about the site.

PWA can be developed using technologies : Angular, React , Vue


PWA Features:

1. Responsive

2. Push Notification.

3. Offline Support.

4. Fast and efficient.

5. Not served through app store.

6. relatively cheaper than developing native apps

7. Does not require installation

Follow below sections to continue with this tutorial to learn integrating AEM With Progressive Web Apps

>Step 1: Set-up PWA running environment
>Step 2: How to create & Deploy a Progressive Web Application
>Step 3: Create & Author Content Fragments in AEM
>Step 4: Integrate PWA & AEM and retrieve the AEM content from PWA.

Demo Videos:


AEM Content Fragments Demo Part 1: PWA With AEM 


AEM Content Fragments Demo Part 2: PWA Running Environment setup

AEM Content Fragments Demo Part 3: Create & Deploy a Progressive Web Application

AEM Content Fragments Demo Part 4: Create & Author Content Fragments

AEM Content Fragments Demo Part 5 : Integrate AEM with PWA

Create & Access the content fragment programmatically

Content Fragment helps to create content without referring a page. This fragments can be used to showcase the content across various channels.
You can read multiple blogs on the same here.
AEM Leading to head less CMS?
AEM Content Fragment output as JSON
AEM 6.3 Content Fragments Basics
How to create a Content Fragment? step by step tutorial
Create & Access the content fragment programmatically

Programmatic creation, access, modification of Content Fragment

To create a content fragment, we need 'create' API reference from 'com.adobe.cq.dam.cfm.

ContentFragmentManager'.

Once we have the import, use below code to create a content fragment programmatizally.

//reference the Content Fragment Manager
@Reference
private ContentFragmentManager fragmentManager;

private void myCreateFun() {
    /** fragmentManager.create helps to create a content fragment
        parent - The location where the content fragment should be created (for eg. "/content/dam/fragments")
        template - the content fragment template to refer while creating the new fragment
        my-test-fragment - name of the fragment
        My Test Fragment - title of the fragment **/
     
    ContentFragment myFragment = fragmentManager.create(parent, template, "my-test-fragment", "My Test Fragment");
 
}

Programmatically accessing a content fragment

We need 'com.adobe.cq.dam.cfm.ContentFragment' API reference to access a content fragment

//Get the resource of content fragment as below.
Resource fragmentResource = resourceResolver.getResource("/content/dam/fragments/my-test-fragment");

//Adapt it to a fragment resource
if (fragmentResource != null) {
    ContentFragment fragment = fragmentResource.adaptTo(ContentFragment.class);
    // the resource is now accessible through the API
}


Programmatically accessing elements from Content Fragment

Iterator<ContentElement> elements = fragment.getElements();
while (elements.hasNext()){
ContentElement element = elements.next();
//your action on element
}

Programmatically Accessing Content Fragment metadata:

Map<String, Object> getMetaData();


Programmatically Accessing Content Fragment variations:

Iterator<ContentVariation> variations = element.getVariations();

while(variations.hasNext()){
ContentVariations variation = variations.next();
//do the variation process here
}

Programmatically Accessing  Content Fragment elements/variations by its name

ContentElement title = fragment.getElement("title");
ContentVariation mobileAppVariation = title.getVariation("mobile-app");

Programmatically Accessing Content:

String content = element.getContent();
String contentType = element.getContentType();

Programmatically Modifying Content Fragment content
element.setContent("Content", "text/plain")

Programmatically Modifying Content Fragment metadata
void setMetaData(String name, Object value) throws ContentFragmetException

YouTube demo videos for Content Fragments:
         AEM 6.3 Content Fragments Basics
         Content Fragments AEM
         View Content fragment output in aem