AEM & Schema Based JSON Editor

By
AEM is very powerful when it comes to delivering content via REST. REST is core of AEM and with Sling’s selectors, resource resolution etc. it becomes even more powerful. Also, now a days REST has become a standard for applications to exchange data in stateless manner. To exchange data most of the time we use JSON format.

You might have created component, templates and pages etc. and also, you may have used .json selector (which outputs JSON in predefined format) to get JOSN representation of page but, have you every ran into a use case where you really want to manage real JSON data in AEM in similar way as you manage other pages?

In this post I’ll walk you through how to manage JSON (static only) in AEM. So, lets define a use case and acceptance criteria.

Use Case & Acceptance Criteria
1. We want to create a JSON editor (GUI based) component in AEM using which we can create/manage JOSN data in AEM.
2. We should be able to download JSON as a file.
3. We should be able to import JSON files edited outside of AEM and once imported we should be able to edit it via same GUI interface.
4. JSON should be validated before saving in both cases (manually editing via GUI or import)
5. We should be able to define schema (similar to XSD for XMLs) against which JSON will be validated.
6. AEM component should be able to generate component’s UI based on schema automatically and we don’t have to create separate component for managing different JSON formats.

Here is final output that we’ll get as solution (schema based json-editor). Here is quick summary of screen shots:

1) First screen shots shows a schema (JSON based) which will be used for validating JSON that we’ll edit/import and generating a GUI automatically to edit JSON data.
2) Second screen shots shows a UI generated based on provided schema. It also shows JSON validation status (on top left corner as Green Label) based on provided schema.

3) Third screen shots shows actual JSON output that will be generated when edited from UI and stored in JCR repository.

FIG. 1: JSON Schema for generating UI and validating JSON


FIG. 2: JSON Editor generated from schema


FIG. 3: JSON View (Generated by adding JSON via editor shown above)


For creating this solution I have used following:

1.  JS library (json-editor), which allows us to define schema and generate GUI based on provided schema. You can read about library and documentation on github:
https://github.com/jdorn/json-editor

2. Sling’s POST servlet (org.apache.sling.servlets.post.impl.SlingPostServlet) which is very useful when you actually want to perform CURD (create, update, read and delete) operation on JCR nodes. If you are interested in manipulating nodes in AEM and don’t want to deal with low level JCR session and access right etc. then look at some simple but, very powerful examples at below URL:

https://sling.apache.org/documentation/bundles/manipulating-content-the-slingpostservlet-servlets-post.html

3. Bootstrap and Font Awesome CSS and Icon Library
http://getbootstrap.com/
http://fontawesome.io/icons/

Also, you can download complete AEM CRX package, which contains code (component, template), client libraries and sample pages for this article at following location:

https://github.com/suryakand/aem-json-editor

You’ll notice that code is very self-explanatory and I’ll not spend much time explaining code but if you have any questions or need help feel free to post a comment.

Comments

Pradeep Ranasinghe said…
Suryakand you are a hero! this works like a charm. Thanks for sharing a wonderful piece of work for public. May you be reach your goals and be well and be happy!

Best wishes,

Pradeep
October 20, 2016 at 10:34 PM
Post a Comment

Popular posts from this blog

AEM, FORM Submission & Handling POST requests

By
In this article I’ll be specifically talking about how to handle POST request in AEM and what options we have. Please note that Adobe has added more security around handling POST request from AEM 6.x onwards to prevent CSRF attack. If you don’t configure AEM correctly, POST requests will not work even after using any of methods explained in this article.   You can read more about security configurations and restriction at: https://docs.adobe.com/docs/en/aem/6-1/develop/security/csrf-protection.html It is very common use cases to have external application POST some data to an AEM page (e.g. /content/en/home.html) or even submit a form (POST) to same URL. But, as you know that in AEM POST works differently and any POST call to AEM is intercepted by Sling’s POST servlet (org.apache.sling.servlets.post.impl.SlingPostServlet). In some cases org.apache.sling.servlets.post.impl. SlingPostServlet is very useful when you actually want to perform CURD (create, update, read a...
Read more

AEM - Query list of components and templates

By
Some time while migration or for auditing purposes we need to know where a particular component/template or any other resource have been used. Have you ever wondered about how to fetch a list of all the paths where a particular component or template is being used? I this short article I am going to show a quick way to write a utility with which you can get list if paths (actual resource nodes) where a targeted resource is being used. Here is the code snipped: public void getResourceListHelper(Resource parentResource , String targetSearchPropertyKey ,  String targetSearchPropertyValue , List components ) {      Resource childResource ; for (Iterator resourceChildrenIter = parentResource .listChildren(); resourceChildrenIter .hasNext();  getResourceListHelper ( childResource, targetSearchPropertyKey, targetSearchPropertyValue, components)) { childResource = (Resource) resourceChildrenIter .next(); ValueMap childProperties = (...
Read more

AEM 6.3 - Bundle Whitelisting - Deprecation of administrative authentication

By
Image
I stumbled on an issue when I was using neab with AEM 6.3. I created few neba ResourceModels and when I tried to access neba Model Registry, I got an error ( java.lang.IllegalStateException: org.apache.sling.api.resource.LoginException: Bundle org.eclipse.gemini.blueprint.extender is NOT whitelisted ): Image: neba Model Registry Menu Image: Error Screen NOTE: Neba team has already fixed it on their development branch and we don’t need to explicitly add whitelisting configuration for neba bundle. Here is the reason for error Originally the ResourceResolverFactory.getAdministrativeResourceResolver and SlingRepository.loginAdministrative methods have been defined to provide access to the resource tree and JCR Repository. These methods proved to be inappropriate because they allow for much too broad access. Consequently these methods are being deprecated and will be removed in future releases of the service implementations. The following methods are deprecat...
Read more

AEM as a Cloud Service (AEMaaCS) – Architecture Overview

By
Image
AEM as a Cloud Service (AEMaaCS) – Architecture Adobe Experience Manager (AEM) is one of the leading CMS from Adobe and is part of Adobe Experience Cloud (AEC). The Adobe Experience Manager (AEM) web content management offers a set of capabilities for creating, managing, delivering, and personalizing content across various digital marketing channels, including web, mobile, and email.  Before we dive into architecture of AEM as a Cloud Service (AEMaaCS) we need to understand why AEMaaCS is needed and how it is different as compared to classic AEM. To understand this, we’ll first look at: Evolution/history of AEM Challenges with traditional/classic AEM (the AEM that majority of us have used from last 10-12 years) Evolution/History of AEM The software was originally launched in early 2000 as Communiqué (CQ) by Day Software of Basel, Switzerland. After CQ 5.3 had been released, Day Software was acquired by Adobe Systems in 2010 then CQ became Adobe Experience Manager. ...
Read more