AEM is very powerful when it comes to delivering content via REST. REST is the core of AEM and with Sling’s selectors, resource resolution, etc. it becomes even more powerful. Also, nowadays REST has become a standard for applications to exchange data in a 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 JSON representation of page but, have you ever run into a use case where you really want to manage real JSON data in AEM in a similar way as you manage other pages?
In this post, I’ll walk you through how to manage JSON (static only) in AEM. So, let's 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 the 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 the 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 a separate component for managing different JSON formats.
Here is the final output that we’ll get as a solution (schema-based JSON-editor). Here is a quick summary of screenshots:
1) First screenshots 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) The second screenshots shows a UI generated based on provided schema. It also shows JSON validation status (on the top left corner as Green Label) based on provided schema.
3) The third screenshots show actual JSON output that will be generated when edited from UI and stored in the 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 the following:
1. JS library (JSON-editor), which allows us to define a schema and generate GUI based on the provided schema. You can read about the 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 CRUD (create, read update, 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 the following location:
No comments:
Post a Comment
If you have any doubts or questions, please let us know.