Why can't display tree using dynatree plugin?

[Former Community Member]

Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading.

Today i use it in AEM but, the tree always can't display at all in my computer. That make me frustrating and i do it completely accoding to the clientlibs requirement in AEM. Now i package myapp and upload to cloudy space:

http://yun.baidu.com/share/link?shareid=1820032861&uk=3274495776

Anyone could help check it?  Thanks a lot.

[smacdonald2008]

Try putting the js files in AEM client libs folder under etc.

[smacdonald2008]

See this article. Note where we put the client libs folder location. 

http://helpx.adobe.com/experience-manager/using/creating-touchui-xtypes.html

[Former Community Member]

hi smacdonald, i can't see the tree either. If you have free time, could you possibly package a example app and run well in your computer for me?

Thanks a lot.

[smacdonald2008]

Sure - i will write a community article that shows how to use this plug-in within AEM to create a tree component. 

[smacdonald2008]

As I thought - the Dynatree plug-in works fine in AEM -- as shown here:

[img]tree.png[/img]

I will write up a community article around this use case as having the ability to show data in a tree structure on AEM Publish is important. 

For those whom want to know how to put data into a tree view for use within an AEM dialog on Author (not Publish)-- see this community article:

http://helpx.adobe.com/experience-manager/using/creating-custom-cq-tree.html

The above article uses the CQ.Ext.tree.TreePanel meant to run within an AEM Dialog on author. 

[smacdonald2008 · Accepted solution]

Here is a new community article that steps you though this use case - creating an AEM component that uses Dynatree to display data in an tree structure. 

http://helpx.adobe.com/experience-manager/using/creating-touchui-tree.html

[Former Community Member]

smacdonald2008 wrote...

Here is a new community article that steps you though this use case - creating an AEM component that uses Dynatree to display data in an tree structure. 

http://helpx.adobe.com/experience-manager/using/creating-touchui-tree.html

It is so weird, i do this completely follow the article but, never see the tree on the page. And i begin to suspect the condition on System Enviroment. Could you possibly help check that again? you could download the APP package from this link: http://yun.baidu.com/share/link?shareid=17630324&uk=3274495776 , then import this package.

Thanks a lot!

[Former Community Member]

hi scott, you are so great. Now that tree running well. Thank you so much for your reply.

[smacdonald2008]

I uploaded your package - your issue here is the client lib - you did not set it up properly. In the JS.txt file - you need to load the JS libs in this order:

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

Also you need to include 2 images from the Dynatree ZIP into the clientlib: 

• vline.gi
• icons.gif

Once you fix those 2 issues- the code will pull in the Dynatree and it will work. 

[smacdonald2008]

Here is your package working now after i addressed these two issues:

[img]tree4.png[/img]

Remember to open the tree - place the page into Preview mode - not edit mode. 

I updated the article to make these points very clear. 

[smacdonald2008]

Here is your package result now:

[img]tree2.png[/img]

I updated the article to make these 2 points very clear! 

[Former Community Member]

http://www.baidu.com