AEM 61 SP1 - TouchUI Extend User Picker to filter users in New Project Wizard

Goal

Extend User Picker (autocomplete) - /libs/cq/gui/components/projects/admin/userpicker to apply filter function on results (users and groups) in create new project wizard http://localhost:4502/libs/cq/core/content/projects/wizard/newproject.html

Demo | Package Install


Product

                  All matching results (users and groups) shown in user picker

Extension

                  Filter applied on results to show Geometrixx users only

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-projects-userpicker-filter-users

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-projects-userpicker-filter-users/clientlib and set property categories of String[] type to cq.projects.admin.projecteam

3) Create file ( type nt:file ) /apps/touchui-projects-userpicker-filter-users/clientlib/js.txt, add the following

                         filter-users.js

4) Create file ( type nt:file ) /apps/touchui-projects-userpicker-filter-users/clientlib/filter-users.js, add the following code

(function($, $document) {
    "use strict";

    //set in /libs/cq/core/content/projects/properties/jcr:content/body/content/content/items/properties/items/right/items/memberpicker/items/userpicker
    var PROJECTS_USER_PICKER = "#collection-settings-userpicker";

    $document.on('cui-contentloaded.data-api', function () {
        var P_INTERVAL = setInterval(function(){
            var cuiPicker = $(PROJECTS_USER_PICKER).data("autocomplete");

            if(cuiPicker){
                clearInterval(P_INTERVAL);
                addFilter(cuiPicker);
            }
        }, 250);
    });

    function addFilter(cuiPicker){
        var type = cuiPicker._selectListWidget.get('type');

        if(type !== "dynamic"){
            return;
        }

        var options = cuiPicker._selectListWidget.options;

        options.loadData = extendLoadDataFn(cuiPicker._selectListWidget);
    }

    function extendLoadDataFn(selWidget){
        var loadDataFn = selWidget.options.loadData;

        return function (start, end) {
            var promise = loadDataFn.call(this, start, end);

            promise.done(filter);

            return promise;
        };

        //filter out non geometrixx users
        function filter(){
            selWidget.filter(function (value) {
                return value && (value.indexOf("geometrixx") > 0);
            });
        }
    }
})(jQuery, jQuery(document));