Using JSON to Populate CQ5 CMS Dialogs

Although Adobe's CQ5 CMS has many quirks, it can be a powerful tool once you discover the how to achieve certain tasks. For example, one of my tasks recently was to obtain a list of users in a particular group in CQ5 and to display all users in a drop-down menu in a dialog. The Content Editor could then select a user, and the user's name and other details about the user would be displayed on the web page. (This was built to associate a particular user, that may or may not be the Content Editor, with specific content.) The component created would display automatically within the page template, and the Content Editor would simply be able to edit the component directly.

This article explains how the task can be achieved. This article also assumes that you have created a group and added users to the group.

Create the Component and Include it in the Template

1. Create a folder (type cq:Component) for the component, and name it mygroup-users.

2. In your template, include the new component directly, as below:
<cq:include path="users" resourceType="[my project]/components/mygroup-users"/>

Create the Dialog

3. In the mygroup-users component folder, add a new dialog (cq:Dialog) named 'dialog'. (Add a 'title' property for the dialog and an xtype of 'panel'.)

4. Underneath your dialog, add a new node - cq:WidgetCollection. Name it "items".

5. Underneath the 'items' node, add a cq:Widget, and name it 'users'. Add new properties, described in the list below:

• fieldLabel = Select User: (String)
  
• name = ./users (String)
• xtype = selection (String)
• type = select (String)

6. Add one last new property to the 'users' node. This will allow the dialog to look up the script that processes the data. The property is known as optionsProvider (String). The path is to the JSON code, which will be created in the next step, with a cachebreaker.

function(path, record){

return CQ.Util.formatData(

CQ.HTTP.eval(CQ.HTTP.noCaching(

 '/apps/[path to component]/users.list.json?' 

+ (new Date().getTime()))));

}

Create your JSON, JSP and a Reference

7. Now, you will create a JSP file (nt:file) to include the Java code that you will write to obtain the data. The file will be placed in the root of your mygroups-users component. (It should be named mygroup-users.jsp.) Here, you will write the code to output the data onto the web page. (I'll let you sort this yourseldf, but I used the UserManager class.)

8. Now, you will create the JSON code. This file (nt:file) should be named list.json.jsp, and it will be placed in the root of the component (mygroup-users). The naming is important to specify the component's default in CQ5; we're extending this list component. The code simply is a loop to list all users to print them out.

• Initialise the content type: response.setContentType("application/json");
  
• resolve the UserManager: final UserManager um = resourceResolver.adaptTo(UserManager.class);
• Get the Groups: Iterator<Group> groups = um.getGroups();
• You'll need a framework, as below:
  

%>[<%
String delim = "";
while (groups.hasNext()) {
   // get the name of the group, and extract all the members from that group.
  // the member is an Authorizable class.
%><%= delim %><%
%>{<%
%>"value":"<%=  member.getProfile().getAuthorizable().getID() %>",<%
%>"text":"<%= member.getProfile().getName() %>",<%
%>"qtip":""<%
%>}<%
if ("".equals(delim)) {
}
    delim = ",";
        }
    }
}
%>]

9. Now, you'll need a reference (sling:Folder) to your users. Underneath the mygroups-users component, create a new sling:Folder, and give it the name 'users'. Add a new property called sling:resourceType, and it should be the path to your component: [myproject]/components/mygroups-user


Test

10. Test your changes.

The JSON should be output to http://localhost:4502/apps/[path to component]/users.list.json.

The JSON will be returned in the browser, if working correctly. It will look like below:

[

• -
  {
  • value: "john_doe"
  • text: "John Doe"
  • qtip: ""
  }
• -
  {
  • value: "joebloggs"
  • text: "Joe Bloggs"
  • qtip: ""
  }

]


I hope that you have fun building your own custom components based on the JCR.