AEM 61 - TouchUI Extending Side Panel for Removing Assets Browser

Goal

Authoring interface of Touch UI comes with two tabs Assets and Components in Side Panel; This post is on removing Assets Browser 

For adding a new tab check this post

Demo | Package Install


Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-sidepanel-remove-asset-browser

2) Create node /apps/touchui-sidepanel-remove-asset-browser/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog

3) Create file (nt:file) /apps/touchui-sidepanel-remove-asset-browser/clientlib/js.txt and add

                       remove-asset-browser.js

4) Create file (nt:file) /apps/touchui-sidepanel-remove-asset-browser/clientlib/remove-asset-browser.js and add the following code

(function ($, $document) {
    var assetBrowserRemoved = false;

    $document.on('cq-layer-activated', removeAssetsBrowser);

    function removeAssetsBrowser(event){
        if(assetBrowserRemoved){
            return;
        }

        assetBrowserRemoved = true;

        var $sidePanelEdit = $("#SidePanel").find(".js-sidePanel-edit"),
            $tabs = $sidePanelEdit.data("tabs");

        //first tab is asset browser, remove it
        $tabs.removeItem(0);
    }
})(jQuery, jQuery(document));