Experiencing Adobe Experience Manager (AEM, CQ): AEM 6.3.1.0 - TouchUI Extending Side Panel for Adding new Tab Page Tree

Goal

Add a new tab Page Tree to the Side Panel of authoring /editor.html

Demo | Package Install | Github

Solution

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

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

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

page-tree.js

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

(function ($, $document) {
    var PAGE_BROWSER = "/apps/eaem-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 sidePanel = Granite.author.ui.SidePanel,
            tabList = sidePanel._tabView.tabList;

        tabList.items.add({
            title: "Page Tree",
            label: {
                innerHTML: '<coral-icon icon="pages" size="S"/>'
            }
        });

        var panelstack = sidePanel._tabView.panelStack;

        panelstack.items.add({
            content: {
                innerHTML: getPageContent()
            }
        });

        pageTreeAdded = true;
    }

    function getPageContent(){
        return "<div class='sidepanel-tab'>" +
                    "<span class='sidepanel-tab-title'>Page Tree</span>" +
                    "<iframe src='" + PAGE_BROWSER + "' style='border:none' height='800px'></iframe>" +
                "</div>";
    }
})(jQuery, jQuery(document));

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

6) Create nt:file /apps/eaem-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>

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

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

Goal

Solution

1 comment: