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


3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Is there a possibility to alter some of the existing functionalities of side panels.
    I have don't want to show some of the items listed under image drop-down of the assets tab of side panel, like I don't want content fragments, experience fragments and design packages to show-up there.
    Is there a possibility to apply this restriction only to certain group of users like content-authors?
    Any direction to achieve this will be highly helpful

    ReplyDelete
    Replies
    1. classic, touch? check if this helps https://experience-aem.blogspot.com/2019/06/aem-65-show-approved-assets-in-asset-finder.html

      Delete