AEM & Schema Based JSON Editor

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:

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:


3. Bootstrap and Font Awesome CSS and Icon Library

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


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

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

Popular posts from this blog

Sling Authentication

CQ Development - OSGi bundles and Components

Create an AEM (CQ) project using Maven

Multiple log files using log4j appender