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
Is there a possibility to alter some of the existing functionalities of side panels.
ReplyDeleteI 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