Need to sort tags alphabetically.

[ranadyutis95334]

There are 8 categories of tags that are included in the document library, which all correspond to tags in AEM. The child tags of those categories are displayed when you click the arrow on each category.

Apparently, these child tags are just shown in the order they appear in the JCR.  Is there a way to sort the child tags  in alphabetical order

[edubey]

I don't see any OOTB feature to implement this. will check is there is any...

What you can do is to override default behavior implement your custom one. There are few example available here

http://experience-aem.blogspot.in/2014/12/aem-6-sp1-touch-ui-sort-and-show-tags-in-alphabetical-orde...

http://experience-aem.blogspot.in/2015/02/aem-6-sp2-classic-ui-tags-widget-show-sub-folders-as-names...

[kautuk_sahni]

Hi

Adding to what Praveen mentioned, there is no such OOTB to get sorted tags alphabetically.

But, there is a community article covering this,

Link:- http://experience-aem.blogspot.in/2014/12/aem-6-sp1-touch-ui-sort-and-show-tags-in-alphabetical-orde...

// Sort the tags alphabetically in Asset Metadata Editor of Touch UI

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/sort-metadata-editor-tags

2 Create node /apps/sort-metadata-editor-tags/clientlib of type cq:ClientLibraryFolder and add a String property categories with value dam.gui.metadataeditor

3) Create file (nt:file) /apps/sort-metadata-editor-tags/clientlib/js.txt and add

                      sort-tags.js

4) Create file (nt:file) /apps/sort-metadata-editor-tags/clientlib/sort-tags.js and add the following code.
 

?

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$(document).on('cui-contentloaded.data-api', function (e) {     var $tagsWidget = $('[data-metaType=tags]');     var $selectList = $tagsWidget.find('.js-coral-Autocomplete-selectList');     $selectList.html($selectList.find("li").sort(function(a, b) {         a = $(a).text();         b = $(b).text();         //this piece was copied from underscore.js sortBy         if (a > b || a === void 0){             return 1;         }else if (a < b || b === void 0){             return -1;         }         return 1;     })); });

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[ranadyutis95334]

Hi,

Thanks for your reply. You see the tags are sorted while applying. But they are not appearing in order in the page. Attached is the screenshot

[ranadyutis95334]

Here is the sorted tags appearing

[edubey]

To me looks like default AEM behavior, I would recommend to write simple n small piece of java code to sort these manually.

You are using JSP or Sightly?

[ranadyutis95334]

Hi,

I am using JSP

[edubey · Accepted solution]

Write a OSGI service to do this sorting.

There is one more approach you can try for:

Add a beforesubmit listener in your dialog box and before data gets saved in JCR, sort it with JS

[udaya_shankar13]

Hi edubey,

The solution given in this is not working

http://experience-aem.blogspot.in/2014/12/aem-6-sp1-touch-ui-sort-and-show-tags-in-alphabe tical-order.html

Screenshot

The other solution which you suggested : before submit does not hold good for my scenario. My scenario is to show the tags in alphabetical order (while authoring, so thats it's easy for authors). Storing is not a concern for me.

Another solution which you suggested is OSGI service. Can you please elaborate on that. Do u mean to write a service to reorder nodes and store it (in /etc/tags). Kindly advice.

My scenario is to just show the tags in alphabetical order while authoring.

[udaya_shankar13]

Found a solution by overlaying default OOTB tagspicker component. Just changed the fetch logic in tagsbrowser component and it worked!

[lauraMass]

Udaya,

which component did you modify and was that a .js file or .jsp file?  we are having similar need to sort tags alphabetically.

I appreciate your feedback.

-Laura

[harsha006]

Hi Udaya,

Can you Please elaborate the solution which yo implemented because I have a required that while authoring ,the tags should appear in a sorted way.

[udaya_shankar13]

Hi Harsha and Laura,

I basically modified the OOTB component under /libs/cq/gui/components/common/tagbrowser/tagbrowsercolumn/tagbrowsercolumn.jsp, by overlaying it to my folder and modified the renderer (pointing to my project folder) in tags picker component under /libs/cq/gui/components/common/tagspicker/render.jsp (overlayed this as well)