Adobe Experience Manager Tutorials

Friday, 14 December 2018

Integrate PWA & AEM and retrieve the AEM content from PWA.

Previous post on this topic

Create & Author Content Fragments in AEM

Hope the Content Fragment and related changes are published already.

Now let us enable CORS, Anonymous access in publish environment.

Step 1: Add CORS details:

Since we are going to access the Content Fragment from external application, we may get CORS error(Cross-origin resource sharing). To enable the CORS access, we need to make some changes in AEM publish instance.

Go to AEM system > Console > ConfigManager > Apache Sling Main Servlet

Click on (+) icon and add new property for 'Additional response headers' as 'Access-Control-Allow-Origin=http://localhost:5000'

[AEM CORS ISSUE RESOLVED] - click on image to see it big

The new Content Fragment Model is now anonymously accessible on AEM Publish.

Now go back to PWA home page and click on the button, you can see that data is retrieved from AEM as shown below.

[Content Fragment Output to third party PWA application]

We now created a sample PWA and pulled content from AEM.

If you face any issue and need help in running this demo, please let me know through the comments.

Demo

Create & Author Content Fragments in AEM

Previous post on this topic
How to create & Deploy a Progressive Web Application

Login to AEM, go to Assets > Files.
Let us create a folder now called 'My Samples' by clicking the create button.

Create CF Folder - click on it to see it big

Now go inside the folder and click on create > Content Fragment.

Then Select the Simple Fragment template. Enter title and description and then click on create.

Create Content Fragment AEM

In next dialog click on open and edit content fragment as shown below.

[Author CF]

To access the content fragment, we need to author it on a page. Let us author it on a sample we-retail page.

Now go to sites> we-retail > us >en > Men, open it for editing.

From component browser, drag and drop 'Content Fragment' component on the page.

[Author Content Fragment AEM 6.2 onwards

Click on Configure and add the newly created Content Fragment and save it.

[Authoring and landing]

We have the authored Content Fragment now. We can access it over the JSON Exporter API by invoking the '.model.json' in author instance, For me it was below URL.

http://localhost:4502/content/we-retail/us/en/men/jcr:content/root/responsivegrid/contentfragment.model.json

Note: This URL needs to be updated in file "retrieve_content_fragment.js" at line '$("button").click(function(){ $.ajax({url:'

The sample output is given below.

[AEM 6.4 Content Fragment Output]

Now Publish the page where Content Fragment is authored. So that all data is available in AEM Publish

Demo

Next post:
Integrate PWA & AEM and retrieve the AEM content from PWA.

How to create & Deploy a Progressive Web Application

Previous post on this tutorial
Setting up an environment to run Progressive Web Applications

Here I will showcase how to create a very minimal sample PWA and deploying it.

Step 1 : Create a folder 'my-aem-pwa-sample'
Step 2 : Go inside the folder
Step 3 : Create a file called 'index.html' and paste below content.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#008000"/>
    <title>PWA demo with AEM</title>
    <link rel="stylesheet" type="text/css" href="my-aem-pwa-style.css" media="all">
    <link rel="manifest" href="manifest.json">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="retrieve_content_fragment.js"> </script>
</head>

    <div class="content">
        <h1>-Progressive Web App demo with AEM-</h1><br>
        <button class="button">Retrieve Content Fragment Data</button>
        <h3><div id="div1" align="center" style="background-color: #FF9800"></div></h3>
    </div>

<script>
     if('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/serviceworker.js')
         .then(function() {
               console.log('Service Worker Registered');
         });
     }
   </script>
</body>
</html>

Step 4 : Create a file called 'manifest.json' and paste below content.

{
    "name": "PWA demo with AEM",
    "short_name": "PWA",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#FF9800",
    "theme_color": "#FF9800"
}

Step 5 : Create a file called 'my-aem-pwa-style.css' and paste below content.

body {
#background-color: #ffcc00;
color: black;
}

.content {
#    max-width: 1000px;
    margin: auto;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    #background-color: #ffcc00;
}

.button {
    background-color: #008000;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    cursor: pointer;
}

.vertical-container {
height: 300px;
display: -webkit-flex;
display:         flex;
-webkit-align-items: center;
          align-items: center;
-webkit-justify-content: center;
          justify-content: center;
}

h1.vertical-container {
font-size: 275%;
}

Step 6 : Create a file called 'retrieve_content_fragment.js' and paste below content.
You need to update the blue color line of code based on your content fragment created

$(document).ready(function(){
        $("button").click(function(){

            $.ajax({url: "http://localhost:4503/content/we-retail/us/en/men/jcr:content/root/responsivegrid/contentfragment_1847490508.json", dataType: "json", success: function(result){
                $("#div1").html("Sorry! Unable to retrieve data; Please try again!");
                var obj = JSON.stringify(result);
                var strresultParsed= JSON.parse(obj);
                $("#div1").html(strresultParsed.text);
            }});
        });
});

Step 7 : Create a file calles 'serviceworker.js' and paste below content.

var cacheName = 'my-aem-pwa-demo';
var filesToCache = [
'/',
'/index.html',
'/my-aem-pwa-style.css'
];

self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
);
});

self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
event.respondWith(
    caches.match(event.request, {ignoreSearch:true}).then(response => {
      return response || fetch(event.request);
    })
);
});

Now the folder looks as below.

PWA Folder structure - click on this to see it big

Step 8 : Now open a command prompt inside folder 'my-aem-pwa-sample' and run below command

'serve .'

You can see below response.

serve

Step 9 : Open the browser and hit the url 'http://localhost:5000' (This is the url of application deployed and stared as seen in above screenshot).

Now the PWA sample application is running on port 5000.

PWA UI

Next post
Create & Author Content Fragments in AEM

demo

Setting up an environment to run Progressive Web Applications

Previous post on this topic

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

We need Node Package Manager for running this tutorial. Follow below steps to install node and related tools.

Step 1: Install npm, Node
As part of deploying PWA, we will use Node js & Node Package Manager(npm). While installing Node.js, we will automatically get npm installed on computer.

Use this link for node js download. https://nodejs.org/en/

List of all Operating System installers : https://nodejs.org/en/download/package-manager

Once npm and node is installed, ensure below commands are returning respective versions to confirm the installation was successful.

cmd> node -v

cmd> npm -v

Step 2: Install Serve

Serve helps developing a static PWA project, When ever there is a single page application or just a static file needs to be deployed, we can use 'serve' module.

Follow below steps to install serve. More details here [https://www.npmjs.com/package/serve]

Execute below command to install serve.

cmd> npm install -g serve

Once serve package is installed, please ensure installation was successful by running below command.

cmd> serve -v

Once server module is installed, you can go inside any folder and just run below command to start the server and deploy the single page.

cmd> serve .

Demo

Next post
How to create & Deploy a Progressive Web Application

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

Wednesday, 12 December 2018

Steps to Create custom Content Fragment Templates in AEM 6.4

Hope you have gone through the basics of Content Fragments in AEM.
Create Content Fragments : Step By Step Tutorial

AEM 6.4 Content Fragment

[This tutorial works for versions AEM 6.2, AEM 6.3, AEM 6.4]

Generally AEM provides default content fragments template called 'Simple Fragment' [at location: /libs/settings/dam/cfm/templates]. But we may need to customize or create new templates based on our needs.

Here I will explain how we can create custom content fragment templates.

Where to create custom content fragment templates?

There are multiple places we can create custom content fragment templates.

Config: When we work with folder specific templates, use this location.
Apps: Usually general purpose templates are created here.

Content Fragment Templates Path

Let us create a template under /apps for general purpose use.

Steps

Traverse to /apps/settings/dam inside CRXDE lite.
Create a node of type cq:Page and name it 'cfm'
Under the newly created cfm node, create another node of type cq:Page and name it 'templates'.
Under templates node create a node of type cq:PageContent and name it 'jcr:content'.
Under jcr:content create a new boolean property called 'mergeList' with value 'true', this step ensures our new template is available in addition to /lib content fragment templates for authoring.
Now do 'Save All'.

Our crx looks like this now

Custom Content Fragment creation

We have the structure ready now, we will add properties for the template now by referring the /lib/ 'Simple Fragment' template.

Traverse to /libs/settings/dam/cfm/templates and copy 'simple' node.
Paste it on our structure under /apps/settings/dam/cfm/templates.
Now do a 'Save All'.

We now have below structure in crx.

We have a template similar to 'Simple Fragment' now. Let us customize the template for our need.

We will create title, description as elements and 2 variations for desktop and mobile.

Let us start by renaming 'simple' node to 'custom'

Select “jcr:content” under 'custom', Update the value of 'jcr:description' to 'A custom project specific fragment'.
Update value of 'jcr:title' to 'Custom Fragment'
Now rename 'main' under elements to 'title', update its 'jcr:title' to 'Title' and name to 'title'
Next create a new element – description by copying the main and renaming. Update the 'jcr:title' to 'Description' and name to 'description'.
Now select node 'jcr:content' under node 'custom' and create a new node of type 'nt:unstructured' and name it 'variations'.
Create a new node for 'desktop' of type nt:unstructured under variations; add properties 'jcr:title' 'Desktop' and name 'desktop'.
Create a new node for 'mobile' of type nt:unstructured under variations; add properties 'jcr:title' 'Mobile' and name 'mobile'.
Now click on 'Save All'.

A new custom template is created now, which is ready for authoring.

Authoring Custom Content Fragment

Now go to AEM Assets >Files , click on 'Create' from top right hand corner and select 'Content Fragment'.
Here you can see the 'Custom Fragment'

Custom Fragment AEM 6.4

Select the 'Custom Fragment' and click 'next'.

Enter the values for title, description and click 'Create' then click on 'Open'.

Here you can see that a new Content Fragment is available with 'title', 'description'.
Similarly we can see that variations for 'desktop' and mobile also available for authoring.

In my upcoming blog, I will give a walkthrough on using Content Fragment with Progressive Web Applications.

Please dont forget to subscribe the blog.

Read More:

https://aem-cq-tutorials.blogspot.com/2018/06/create-content-service-end-point-in-aem.html

https://aem-cq-tutorials.blogspot.com/2018/05/aem-64-content-fragment-output-as-json.html

Monday, 10 December 2018

Experience Fragment Use cases in AEM 6.4

An Experience Fragment is a set of content that grouped together forms an experience that should make sense on its own.

Experience Fragment :
- is a part of an experience.
- makes sense of its own.
- has one or multiple components.
- can be combined with other Experience Fragments.
- can be reused, reordered and resized across pages.
- can have different variations.
- is based on a template with its own structure.

Click on image to see it big

Below given a video series which gives a walk through of AEM 6.4 Experience Fragments

What is an Experience Fragment and its use cases
https://youtu.be/n19KjL_qm7Q

Create Experience Fragment in AEM 6.4 And authoring them
https://youtu.be/21hz7n-PWF8

Create Variations of Experience Fragment for web, Facebook, Pinterest and author them
https://youtu.be/KzF9ykHR0So

Deliver Experience Fragments on Webpage, or other cross channel applications like Facebook & Pinterest
https://youtu.be/Z22540FoADU