Tuesday, 18 December 2018

AMP with AEM - Demonstrating the ability of Content Fragments in AEM


AMP integration with AEM - CaaS Model(Content as a service) demo 

I was receiving requests for writing sample code to showcase Third party AMP page which retrieve data from AEM (Content as a service).

What is AMP?

The AMP Project is an open-source Google-run website publishing technology initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. More details on https://www.ampproject.org/

How can I develop AMP websites?

You need to refer the above url for implementing AMP Projects, which has detailed information about syntax of AMP.

AMP integration with AEM

Step 1: To work with AMP and AEM, create an AMP file as shown below and deploy it on any server.
(You can refer PWA implementation & deployment article for the same: Set-up PWA running environment).

A sample AMP Structure is given below.

Save below file as 'Sample_AMP.html'

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>AMP demo with AEM</title>
  <link rel="canonical" href="index.html" />
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
  <noscript>
         <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
  </noscript>
</head>
<body>
<amp-list width="auto"
  height="100"
  layout="fixed-height" src="test.json">
  <template type="amp-mustache">
    <div class="url-entry">
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list> 
</body>
</html>

It takes a JSON input file(src="test.json") and publish data on page.


Step 2: Author a content fragment in AEM which has JSON format as below.
Follow this link for Creating & Authoring Content Fragments:  Create & Author Content Fragments in AEM

{
 "items": [
   {
     "title": "AMP YouTube",
     "url": "https://www.youtube.com/"
   },
   {
     "title": "AMPproject.org",
     "url": "https://www.ampproject.org/"
   },
   {
     "title": "AEM Tutorial Blog",
     "url": "http://aem-cq-tutorials.blogspot.com/"
   },
   {
     "title": "Solr with AEM Totorial",
     "url": "http://aemsolr.blogspot.in/"
   }
 ]
}


Step 3: Now, update the 'Sample_AMP.html' for src="test.json"with publish url of content fragment authored page


Step 4: Ensure CORS is enabled in AEM. (Confused? Refer https://aem-cq-tutorials.blogspot.com/2018/12/integrate-pwa-aem-and-retrieve-aem.html to updated CORS)

Step 5: Now invoke the AMP file, from server, you can see that data is appearing as shown below.

AMP with AEM - click on it to see big

*(I haven't done styling just Functionality is tested).

Notes:
AMP - uses specific tags and syntax which needs to be validated after each change in code. You can use online AMP validator(https://validator.ampproject.org/) for this purpose.

Related Posts

>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.


Friday, 14 December 2018

Working with Content Fragment Model in AEM 6.4

We know that AEM Content Fragments helps to describe and manage structured content, where in  Content Fragment Model helps to Define the structure of Content Fragment

Steps to work with AEM Content Fragment Models

  • Enable use of content fragment models in configuration manager.
  • Apply the configuration to Assets folder.
  • Creating a Content Fragment Model.
  • Update the definition of Content Fragment Model.
  • Publish it.
  • Delete it.

In this video we will see how to work with Content Fragment Model in detail.



Related Posts
https://aem-cq-tutorials.blogspot.com/2018/12/steps-to-create-custom-content-fragment.html

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



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.

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


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

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 .


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. AEM 6.5 version is getting released soon with 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.



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



Tuesday, 4 December 2018

AEM 6.5? Heard about it?

Adobe Experience Manager is releasing AEM 6.5 in some time. Hope you are aware of the news now.

Yes the fact is that AEM 6.4 is available for Solution partners for the product review.

How can I get AEM 6.5 for download?
You need to be a solution partner for this.

When will I get it?
As of now Adobe has invited partners who are interested in testing out new features of AEM 6.5 So we need to wait for further communication.

What are all the new features of AEM 6.5?
As of now, no one knows other than Adobe. Let us wait.


AEM 6.5 New Features

Monday, 26 November 2018

AEM Experience Fragments vs Content Fragments

AEM Supports both Experience Fragments & Content Fragments.

What is a fragment w.r.t CMS?


A Fragment is an editable item from a common location, which can be reused on multiple pages, whenever required.

AEM Experience Fragments vs Content Fragments

Both Content Fragments & Experience Fragments gives the headless capability to AEM.

“Headless capability is one of the trending feature in any CMS”

Click on image to see it big



Content Fragment: They provide content in JSON format. Need to work on Content Fragments to make it a complete web experience.

Experience Fragment : Experience Fragments gets served directly to a website/ channel.

Read the difference between CF & EF

Click on image to see it big & clear

Read More:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

AEM Experience Fragments vs Content Fragments

Single Page Applications and AEM


Video showcases difference between Content Fragment & Experience Fragment in detail:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

While working with AEM, we should know about all relevant technologies in the market. SPA and PWA are such ones. AEM already supports SPA OOTB. Let us understand about them more.

SPA:

SPA are the applications having single page and the content gets updated within the page dynamically based on user interaction. Commonly used technologies to develop SPAs are AngularJS, Ember.js, Knockout.js, Meteor.js, ExtJS, Vue.js and React .

Eg: Gmail

SPA Features:
1. Responsive
2. Fast and efficient.
3. Not served through app store.
4. No extra queries to the server to download pages
5. User friendly.


PWA:

This is an application behave 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.

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.

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


Conclusion
  • An SPA can be a PWA, but a PWA does not have to be a SPA.

Progressive Web Apps are the next level of browser based applications, offer a rich user experience that parallels what users know and expect from native apps and combine that with the benefits that browser based applications provide.

  • Progressive Web Apps are not Single Page Apps

- PWA's Register a Service Worker with a Fetch Event Handler and Minimal Offline Support
- PWA's Have a Valid Web Manifest File with a Minimal Set of Icons
- PWA's Served using HTTPS (Secure)

Read More:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

AEM Experience Fragments vs Content Fragments

Single Page Applications and AEM


Watch below video to understand more on SPA Vs PWA

Tuesday, 13 November 2018

Single Page Applications and AEM

What is Single Page Application and its uses?
Single Page Applications (SPAs) are a wonderful tool for making engaging and unique experiences for website users. SPAs helps to build a fluid, scalable experience. SPA can be used within AEM to give both developers and marketers the level of control they need while authoring a content.

Some examples where SPA in use are Gmail, Google Maps, AirBNB, Netflix, etc.

The core principle of an SPA is that it is a single page where a lot of information remains the same and only a few pieces gets updated at a time. This is different from a traditional HTML page load where the server re-renders a full page with every request.

SPAs provide great ease to developers because of the separation of back-end services and front-end display without disturbing critical back-end functionality.  Developers have the option to work in the language they prefer.
  • Common SPA frameworks are Angular, React, Ember, and Vue are JavaScript

Click on image to see it big

Advantages of SPA's

• Behaves like a native application
• Provides rich user experiences
• Good separation of concerns
• API-based
• Decouples content from presentation
• Can provide live preview & editing
• Supports a hybrid setup
• Personalization on the server side

AEM & SPA
The latest versions of AEM supports SPA and allows authoring through SPA Editor.

AEM SPA Editor Steps
Below given sequence of activities involved in AEM SPA websites.

1. SPA Editor loads.
2. SPA is loaded in a separated frame.
3. SPA requests JSON content and renders components client-side.
4. SPA Editor detects rendered components and generates overlays.
5. Author clicks overlay, displaying the component’s edit toolbar.
6. SPA Editor persists edits with a POST request to the server.
7. SPA Editor requests updated JSON to the SPA Editor, which is sent to the SPA with a DOM Event.
8. SPA re-renders the concerned component, updating its DOM.

We are coming up with more blogs/ videos on working with SPAs now.

Read More:


SPA Vs PWA - Single Page Application Vs Progressive Web Apps

AEM Experience Fragments vs Content Fragments

Single Page Applications and AEM
 


What next?

Watch below video to understand basics of SPA.

Thursday, 25 October 2018

Modern AEM Component Implementation Patterns

AEM Core Components follow modern implementation patterns. There are two types of component patterns in AEM, General Component Pattern & Reusable Component Pattern




 1. General Component Patterns
 This set of patterns are recommended for any type of components(regardless whether the component is specific to a single project, or reused across multiple sites or projects).

 a. Configurable Components
 There are cases where we have a requirement of components which are having variation of similar elements. In such cases, it is recommended to have configurable components having dialogs with various options instead of creating multiple components.

 b. Separation of Concerns
 This patterns recommends the usage of separation of logic from markup.

 - HTL can be used for markup which is more secure.
 - SlingModels are the recommended option for Logic implementation 

2. Reusable Component Patterns
 These patterns are used for any kind of component, which are most suitable for components that are intended to be reused across multiple sites or projects(For eg. Core Components)

 a. Pre-Configurable Capabilities
 It is recommended to define the components/templates flexible as much as possible. Some examples could be using edit dialog (For Page authors), Design Dialog (For Template authors) and all these options are availabe under 'Policies' as part of editable templates.

 b. Proxy Component Pattern
 Here component inheritance is used as a proxy. Create second level components by referring the resourceSuperType property from core components.
Which offers more flexibility and avoid content refactoring if one site needs a different behavior for a component.

 c. Component Versioning
 Always introduce component versioning by adding a number in their resource type path, and in the fully qualified Java class names of their implementations, which will help keeping the components compatible over time. Useful when upgrade happens.

 d. Model Interfaces
 This pattern recommends the usage of  HTL's data-sly-use instruction to point to a Java interface, while the Sling Model implementation is also registering itself to the resource type of the component.

When there is a requirement to redefine the implementation of a Sling Model or  HTL markup of a component, this avoids complexity. Because they are loosely coupled.

Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4



Below video gives an overview of AEM Component Patterns

Proxy Components in AEM 6.4

What are proxy components?

Proxy Components are site-specific components which are inherited from core components, which define the desired component name and group to display for page authoring.
  • Proxy Components refer to a Core Component as their super-type.
  • Proxy Components follow the path  : /apps/my-site/components (Where core components path : core/wcm/components)
These site-specific components are called proxy components, for the reason they don't need to contain anything; they just serve mostly to define the version of a component to use for the site. Infact, when customizing the Core Components, these proxy components play an essential role for markup and logic customization.
[Click on image to see it big]

Advantages of creating Proxy Components
  • Proxy components helps categorization of components in a reusable way.
  • Better seggregation: It is a good practice to have 'sling:resourceType' property pointing to site-specific components, instead of pointing to components that are shared by multiple sites.
  • This provide more flexibility and avoid content refactoring if one site needs a different behavior for a component.
  • Customization can then be achieved on the site-specific component and won't affect the other sites.
  • Proxy components can be entirely empty if they fully inherit the functionality, or they can redefine some aspects of the component.
 Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4


See below video to understand more about Proxy Components. 

AEM Core Components

 AEM Core components are available from AEM 6.2. AEM 6.3 onwards Core Components were getting more stabilized. Now we have AEM 6.4 which has the more advanced Core components.



  Core Components were introduced to provide robust and extensible base components, built on the latest technology and best practices, and adhering to accessibility guidelines.

 Core Components leverage the latest technology to enable the creation of flexible, extensible, and feature-rich components to enable authors to easily create content.

 AEM Core components are with HTML Template Language, or HTL, Touch UI dialogs and Sling Models, Secure, robust, version-able

 There are 16 Core Components in AEM 6.4 at present (This count keep getting increased based on developer contrbutions in GitHub), which can be divided into two categories .

 Page authorable components

-Breadcrumb
-Content Fragment
-List
-Navigation
-Page
-Quick Search
-Social Media Sharing
-Text
-Title
-Language Navigation
-Image

Form specific core components
-Form Hidden
-Form Options
-Form Text
-Form Button
-Form Container

When to Use the Core Components?

New Projects - New projects should always attempt to use Core Components.

Existing Projects - Recommendation is keep using the foundation components, unless a site or component refactoring is planned.

New Custom Components - Assess if an existing Core Component may be customized. If not, recommendation is to build a new custom component following the Component Guidelines.

Existing Custom Components - If your components work as expected, then keep them as they are.
If not, refer to "New Custom Components" above.

Foundation Component Support
Since the foundation components have served as a basis of so much project development over many versions, they will continue to be supported into the foreseeable future.

However, Adobe's development emphasis has shifted to the core components and new features will be added to them whereas only bug fixes will be made to the foundation components

Core Components Advantages
  • 100% written in HTL.
  • Apache 2.0 License.
  • Allow versioning of components.
  • GitHub
  • latest features are supported, plus backward compatibility is also available.
  • Unit test coverage > 80%

Steps to create a sample core components:
  • Download and Install
  • Create Proxy Components
  • Load the Core Styles
  • Enable the Components
Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4



See below video to understand more about creation of Core Components. 



See below video of Core Components walk-through. 

Wednesday, 19 September 2018

Content Approval workflows in AEM 6.4

I have given a step by step demo of content approval process in AEM 6.4 in the video. Here I will explains the steps involved in detail.

[Click on images to see them big]



There are 3 major steps involved in AEM content approval,
  1. Creating a simple workflow model
  2. Creating a content approval workflow based on the model created
  3. Verify the workflow
User Creation

Before we start, we need a set of users to understand our Workflow process. For this , we will create 3 users called author, editor, legal.

Go to tools> Security > Users and create 3 users author, editor, legal. This is quite simple and direct step.

Steps for workflow creation

1) Creating a simple workflow model

- Go to Tools, Workflow, Models

- Select 'Create', then 'Create Model'.

- Then Add Workflow Model dialog appears. Enter the Title and Name, then select Done.

Newly created model is listed in the Workflow Models console.

- Select your new workflow, then click on Edit to open it for modification:

The new workflow will contain:
  • Flow Start
  • Step 1
  • Flow End
- Delete Step 1

- From the Workflow selection of the steps browser, drag a Participant Step onto the workflow and position it between Flow Start and Flow End.

- Open the properties by clicking on configure option

- In the Common tab enter Validate Content - for both the Title and Description.

- Open the User/Group tab:

- Select Editor for the User/Group field.

- Confirm the updates by selecting the tick mark.

- Drag an Or Split onto the workflow and position it between Validate Content and Flow End.

- Open the Or Split for configuration.

Configure:
  • Common: select 2 Branches
  • Branch 1: select Default Route. - This option will be selected by default when the user reviews the content.
  • Branch 2: ensure Default Route is not selected.
  • Confirm your updates to the OR Split.
- Drag a Participant Step to the left hand branch, open the properties, specify the following values, then confirm the changes:

Title: Reject Publish Request
User/Group: Author - (Editor will reject the publish and notify the author).

Now,

- Drag a Participant Step to the right hand branch,
- In the properties section, specify the following values, then confirm the changes:

Title: Approve for Legal review
User/Group: legal - (If editor is fine with the content, he asks the legal person to review for legal adherence).

- Drag an Or Split onto the workflow and position it between Validate Content and Flow End.

- Open the Or Split and make configurations as below.
  • Common: select 2 Branches
  • Branch 1: select Default Route.
  • Branch 2: ensure Default Route is not selected.
  • Confirm your updates to the OR Split.
- Drag a Participant Step to the left-hand branch, open the properties, specify the following values, then confirm the changes:

Title: Reject Publish Request
User/Group: Author - We will reject the publish and notify the author.

- Drag a Participant Step to the right-hand branch, open the properties, specify the following values, then confirm the changes:

Title: Publish Page as Requested
Process: select Activate Page. This process publishes the selected page to the publisher instances.

Now the workflow model looks like this.




Note: Remember to sync the workflow so that the latest changes will be always updated in run time.

2) Creating a content approval workflow based on the model created

- Now login as user 'author'

We have two options to trigger the content approval workflow.

a) Go to workflow model (http://localhost:(port)/libs/cq/workflow/admin/console/content/models.html) select, click on start workflow and specify the payload.

b) Go to sites> a project specific page. Select the page and click on 'Create workflow' from top left menu. Then in new window select the workflow model and provide a title. In next window click on 'create' so that the workflow will start.

3) Verify the workflow

- Now login as user 'editor' and go to inbox and open the message and complete the workflow. Editor will have options Approve for Legal review , Reject Publish Request

 Now the workflow will be moved to legal person as per our workflow model definition,

- Login as legal, and from inbox he will have options like 'Reject Publish Request', 'Publish Page as Requested'. Complete the review and approve it. So that the page gets activated.

If any of the editor or legal person rejects, the payload goes back to author and asks for re-verification.

Below given a video recording of the above mentioned activity. Let me know if you face any issues through the comments section.

        

Thursday, 23 August 2018

AEM 6.4 Assets - Walkthrough

Adobe Experience Manager Assets helps you to work with assets, like create, store, and deliver images, video, and other content for any screen or device.

AEM 6.4 has various asset operation on its touch UI.

Below given the image of assets UI.


Assets section has below options.

File:
File section helps to traverse to files and do various operation on an Asset

Collections:
A collection is a set of assets within Adobe Experience Manager (AEM) Assets. Collections are used  to share assets between users. A collection can include assets from different locations.

Collections can be shared with various users that are assigned different levels of privileges, including viewing, editing, and so on.

Lightbox: is a special type of collection that provides easy access to assets. We can quickly access Lightbox to add or delete assets. Every user has an exclusive Lightbox that is automatically created when the user logs in to Adobe Experience Manager (AEM) Assets.

Remember the Lightbox collection cannot be deleted.

Shared Links:

Adobe Experience Manager (AEM) Assets lets you share assets, folders, and collections as a URL with members of internal and external organizations, including partners and vendors. This makes a convenient way of making resources available to external parties without them having to first log in to AEM Assets.

Asset templates :

Adobe InDesign can be used to create and export brochures, flyers and print ads that speeds time to market while complying with brand guidelines and break digital and print silos with consistent messaging across channels leveraging AEM platform.

Catalogs:

Catalogs allows customers to leverage pre-designed InDesign templates to generate new catalogs straight from Experience Manager, target print channel, saving significant time and layout costs.

Jobs:
The Jobs page shows the progress of the asset upload. We can continue working in AEM and return to the Jobs page in Dynamic Media at any time to review an in-progress job.


AEM 6.4 Assets Supported Formats

Image Formats : PNG GIF TIFF JPEG BMP PNM PGM PBM PPM PSD EPS PICT PSB
Document:  DOC DOCX ODT PDF HTML RTF TXT XLS XLSX ODS PPT PPTX ODP INDD PS QXP EPUB Adobe Illustrator (AI)
Multimedia : AAC MIDI 3GP MP3 MPG OGA OGG RA WAV WMA DVI FLV M4V MPEG OGV MOV WMV SWF
Video : mp4 mov qt flv wmv mpg m4v f4v vob m2v mp2 avi webm ogv ogg mxf mts mkv r3d rm ram flac mj2
Archive : TGZ JAR RAR TAR ZIP
Other Supported Formats :SVG, CSS VTT XML Javascript




Video tutorial for AEM 6.4 assets:

 

Tuesday, 21 August 2018

Sample components Creation in AEM 6.4


Steps to create a simple component in AEM 6.4 .

Under /apps, create a project folder(I have create 'myproj'), under which create a /components folder.

Under components, create folders /content and /structure as shown below.

Below shown the component structure in AEM 6.4.

[Click on any image to see it big & clear]

[Component structure in AEM 6.4]

Under structure create a node called 'header'., rename the header.jsp to header.html.

Add property 'componentGroup' : myGroup for the header node.

Copy pasted below html content in 'header.html'

    <div>    
        <li>         
            <p>This is a sample component</p>
            <h3>Header</h3>
            <p>This is a sample text in body pf component</p>           
        </li>
      </ul>
    </div>

Under header node, create a 'dialog' [primary type : cqDialog; xtype dialog]
Under dialog node, we will have 'items' [primary type: cq:Widget; xtype:tabPanel]
Under items, we will have 'items' node [primary type: cqWidegtCollection]
Under items, we will have  'tab1' node[primary type :cq:Panel; title: Tab 1]

The component is ready now.

Author this component on a page:
Since this is a new component, we need to make this component available for our template.
Add this component to our template created earlier by following below steps.

We had placed the component under 'myGroup'.
Now go to template policy section and modify the property to add the component as part of this template. Procedure is shown in below image.



[AEM 6.4 add policy]


Now as you see the new component is available for our template for authoring.


[New component]


Author the component on template and create a new page, so that the newly created component is visible now.


[New component authored n AEM 6.4.png]


Now activate the page (which includes template, component activation), so that the page will be visible in publish environment.

AEM 6.4 Tutorials Video Series
 

Create a page from the template in AEM 6.4



The page creation in AEM 6.4 is very much similar to other previous AEM versions.

I will be using 'we-retail' content location for my page creation to save time.

Go to site admin and reach the path '/content/we-retail/language-masters/en',(remember this is the content path where I had configured my template in my previous post).

 Click on new page and select the 'Html 5 template' we created as part of previous post as shown below and create page from it.

[Click on the image to see them big & clear]

[site creation AEM 6.4]

The new page looks like this.



[Page creation aem 6.4]

Next post we will demonstrate how to create AEM 6.4 sample components.

AEM 6.4 Tutorial Series

Creating an editable template in AEM 6.4


Steps involved in creating an AEM 6.4 Editable Template.

1) Create template folder

To create a template folder, follow this steps.

Go to Global Navigation -> Tools > Configuration Browser.

All the existing folders are listed to the left rail including the global folder.

Click 'Create'.

In the Create Configuration dialog enter below details:

Title: Give a title for the configuration folder(For Eg.SampleFolder)
Editable Templates: Tick to allow for editable templates within this folder
Click Create



2) Creating a New Template - This is usually done by Template Author

Follow below steps.

Go to Tools -> General -> Templates
Select the previously created folder 'SampleFolder'.
Select Create, Select HTML5 Page template(content page), select 'Next'
Enter the name and description and select 'Create'

[Click on the image to see them big & clear]





Now we will see a Success message on completion

AEM 6.4 template creation success


Select Open to start editing the template or Done to return to the template console.

We now have the template created and it has below form.



Using structure option, I have authored a text and an image as shown below.


Using layout container[root],  I have unlocked the layout so that all pages which uses this template will have 'Drag Components Here' enabled and I will be able to author more components.




The 'policy icon' left to the lock icon helps to add policy like linking specific component to this template.

We have the template ready now.

3) Enable the template

Now go to templates folder and select the 'Enable' template so that it is activated. Enabling the template allows the template to be used for page creation.




4)Allowing a Template - Template Author

Now, we need to link this template to our content path. The configuration path is '/conf/SampleProjects/settings/wcm/templates'




Path format in general is : /conf/<your-folder>/settings/wcm/templates/.*

Add this path to page properties of the content root where you are creating page. I have selected 'we-retail' as may content root for ease(/content/we-retail/language-masters/en).

Here is how you can do this, open page from site admin, go to page properties, > advanced > Template settings and add allowed templates with current template path as shown below.

Template property in AEM 6.4

We are done with the template creation now. In next post, we will try to create a page using this template.

AEM 6.4 Tutorial Video Series