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. 

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.

        

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:

 

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 

 

Creating a sample component & template in AEM 6.4

In this post , we will understand how to create a sample component, template in AEM 6.4. Below given the steps explained in this tutorial.

• Create a template in AEM 6.4
• Create a page from the template in AEM 6.4
• Create a component in AEM 6.4
• Author the component in AEM 6.4
• publish the page and test in AEM 6.4

Template basics in AEM 6.4:
There are 2 types of AEM templates in AEM 6.4, Editable Templates and Static Templates

i) Editable Templates
Now the AEM expects template creation as a combined job of template authors, admin and developer. The editable templates can be created and edited by template authors using the Template console and editor.

ii) Static Templates
Normal way of developing a template. These are developed purely by developers, they cannot be created or edited by authors.

Is there any difference in using editable and static templates while authoring a page?
No. There is no difference and no indication between static and editable templates while creating a page.

Here I will be explaining about working with editable templates.

A template will have below features.

• Structure - Predefined content that cannot be changed on pages created with the template.
• Initial Content - Predefined content that can be changed on pages created with the template.
• Layout - Helps to author for a range of devices by defining various layouts.
• Styles - Define the styles to be used with the template and its components.

• Create an editable template in AEM 6.4 - Steps are in this post 
• Create a page using the template

What is a component?
Components are modular units which realize specific functionality to present the content on a website. They are re-usable.

There are two sets of Adobe-provided AEM components available; Core Components & Foundation Components.

Core Components: Core components are known for flexibility and feature-rich authoring functionality. Core Components were introduced to provide robust and extensible base components.

Features:
-Core components make page authoring more flexible and customizable.
-Built on the latest technology and best practices.
-Extending them to offer custom functionality is simple for the developer.

Examples of AEM 6.4 core components are,

• Breadcrumb
• Form Button
• Form Container
• Content Fragment
• Form Hidden
• Form Options
• Form Text
• Image
• Language Navigation
• List
• Navigation
• Page
• Quick Search
• Social Media Sharing
• Text
• Title

Foundation Components: Out-of-the-box components, which form a subset of the components. Available for a standard installation of AEM.

Note: Foundation components are based on legacy technologies, but are no longer enhanced, so new way is core components.

There are 3 types of foundation components.

• General: For eg. Adaptive Image,Carousel,List
• Columns: For eg. 2 Columns, 3 Columns, Column Control
• Form: For eg. Form (component), Account Name, Address, File Upload,Image Upload

• Steps to create a component and link it with a template and author on a page in AEM 6.4 are given in this post

 Complete AEM 6.4 Tutorial Video Series