Creating a custom tree tab

Tree tabs within WebCenter Sites (WCS) 11.1.1.8.0 can provide an idea on how a particular site is architected e.g. Design Elements, Content Parent Hierarchy and Custom Tree tab (if any). Furthermore, helps contributors and editors in creating and analyzing content easily. WCS provides in-built (default) tree tabs which are shared with each site but are visible provided that sufficient roles and ACLs are given to an user within WCS. This blog describes on how to create a custom tree tab.

Before jumping into this exercise, it is better to read about Tree Tabs from developer's guide.

Custom Tree Tabs can be build for both assets and non-assets. Developer’s guide includes code snippets to build custom tree tab node for a single asset and non-asset (adhoc). This section describes about how to build custom tree tab for non-assets; a simple tree tab with single node. This tree tab will be created from Admin tab which will point to our custom element which builds the tree tab. On double-clicking the node, another CSElement loads up which will simply process and show the content of CSElement. Hence, need to implement a custom view to show the contents and custom action for it.

Whole process can be broken into following steps:
1. Create one CSElement which will build the tree tab. I have considered creating tree tab

using XML as its easy to copy from other tree tabs elements; which ends up like this

2. Create another CSElement which will show the content on double-clicking on the node. In this example, I am using already available CSElement - OpenMarket/Demos/index which is present in JSK 11.1.1.8.0 installation. This CSElement needs to be passed while creating custom view as described in next point. 

3. Create custom element to implement custom view and custom action for the node. This requires little bit knowledge on how customization works in WCS which is described in Developer’s guide in full detail. Hence, proceed with creating one element under CustomElements for AviSports using Sites Explorer which should end up like the following: CustomElements/avisports/UI/Config/SiteConfigHtml which provides custom UI configuration settings. If this element is already present, then just add your code within it or else create this element and then add your code. First of all generate the URL using satellite:link in SiteConfigHtml element as shown (don’t forget to include the satellite tld):

<satellite:link pagename="OpenMarket/Demos/index" outstring="demoURL">             <satellite:argument name="contributorUI" value="true"/>
</satellite:link>

This demoURL variable will be passed while creating your custom view as show below:

config.views['sampleSitesView'] = { viewClass: 'fw.ui.view.SimpleView', viewParams: {
url: '<%= ics.GetVar("demoURL") %>' }
};

Create your custom action as shown below:

config.myActions = { sampleSitesAction: function () {
var views = SitesApp.getViews();
var view;
dojo.forEach(views, function (v) {
if (v.viewType === 'sampleSitesView') {
view = v; }
});
// view already opened - just focus it
if (view) {
view.focus();
}else{
// create view
view = fw.ui.ViewFactory.buildView('sampleSitesView'); view.set('title', 'Sample Sites');
view.show();

} } };

// Finally add action to tree

config.treeActions.SampleSitesAction = config.myActions.sampleSitesAction;

4. Finally, register your tree tab from Admin UI with AviSports site. Check developer’s guide on how to register custom tree tab.

Download sample files from here. 

To download summary of Tree Tabs, click here - TreeTabs

----------------------------------------------------

SUGGESTIONS/COMMENTS ARE INVITED

----------------------------------------------------

ALL TOPICS