Sunday, August 19, 2018

AEM 6 3 1 0 TouchUI Extending Side Panel for Adding new Tab Page Tree

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


visit link download
Posted by at