AEM 61 - TouchUI Extending Side Panel for Adding new Tab Page Tree

Goal


Authoring interface of Touch UI comes with two tabs Assets and Components in Side Panel; This post is on adding a new tab Page Tree for browsing the site structure and opening pages in new browser tab (Asset Finder allows search and open of pages)

For Classic UI check this post

For removing a tab (say Assets) check this post

Demo | Package Install



Solution


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

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

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

                       pagetree.js

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

(function ($, $document) {
    var PAGE_BROWSER = "/apps/touchui-sidepanel-pagetree/page-browser/content/tree-wrapper.html",
        pageTreeAdded = false;

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

    function addPageTree(event){
        if(pageTreeAdded || (event.layer !== "Edit")){
            return;
        }

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

        //add the page itree iframe in new tab
        $tabs.addItem({
            tabContent: "Page Browser",
            panelContent: getPageContent(),
            active: false
        });

        pageTreeAdded = true;
    }

    function getPageContent(){
        return "<iframe src='" + PAGE_BROWSER + "' style='border:none' height='800px'></iframe>";
    }
})(jQuery, jQuery(document));


5) #16 in the above code adds new tab with iframe content loading the page /apps/touchui-sidepanel-pagetree/page-browser/content/tree-wrapper.html, containing necessary logic to show classic ui page tree

6) For the tree html page, create nt:folder /apps/touchui-sidepanel-pagetree/page-browser/wrapper

7) Create nt:file /apps/touchui-sidepanel-pagetree/page-browser/wrapper/html.jsp, add the following code

<%@page session="false" %>
<%@include file="/libs/foundation/global.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>Page Tree</title>

    <style type="text/css">
        #CQ .x-tab-panel-body, #CQ .x-panel-body {
            background-color: transparent !important;
        }
    </style>

    <cq:includeClientLib categories="cq.compat.authoring.widgets"/>

    <script type="text/javascript">
        CQ.I18n.init({ "locale": "<%= request.getLocale() %>" });

        CQ.Ext.onReady(function () {
            var pageTree = CQ.wcm.ContentFinderTab.getBrowseTree({
                "treeRoot":{
                    "text": CQ.I18n.getMessage("Content")
                }
            });

            pageTree.on('beforedblclick', function(node){
                window.open("/editor.html" + node.getPath() + ".html", '_blank');
            });

            var config = {
                items: [ pageTree ],
                xtype: "dialogwrapper"
            };

            var dialog = CQ.Util.build(config, null, null, false, null);

            dialog.setWidth(300);
            dialog.setHeight(700);
        });

    </script>
</head>
<body style="margin:10px 0 0 15px; overflow: hidden">
<div id="CQ"></div>
</body>
</html>


8) Create sling:OrderedFolder /apps/touchui-sidepanel-pagetree/page-browser/content and nt:unstructured node /apps/touchui-sidepanel-pagetree/page-browser/content/tree-wrapper with property sling:resourceType=/apps/touchui-sidepanel-pagetree/page-browser/wrapper for page html content


No comments:

Post a Comment