AEM 6 SP1 - Touch UI Sort and Show Tags in Alphabetical Order

Goal


Sort the tags alphabetically in Asset Metadata Editor of Touch UI

Package Install


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.

$(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;
    }));
});

1 comment:

  1. Hi Sreekanth , Its very useful information , i am trying to process the tags into properties .In classic-ui i achieved it using Sling Post Processor . Could you help me finding out a possible way to do it in touch-ui ?

    ReplyDelete