AEM CQ 6 - Add new left rail nav item

Goal

Add a new left rail nav item in Touch UI console. To reach user admin an AEM user has to navigate through sub navs Tools -> Operations -> Security -> Users, here we provide a link on left rail main nav

Solution - 1

New in AEM(CQ) 6 is Sling Resource Merger. With resource merger you overlay the path in /apps and add only new nav items (in this case, Users)

1) Create the following folders in CRXDE Lite (http://localhost:4502/crx/de) or use the overlay creator servlet discussed here

            /apps/cq - nt:folder
            /apps/cq/core - nt:folder
            /apps/cq/core/content - sling:OrderedFolder
            /apps/cq/core/content/nav - nt:unstructured

    The structure above is an overlay of /libs/cq/core/content/nav

2) Create node /apps/cq/core/content/nav/users of type nt:unstructured with the following properties

             id - experience-aem-nav-users
             href - /libs/granite/security/content/useradmin.html
             jcr:description - Manage your users
             jcr:title - Users

     All properties are self-explanatory. Property id is to uniquely identify the nav item

     To position the newly created nav item, for example before Apps in the left rail, you can use property sling:orderBefore set to apps

Solution - 2

Taking a programmatic approach...

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/add-left-rail-item-users

2) Create node /apps/add-left-rail-item-users/clientlib of type cq:ClientLibraryFolder and add a String property categories with value granite.ui.foundation.admin

3) Create file (nt:file) /apps/add-left-rail-item-users/clientlib/js.txt and add

                       add-nav-item-user.js

4) Create file (nt:file) /apps/add-left-rail-item-users/clientlib/add-nav-item-user.js and add the following code

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

    $(document).on("ready", function() {
        //id of left rail nav is added by CQ here /libs/cq/core/content/nav
        var pRoot = $("nav[data-coral-columnview-id=root]");
        pRoot.first().append("<a class='coral-ColumnView-item' href='/libs/granite/security/content/useradmin.html'>Users</a>")
    });
})(document, Granite, Granite.$);