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
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
