Article summary

Summary
Discusses how to create an AEM component that uses the Dynatree JQuery Plug-in to create an AEM component that displays data in a tree structure.
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 6

Introduction

You can create an Adobe Experience Manager (AEM) component that displays data within a tree structure. For example, the component can read the AEM JCR, query data, and then display the results in a tree structure. The following illustration shows an AEM component displaying data.

tree

To create an AEM component that displays data in a tree structure, you can use the Dynatree JQuery plug-in. For information about this plug-in and to download it, click dynatree.

The following illustration shows the project files created in this development article.

proFiles
Section Description
A The AEM component that displays data in a tree structure.    
B The dialog that corresponds to the component.  
C The AEM client library that stores JQuery and the Dynatree plug-in JS and CSS files. These files were downloaded from the Dynatree link.
D The  page component that lets an author drag the component from the Touch UI side rail onto an AEM web page during design time.
E The template on which the page component is based. 

This development article steps you through how to build an AEM 6 component that lets an AEM author drag the component from the side rail onto an AEM page. The component then displays data in a tree structure. Perform these steps:

  1. Create a CQ application folder structure. 
  2. Create a template on which the page component is based.
  3. Create the page component based on the template.
  4. Create an AEM 6 Touch UI component.
  5. Add a dialog to the Touch UI component. 
  6. Create a CQ web page that uses the new component.

Create an AEM application folder structure  

Create an AEM application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

 

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: contains components that your application uses.
  • page: contains page components. A page component is a script such as a JSP file.
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components.
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder).
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter dynatree.
  5. Repeat steps 1-4 for each folder specified in the previous illustration.
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.  

Create a template 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateTree.
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter dynatree/components/page/templateTree.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create the page component based on the template  

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/dynatree/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateTree.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page (in AEM 6, you specify this value for page components. In previous versions of AEM, this was not rquired.)

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateWeb.jsp located at: /apps/dynatree/components/page/templateTree/templateTree.jsp.

8. Enter the following HTML code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where your AEM Tree component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create an AEM 6 Touch UI component

After you setup the AEM folder structure, create the AEM Touch UI component. Perform these tasks using CRXDE Lite:

1. Right click on /apps/dynatree/components and then select New, Component.

2. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter herotree.
  • Title: The title that is assigned to the component. Enter herotree.
  • Description: The description that is assigned to the template. Enter herotree.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side kick where the component appears. Enter General. (The herotree component is located under the General heading in the Touch UI side rail. Also appears in General in the classic view's sidekick.)
  • Allowed parents: Enter */*parsys.

3. Click Ok.

Add a dialog to the AEM Touch UI component  

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article lets the AEM author enter text values, which are then displayed in the AEM web page. (See section B in the illustration shown at the beginning of this development article.)

A dialog that is built for the Touch UI is defined by using nodes of type un:structured. You define the type of control on the Touch UI dialog by setting the node's sling:resourceType property. For example, to define a text field on a Touch UI dialog, set the  sling:resourceType property to granite/ui/components/foundation/form/textfield.

The following table lists the sling:resourceType values that are used to create the component in this development article.

Sling:resourceType Description
granite/ui/components/foundation/container Defines a container for the dialog
granite/ui/components/foundation/layouts/tabs Defines a tab that is used in the dialog
granite/ui/components/foundation/section Defines a section within a tab. 
granite/ui/components/foundation/layouts/fixedcolumns Defines fixed columns. 
granite/ui/components/foundation/form/textfield Defines a text field that lets authors enter data.
granite/ui/components/foundation/form/textarea Defines a text area field that lets author more data than a text field. 

Note:

When building a dialog for the Touch UI view, you define the type of control (for example, a text field) by setting the sling:resourceType property. In contrast, when building a dialog for the classic view, you define the type of control by setting its xtype property. You set both properties in the following sections. 

The following illustration shows the JCR nodes of the component created in this development article. 

treeDialkog


As you can see in the previous illustration, there are two JCR branches that are related to the component's dialog:

  • /apps/dynatree/components/herotree/cq:dialog
  • /apps/dynatree/components/herotree/dialog
Both of these dialogs are required when developing an AEM component. The first branch defines the component's dialog used in the Touch UI environment. The second branch defines the component's dialog used in the AEM classic view. Therefore to use the component in both AEM views, you need to create both JCR node branches.  
 

Build the dialog for the Touch UI view

Perform these tasks:

1. Select /apps/dynatree/components/herotree/.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: cq:dialog
  • Type: nt:unstructured

4. Add the following properties to the cq:dialog node.

 

Name Type Value Description
helppath String en/cq/current/wcm/
default_components.html#Carousel
Specifies the location of the help content. (see the help button on the top of the Touch UI dialog shown at the start of this article)
jcr:title
String
Hero Text
Specifies the title displayed in the dialog. (see the illustration at the start of this article)
sling:resourceType
String
cq/gui/components/authoring/dialog
Specifies the type of node. In this example, the type is a dialog.

5. Click on the following node: /apps/dynatree/components/herotree/cq:dialog.

6. Right click and select Create, Create Node. Enter the following values:

  • Name: content
  • Type: nt:unstructured

7. Add the following property to the content node.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/container Defines the type

8. Click on the following node: /apps/dynatree/components/herotree/cq:dialog/content.

9. Right click and select Create, Create Node. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

10. Add the following properties to the layout node.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/
layouts/tabs
Defines the type
type String nav defines tab functionality

11. Click on the following node: /apps/dynatree/components/herotree/cq:dialog/content.

12. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

13. Click on the following node: /apps/dynatree/components/herotree/cq:dialog/content/items.

14. Right click and select Create, Create Node. Enter the following values:

  • Name: herotext
  • Type: nt:unstructured
15. Add the following properties to the herotext node (this node represents the tab).
Name Type Value Description
jcr:title String Hero Text Properties The value displayed on the tab of the Touch UI dialog (see the illustration at the start of this article)
sling:resourceType String granite/ui/components/
foundation/section
Defines the tab functionality

16. Click on the following node:/apps/dynatree/components/herotree/cq:dialog/content/items/herotext.

17. Right click and select Create, Create Node. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

18. Add the following property to the layout node.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/
layouts/fixedcolumns
defines the type of sling resource

19. Click on the following node:/apps/dynatree/components/herotree/cq:dialog/content/items/herotext.

20. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

21. Click on the following node:/apps/dynatree/components/herotree/cq:dialog/content/items/herotext/items.

22. Right click and select Create, Create Node. Enter the following values:

  • Name: columns
  • Type: nt:unstructured

23. Click on the following node:/apps/dynatree/components/herotree/cq:dialog/content/items/herotext/items/column.

24. Add the following property to the columns node. 

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/container defines the type of sling resource

25. Click on the following node:/apps/dynatree/components/herotree/cq:dialog/content/items/herotext/items/column.

26. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

27. Click on the following node:/apps/dynatree/components/herotree/cq:dialog/content/items/herotext/items/column/items.

28. Right click and select Create, Create Node. Enter the following values:

  • Name:headingText
  • Type: nt:unstructured

29. Click on the following node:/apps/dynatree/components/herotree/cq:dialog/content/items/herotext/items/
column/items/headingText
.

30. Add the following properties to the headingText node (this node represents the Heading Text input control on the dialog. See the illustration at the start of this article.)

Name Type Value Description
fieldLabel Value Heading Text Defines the label associated with the input control
name String ./jcr:Heading Defines the name of the control. You reference this value in the component's code.
sling:resourceType String granite/ui/components/
foundation/form/textfield
Defines the control as a text field. 

31. Click on the following node: /apps/dynatree/components/herotree/cq:dialog/content/items/herotext/items/column/items.

32. Right click and select Create, Create Node. Enter the following values:

  • Name:description
  • Type: nt:unstructured

33. Click on the following node: /apps/dynatree/components/herotree/cq:dialog/content/items/herotext/
items/column/items/description.

34. Add the following property to the description node (this node represents the Description input control on the dialog. See the illustration at the start of this article.)

Name Type Value Description
fieldLabel Value Description
Defines the label associated with the input control
name String ./jcr:description
Defines the name of the control. You reference this value in the component's code.
sling:resourceType String granite/ui/components/foundation
/form/textarea
Defines the control as a text area. 

Build the dialog for the AEM classic view

Build a dialog for the classic view by performing these tasks:

  1. Select /apps/dynatree/components/herotree/, right click and select Create, Create Dialog.
  2. In the Title field, enter herotext2.
  3. Click Ok.
  4. Delete all nodes under /apps/dynatree/components/herotree/dialog/.

Create the dialog tab

Create the first tab in the dialog titled for the herotree component. This dialog contains a text field control and a text area control (same controls that are located in the Touch UI dialog).     

ClassicDialog

To create the tab, perform these tasks:

1. Click on the following node:/apps/dynatree/components/herotree/dialog.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollection

3. Select the /apps/dynatree/components/herotree/dialog/items node.

4. Right click and select Create, Create Node. Enter the following values:

  • Name: tab3
  • Type: cq:Widget

5. Click on the following node: /apps/dynatree/components/herotree/dialog/items/tab3.

6. Add the following properties to the tab3 node.

Name Type Value Description
title String Text Details
The text that is displayed.
xtype String panel
Specifies the data type for this control. A panel holds other controls.

7. Click on the following node: /apps/dynatree/components/herotree/dialog/items/tab3.

8. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollections.

9. Click on the following node: /apps/dynatree/components/herotree/dialog/items/tab3/items.

10. Right click and select Create, Create Node. Enter the following values:

  • Name: headingText
  • Type: cq:Widget

11. Add the following properties to the headingText node.

Name Type Value Description
fieldLabel String Heading Text
The field label.
hideLabel Boolean true Specifies whether the label is hidden.
name String ./jcr:Heading
The name of the control.
xtype String textfield
Specifies the data type. A textfield lets a user enter text.

12. Click on the following node: /apps/dynatree/components/herotree/dialog/items/tab3/items.

13. Right click and select Create, Create Node. Enter the following values:

  • Name: description
  • Type: cq:Widget

14. Add the following properties to the description node.

Name Type Value Description
fieldLabel
String Description The field label.
name
String ./jcr:description
The name of the control.
xtype String textarea Defines a text area control.

Add Dynatree CSS and JQuery files to a CQ:ClientLibraryFolder node  

You add Dynatree CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. Add the following files to the clientlibs folder:

  • jquery.js
  • jquery-ui.custom.js
  • jquery.cookie.js
  • jquery.dynatree.js
  • ui.dynatree.css
  • vline.gif
  • icons.gif

Download the Dynatree plugin files from the following URL:

https://code.google.com/p/dynatree/

See section C in the illustration at the start of this article.

You have to add two text files to the clientlibs folder. These text files map to the JS files and the CSS file. The names of the text files are: css.txt and js.txt.The css.txt file contains the CSS file name: ui.dynatree.css. Likewise, the js.txt file contains the JS file names specified above. Make sure that your js.txt lists the files in this order so that they load properly.

jquery.js
jquery-ui.custom.js
jquery.cookie.js
jquery.dynatree.js

To create the client library folder, perform these tasks:

  1. Right-click /apps/dynatree/components/herotree then select New, Node.
  2. Make sure that the node type is cq:ClientLibraryFolder and name the node tree.
  3. Right click on clientlibs and select Properties. Add a categories property of type String[]. Assign the value tree to this property.
  4. On your file system, navigate to the folder where the JQuery JS files are located. Upload these files to AEM.
  5. On your file system, navigate where you placed the CSS file. Upload this file to AEM.
  6. Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
  7. Add a TXT file to the clientlibs node named css.txt. Add the content specified in this section.

 

Note:

Do not forget to upload the two image files to the clientlibs folder: icons.gif and vline.gif. These two files are located in this path in the extracted ZIP file: dist\skin.

Note:

You can write a Java client application to upload files to AEM. Once developed, this provides an easy and fast way to upload files. See the following article for more information: Creating Java Swing applications that posts files to AEM ClientLibs folders.

Add JavaScript code to the clientlib JS files

Add JavaScript logic to the herotre component's JSP file. This component displays data in a tree structure (see the illustration shown at the start of this article). Add the following application logic to the JSP file located at: /apps/dynatree/components/herotreeherotree.jsp.

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="tree" />
<html>


<head>
<title>AEM 6 Dynatree componentcc</title>
 
 
<script>

    //create the data source for the dyntree component    
var treeData= [{"title":"General","isFolder":"true","children":[{"title":"Loan22","key":"Loan22"},{"title":"Loan33","key":"Loan33"},{"title":"Alb","key":"Alb"}]},{"title":"HeroVal1","isFolder":"true","key":"HeroVal1","children":[{"title":"HeroVal1","children":[{"title":"Yes","key":"Yes"},{"title":"No","key":"No"}]}]},{"title":"HeroVal2","isFolder":"true","key":"HeroVal2","children":[{"title":"HeroVal2","children":[{"title":"Yes","key":"Yes"},{"title":"No","key":"No"}]}]},{"title":"HeroVal3","isFolder":"true","key":"HeroVal3","children":[{"title":"HeroVal3","children":[{"title":"Yes","key":"Yes"},{"title":"No","key":"No"}]}]}];


$(document).ready(function() {
    $('body').hide().fadeIn(5000);



    $("#tree3").dynatree({
        checkbox: true,
        autoScroll: true,
        selectMode: 1,
        children: treeData,
        onSelect: function(select, node) {


            // Get a list of all selected nodes, and convert to a key array:
            var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
                g_allNodes = node.getKeyPath();
                return node.getKeyPath();
            });
            $("#echoSelection3").text(selKeys.join(", "));

            // Get a list of all selected TOP nodes
            var selRootNodes = node.tree.getSelectedNodes(true);
            // ... and convert to a key array:
            var selRootKeys = $.map(selRootNodes, function(node){
                return node.data.key;
            });

            //Reset all selected nodes
            g_allNodes =  selKeys;

            $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
            $("#echoSelectionRoots3").text(selRootNodes.join(", "));
        },
        onDblClick: function(node, event) {
            node.toggleSelect();
        },
        onKeydown: function(node, event) {
            if( event.which == 32 ) {
                node.toggleSelect();
                return false;
            }
        },
        // The following options are only required, if we have more than one tree on one page:
//        initId: "treeData",
        cookieId: "dynatree-Cb3",
        idPrefix: "dynatree-Cb3-"
    });




});
</script>
</head>
<body>
 
<p class="description">
            The following is an example of an AEM Tree component.
        </p>
        <div id="tree3"></div>

</body>
</html>

In this example, notice that the variable named treeData stores the following data:

[{"title":"General","isFolder":"true","children":[{"title":"Loan22","key":"Loan22"},{"title":"Loan33","key":"Loan33"},{"title":"Alb","key":"Alb"}]},{"title":"HeroVal1","isFolder":"true","key":"HeroVal1","children":[{"title":"HeroVal1","children":[{"title":"Yes","key":"Yes"},{"title":"No","key":"No"}]}]},{"title":"HeroVal2","isFolder":"true","key":"HeroVal2","children":[{"title":"HeroVal2","children":[{"title":"Yes","key":"Yes"},{"title":"No","key":"No"}]}]},{"title":"HeroVal3","isFolder":"true","key":"HeroVal3","children":[{"title":"HeroVal3","children":[{"title":"Yes","key":"Yes"},{"title":"No","key":"No"}]}]}];

This is the data that is used to display in the tree structure. You can enhance this example by developing a custom AEM service that queries the JCR, and encodes the result set in this format and use it to populate the control.

 

Create an AEM web page that uses the Touch UI component 

The final task is to create a site in the AEM Touch UI view that contains a page that is based on  templateTree (the template created earlier in this development article). This AEM page lets you select the herotree component that you just created from the AEM Touch UI side rail, as shown in the following illustration.

SideRail

You can view the component in the AEM Touch UI, as shown in this illustration. 

tree4

To open the tree component, ensure that you place the page into the Preview mode. 

Likewise, you can also use the herotree component in the AEM classic view. In this situation, you drag the component from the CQ sidekick, as shown in the following illustration. 

 

sidekick

To create an AEM web page that uses the Touch UI component, perform these tasks:

  1. Go to the AEM welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Sites.
  3. Select the + Icon in the web page. This create a new AEM page. 
  4. Select Create Page.
  5. Select templateTree from the list of templates that appear. 
  6. Select Next.
  7. Specify the name of the page in the Title field.
  8. Select Create Page and open the new page. 
  9. Drag the herotree compnent from the AEM side rail into the page. Double click on the component. Enter values into the dialog. Once done, the values are displayed in the AEM web page.

Note:

If the AEM side panel is empty, populate the AEM side kick as described later in this section, when the AEM side kick is populated, the side rail is also populated with components. 

View the AEM page in Classic UI view and populate the AEM side kick

You can also view the page in AEM Classic UI view. To do so, select Classic View from the wheel icon in the AEM Page near the top, as shown in this illustration. 

ClassicView2

You will see the CQ sidekick and the herotree component under the General category. You can drag and drop the herotree component onto the CQ page.

If the CQ sidekick is empty, you can populate it by clicking the Design button located at the bottom of the sidekick. Next click the Edit button that appears and select General from the list of categories that appear as shown here.

General

To view the sidekick with the General category, click the down arrow icon that appears on the sidekick. Drag the myxtype component on the AEM web page. Double click on the component and you see the dialog that you created in this development article. 

See also

Congratulations, you have just created an AEM 6 component that displays data in a tree structure. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy