Apply sorted tree nodes to siteadmin 'redirect' pathfield

[randyn0611]

Our customer wants to be able to see tree nodes in alphanumeric order in the pathfield dialog from the 'redirect' field on the siteadmin page properties dialog. I found an article here - http://experience-aem.blogspot.com/2014/04/aem-cq-56-sort-tree-nodes-of-browse-dialog-pathfield.html - that shows what appears to be a pretty simple solution to what our customer wants. I've been struggling with this for a couple of days but can't seem to find the right solution to add the listener described in the article to the built-in siteadmin page. I tried copying /libs/foundation/component/page component to /apps/foundation/component/page and applying the listener and additional javascript there but that didn't work.

What is the best way to accomplish what I need?

[edubey]

Okay..... Have you added categories = cq.widgets in clientlib properties?

[randyn0611]

Yes - the clientlibs folder has a categories property with a value of cq:widgets and it's got a jcr:primaryType value of cq:clientLibraryFolder.

[edubey]

Hi Randy,

I think you might have already added page component in your project, Can you try to add listeners there?

Would you mind sharing a XML for your dialog, it would help community to answer better.

Thanks

[randyn0611]

Thanks for the reply. Here's the XML for the dialog:

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Dialog" height="400" stateful="false" xtype="dialog"> <items jcr:primaryType="cq:WidgetCollection"> <tabs jcr:primaryType="cq:TabPanel"> <items jcr:primaryType="cq:WidgetCollection"> <basic jcr:primaryType="cq:Widget" path="/apps/foundation/components/page/tab_basic.infinity.json" xtype="cqinclude"/> <advanced jcr:primaryType="cq:Widget" path="/apps/foundation/components/page/tab_advanced.infinity.json" xtype="cqinclude"/> <image jcr:primaryType="cq:Widget" path="/apps/foundation/components/page/tab_image.infinity.json" xtype="cqinclude"/> <cloudservices jcr:primaryType="cq:Widget" path="/apps/foundation/components/page/tab_cloudservices.infinity.json" xtype="cqinclude"/> <blueprint jcr:primaryType="cq:Widget" path="/apps/foundation/components/page/tab_blueprint.infinity.json" xtype="cqinclude"/> <livecopy jcr:primaryType="cq:Widget" path="/apps/foundation/components/page/tab_livecopy.infinity.json" xtype="cqinclude"/> </items> </tabs> </items> </jcr:root>

But since the advanced tab from the dialog is an include, here's part of the XML from /apps/foundation/components/page/tab_advanced (note the 'listener' on the 'redirect' item):

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="cq:Panel" title="Advanced"> <items jcr:primaryType="cq:WidgetCollection"> <advanced jcr:primaryType="cq:Widget" collapsed="{Boolean}false" collapsible="{Boolean}false" xtype="dialogfieldset"> <items jcr:primaryType="cq:WidgetCollection"> <language jcr:primaryType="cq:Widget" cls="cq-propsdialog-pagelanguage" fieldLabel="Language" name="./jcr:language" optionsProvider="CQ.utils.WCM.getLanguageOptions" type="select" xtype="selection"/> <redirect jcr:primaryType="cq:Widget" fieldLabel="Redirect" name="./redirectTarget" xtype="pathfield"> <listeners jcr:primaryType="nt:unstructured" dialogopen="function(){ExperienceAEM.sortTags(this, true);} "/> </redirect> <designpath jcr:primaryType="cq:Widget" fieldLabel="Design" name="./cq:designPath" predicate="hierarchyNotFile" rootPath="/etc/designs" xtype="pathfield"/> <alias jcr:primaryType="cq:Widget" fieldLabel="Alias" name="./sling:alias" xtype="textfield"/> </items> </advanced>

Any guidance on what I'm doing wrong would be greatly appreciated!

[edubey]

As suggested in the article, have you followed step 1 to step 4.?

Can you ensure that JS present in step 4 is getting load not necessary via listener.Whether its that part of JS files or not?

[randyn0611]

The JS does exist in the component but I can't determine that it's actually being loaded. Here's a screenshot of my component in CRXDE:

[img]Screen Shot 2015-09-01 at 1.01.12 PM.png[/img]

I tried putting an alert at the top of the JS (not there in the screenshot) but it doesn't seem to be getting executed.

Thanks!

[Kunal_Gaba_]

You can validate that whether your JS client library is registered or not. Open the following URL - http://localhost:4502/libs/granite/ui/content/dumplibs.html#cq.widgets and see whether you see you see the path of the clientlib folder /apps/foundation/components/page/clientlib in the second column. 

If you don't see that then make sure that the jcr:primaryType of clientlib folder is "cq:ClientLibraryFolder" and you have added a multi valued property named "categories" and set its value to "cq.widgets". In js.txt just add the name of the js file - "sort-tree-nodes.js"

Clear your browser cache and then test again. You can also try adding some alert or log statements in the JS to rule out any javascript errors. 

[Kunal_Gaba_]

Check if your custom page component dialog is getting rendered or not. Try changing the label of the redirect field and see if you can see the new label in the dialog. 

Also, enable client library debugging by checking the Debug checkbox here - "http://localhost:5502/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManag..."

And then refresh your browser and open page properties. Open browser developer tools (ex- FF firebug) and see if you can see the javascript path in the sources section - /apps/foundation/components/page/clientlibs/sort-tree-node.js

Disable the checkbox after debugging as it will slow down the page rendering performance. 

[randyn0611]

I do see my clientlibs in the Client Libraries dump:

     

cq.widgets

/apps/cq/ui/widgets /apps/foundation/components/page/clientlibs /apps/history/sort-pathfield-tree/clientlib

I also put an alert message at the top of the sort function and cleared my browser cache, but it still doesn't get loaded.

[Kunal_Gaba_]

Did you create a cq:Template node in /apps and set  jcr:content/sling:resourceType to foundation/components/page ? See the Geometrixx example here - /apps/geometrixx/templates/contentpage. Also, you will have to create a new page with this template and check it's properties in siteadmin interface. 

[randyn0611]

Here's the structure of the page:

/apps/history/templates/redirectpage has sling:resourceType of /apps/history/pages/redirectpage

/apps/history/pages/redirectpage has sling:resourceSuperType of /apps/history/pages/page

/apps/history/pages/page has sling:resourceSuperType of foundation/components/page

I've created a couple of new pages using this template and it still seems that the page is being rendered by /libs/foundation/components/page. I even set the sling:superResourceType in /apps/history/pages/page to /apps/foundation/components/page and it still does not seem to be using the apps version to render the page.

[randyn0611]

It appears that my page component is not being rendered. I changed the label on the redirect field to 'RedirectMe' but that's not what I see when I open the properties dialog. I'm still seeing 'Redirect'. So I guess the question is: why is the system not seeing my version of the component?

Thanks for the help!

[edubey · Accepted solution]

While creating template is AEM we usually inherit the functionality from OOTB page component on top of which we add our own files.

So in all at the end /libs/foundation/components/page will be rendering. Now here is the point, have you override dialog of OOTB page component.

Can you see dialog at /apps/history/pages/page path ?

Here is great article by Adobe : https://docs.adobe.com/docs/en/cq/5-6-1/howto/website.html

[randyn0611]

The problem was that the dialog was already in our /apps/history/pages/page directory. I just hadn't realized that there were already customizations that had been made. Thanks for the help!