How can we create a custom datatype in the content fragment models in AEM

For majority of the use cases, the given content fragment datatypes will satisfy any use cases. But still if we need to extend the data type functionality further, below approach can be tried.

To start with, let us understand the data type structure in AEM.

Content Fragment model data types are configured at:
/libs/settings/dam/cfm/models/formbuilderconfig/datatypes/items/enumeration

and each dataype has properties as below,

• fieldIcon
• fiedPropResourceType
• fieldProperties
• fieldResourceType
• fieldTitle
• fieldViewResourceType
• renderType
• valueType

There are some additional fields which are specific to the fields.

Now, if you observe closely,

• fiedPropResourceType having string value 'dam/cfm/models/editor/components/datatypes/field'
• fieldIcon, fiedTitle -are data type naming specific.
• fieldResourceType, renderType, valueType - are behavior specific to the data types.

All the fieldResourceType values are referred from /libs/granite/ui/components/coral/foundation, /libs/dam/cfm/models/editor/components, /libs/dam/cfm/admin/components etc.

Below given a screenshot of default Boolean data type properties.

 

Custom?

Now say if you need to create a custom data type for the content fragment, you can create a project specific structure of the data type referring the default one, the same way we extend the components.

If there is any other way to implement this, please let me know through the comments.

List of leading Headless CMS Solutions

What is Headless CMS?    
 
 HEADLESS = content.

What makes a real headless CMS? A headless cms is having a content first approach WITH full APIs to access the content in any way you want. Content first must be the approach behind Content Architecture. You start with looking at your content and structuring it and how it can be used now and in the future before you think of building anything UI wise. Its simple, Content First approach.

Below given a narrow list of headless CMSs in addition to AEM.

•     Agility CMS
•     Butter CMS
•     Acquia
•     e-Spirit
•     Contentstack
•     Contentful
•     dotCMS
•     Mura
•     Cloud CMS
•     Cockpit CMS
•     Core dna
•     Craft CMS
•     Zesty.io
•     Directus
•     Storyblok
•     GraphQL CMS
•     Gentics Mesh
•     Cosmic JS
•     Kentico Cloud
•     Prismic.io
•     Quintype
•     Sanity
•     Scrivito
•     Squidex
•     DNN Evoq Content
•     Strapi
•     Superdesk

AEM Managed cloud - Reasons to move

Reasons for moving to AEM Managed cloud?

When we need agility and velocity for AEM projects, we should think of using AEM managed cloud.

Challenges associated with normal AEM deployments:

• Slower time to value
• Staying ahead of security threats
• Upgrades & Maintenance
• Performance and availability management

Above reasons push companies to run AEM in cloud managed service by Adobe

Current statistics of Cloud with AEM Deployments

• 580 Plus customers at present globally
• Up to 99.9 average uptime
• 21 days for on premise to cloud transition
• 40 Plus operating regions on Azure and AWS
• 5 disaster recovery modes to ensure maximum uptime
• 150 Plus customer success engineers

Key benefits of AEM Managed cloud

• Decreased risk with increased security
• Minimize disruptions & increased ROI
• Accelerate Time to Market
• Receive Guided Expert Services

Offering from Cloud manager for AEM

• Continuous Integration and Delivery: of code to speed time to market
• Code inspection, performance testing and security validations:Based on best practices.
• Based on best practices
• Automatic , scheduled or manual deployment: Even during out of business hours.
• Auto scaling to detect the need for additional capacty during un expected spikes

Read more:
 Quality, Security, Performance Checks in Adobe Cloud Manager
 Why you should think of using Adobe Cloud Manager for AEM Projects?

The need of AEM Admins and developers to understand Docker - AEM with Docker

Now a days distributed deployment is becoming common and Agile DevOps highly depends on containerized deployments. It was started with Microservice s and now stretching its wings.

The advantage of using AEM with docker
AEM With Docker fastens the deployment process. Any latest PRODUCTION environment could be imported to local file path as images. Say the TEST environment is crashed by some means, we can replace/repair this with docker images. These imported images can be exported to any Docker systems and will be useful to expand instances on-demand basis.

What is docker?

Docker allows you to run applications in an isolated environment with its own CPU, memory and network stack.

Docker needs a docker file to create an image from AEM and its dependencies. This image is then deployed to a new environment where code deployments are configured. This setup ensures the new environment is up and ready in few minutes.

AEM WITH DOCKER- Click on Image to see it big

Is AEM Docker combination a good pair?

There are arguments that AEM is state-ful where in repositories holds the content, still a brand new environment of AEM can be made available quickly. There are also reports that Adobe is working to make AEM Compatible with Docker and AEM builds are coming as docker images.

How does it impact the AEM Admins/ developers who work with AEM?

Since docker is the new deployment trend, it is highly recommended that AEM admins/ developers need to get a good understanding on docker and containerization techniques.

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.

AEM Content Fragments Demo: Integrate AMP with AEM
 

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.

Demo