AEM 6 and AngularJS

This article elaborates on the usage of AngularJS and this in combination with AEM (Adobe Experience Manager). For this example, AEM version 6 has been used.

 From a functional point of view, the (rather basic) software component will allow to enter a JCR path and, by using AngularJS,  all the corresponding nodes will be automatically retrieved an displayed.

The UI form, being the main actor in our solution, would look the following.  It’s obvious the lay-out could be improved quite a bit but this is not really the focus of this tutorial.

AEM Angular UI

From a technical point of view, we’ll be using AngularJS (as mentioned before), jQuery and the DataTables jQuery plugin.

View

We first start with the HTML (view) and you’ll notice we did an effort to exclude all the business logic and to stick to the basic HTML.

AEM CQ5 AngularJS HTML

As you can figure out from the comment, the AEM properties.jcrPath variable contains the initial value of the path to be queried.  The value of the variable jcrPath is persisted in the JCR and has been defined during creation and configuration of our AEM component. Please find below an image of how the dialog of our component looks like.

AEM AngularJS Component Dialog

In our view we display the value of our jcrPath variable and apply a basic filter but this is mostly for debugging or illustrative purposes.

AngularJS

After the view, we focus on JavaScript and AngularJS. As you can see, we first included our JavaScript libraries (being jQuery and DataTables) by using the includeClientLib tag.

In our module Angular module and controller, we assign the value of the properties.jcrPath variable to the scope.jcrpath variable and we add the slash. We’ll elaborate in a minute on the logic of the added slash.

As a next step, we trigger an HTTP GET request. In the above picture, you can see we actually have 2 JSP components being test3.jsp and test3.jcr.jsp. So basically we started from the test3.jsp servlet and from this servlet we trigger a second servlet that will be responsible for returning a JSON response.

We’ll quickly focus on the second servlet. This component uses the jcrPath parameter and triggers a  request towards an OSGI bundle and it’s the OSGI bundle that will actually retrieve and return all the nodes related to a path.

The below small sequence diagram depicts once again the entire flow:

AEM AngularJS Sequence Diagram

By  focusing again on the Angular script, you’ll notice we can end up in two scenarios: the negative scenario of a failure being covered by the error method and the positive scenario of a succeeding HTTP request being covered by the success method.  In the success method we loop through the array of nodes and we format the data in the dd/mm/yyyy format.  After the loop we invoke the setupDataTable javascript method to add all the nodes and to draw the table.

The watch function completes our example. In our watch function we define a listener and we invoke the getEntries method again but only when the end of our jcrPath contains a slash. You’ll agree there is no point in invoking the getEntries method every type the user enters a character in the jcrPath field and it only makes sense to retrieve the nodes when the jcrPath is complete.

The complete code can be found by using following urls:

And the 2 below images proof our AEM AngularJS component actually works (simply focus on the total number of entries as depicted in the small blue rectangle at the bottom).

AEM AngularJS result1

AEM AngularJS result2

I hope this article has been useful to understand how AngularJS can be used in combination with AEM. Don’t hesitate to ask questions or to recommend amendments.

All the best,

Wim Van den Brande.

Keywords: AEM, AngularJS, CQ5, Content Management. 
Advertisements

About IctDynamic.Be

IctDynamic ontwerpt en ontwikkelt betaalbare software toepassingen voor de KMO Wij focussen op • Google Apps consultancy • GIS en geografische oplossingen • Freelance opdrachten als project manager (certified), analyst, architect, software engineer IctDynamic designs and develops affordable software applications for the SME We focus on • Google Apps consultancy • GIS and geographical solutions • Freelance missions as project manager (certified), analyst, architect, software engineer
This entry was posted in AEM, Java, Technical and tagged , , , . Bookmark the permalink.