Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Need to sort tags alphabetically.

Avatar

Level 4
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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

12 Replies

Avatar

Level 10

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...

Avatar

Administrator

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



Kautuk Sahni

Avatar

Level 4

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

Avatar

Level 4

Here is the sorted tags appearing

Avatar

Level 10

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?

Avatar

Correct answer by
Level 10

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

Avatar

Level 1

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

tags_order.JPG

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.

Avatar

Level 1

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

Avatar

Level 1

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

Avatar

Level 1

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.

Avatar

Level 1

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)