Is there any Tree UI plugin in the AEM to embed page | Community
Skip to main content
A
Anonymous
October 16, 2015
Solved

Is there any Tree UI plugin in the AEM to embed page

  • October 16, 2015
  • 7 replies
  • 1492 views

There is a user-case for me: after user collect some pages via [Add to cart] button, it need to display in the page with a tree way.

If a page/node is checked, which are shown in bold to identify and deep down in the tree, please see it like below:

[img]tree.png[/img]

 

But finally user could change which page is checked, collect page/node info againg.

Anyone have experience on it? Please help give your comments on it.

Thanks a lot.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

See:

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

Another option you have to is build you own using this JQuery plug-in:

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

It takes JSON. So on the backend - get the data you want to display, encode the data to JSON and pass back to the front end component where it's displayed in this component that uses this JQuery plug-in.  

7 replies

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

See:

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

Another option you have to is build you own using this JQuery plug-in:

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

It takes JSON. So on the backend - get the data you want to display, encode the data to JSON and pass back to the front end component where it's displayed in this component that uses this JQuery plug-in.  

A
Anonymous
October 16, 2015

Many thanks for your reply. Today i am writing a sample according to the http://code.google.com/p/dynatree/

But always can't display the tree data at all. I don't know the reason, please see below screenshot:

And i suspect AEM if support this JQuery plugin? Could you give any suggestions? Thanks again.

[img]1.png[/img]

 

<%@include file="/libs/foundation/global.jsp"%> <cq:includeClientLib categories="test" /> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Dynatree - Example</title> <script type="text/javascript"> $(document).ready(function() { $("#tree").dynatree({ // using default options }); <!-- (Irrelevant source removed.) --> }); </script> </head> <body class="example"> <h1>Example: Default</h1> <p class="description"> This tree uses default options.<br> It is initalized from a hidden &lt;ul> element on this page. </p> <div> Skin: <select id="skinCombo" size="1"> <option value="skin">Standard ('/skin/')</option> <option value="skin-vista">Vista ('/skin-vista/')</option> </select> </div> <div id="tree"> <ul id="treeData" style="display: none;"> <li id="id1" title="Look, a tool tip!">item1 with key and tooltip <li id="id2">item2 <li id="id3" class="folder">Folder with some children <ul> <li id="id3.1">Sub-item 3.1 <ul> <li id="id3.1.1">Sub-item 3.1.1 <li id="id3.1.2">Sub-item 3.1.2 </ul> <li id="id3.2">Sub-item 3.2 <ul> <li id="id3.2.1">Sub-item 3.2.1 <li id="id3.2.2">Sub-item 3.2.2 </ul> </ul> <li id="id4" class="expanded">Document with some children (expanded on init) <ul> <li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init) <ul> <li id="id4.1.1">Sub-item 4.1.1 <li id="id4.1.2">Sub-item 4.1.2 </ul> <li id="id4.2">Sub-item 4.2 <ul> <li id="id4.2.1">Sub-item 4.2.1 <li id="id4.2.2">Sub-item 4.2.2 </ul> </ul> </ul> </div> <!-- (Irrelevant source removed.) --> </body> </html>

[img]111.png[/img]

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

To get AEM to support a JQuery plug-in, you have to include the PLUG-IN files in a client library. See: 

http://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html

With this plug-in, there is example data. Try to hook in the sample JSON data into the component before setting it via a service.  

A
Anonymous
October 16, 2015

And i check the source find a list of file JS as screenshot, i am not sure maybe the both file have conflict between jquery-1.11.0.js and jquery.js but, i don't know the reason why the file jquery-1.11.0.js imported here since clientLibs dependencies is cq.jquery.

[img]treejs.png[/img]

A
Anonymous
October 16, 2015

hi scott, i did it follow the example but, always the tree can't see at all as beginning description. I look into it and resarch it through Internet but no any result. I think this problem not complicated and it makes me very confused for now. Could you possibly help see it again?  Thanks a lot.

A
Anonymous
October 16, 2015

And i check the source find a list of file JS as screenshot, i am not sure maybe the both file have conflict between jquery-1.11.0.js and jquery.js but, i don't know the reason why the file jquery-1.11.0.js imported here since clientLibs dependencies is cq.jquery.

AmitVishwakarma
Community Advisor
AmitVishwakarmaCommunity Advisor
Community Advisor
January 19, 2025

To implement a tree UI for embedding pages in AEM:

  1. Use AEM Tree Component: Display pages in a hierarchical structure.
  2. Custom JavaScript: Use JavaScript to highlight selected pages (e.g., bold for selected pages).
  3. Store Selections: Store selected pages in session or JCR for persistence.
  4. Dynamic Updates: Use AJAX to update the tree when the user adds/removes pages.
  5. Optional: Integrate third-party libraries like jsTree if needed.

This will allow users to collect and display pages in a tree format, and dynamically update selections.

Terms & ConditionsAccessibility statement

Loading footer...