ATG CSC : Adding a New Tab to Commerce Servie Center

Adding a new tab to Commerce Service Center is similar to adding a new panel, with a couple of additional steps.

1) Create a new Nucleus Component which extends ServiceUIComponentDataStore
If you have previously created this component, this step is not necessary. Otherwise place the component in your config layer at /atg/svc/ui/util/ServiceUIComponentDataStore.properties.

$class=com.example.MyServiceUIComponentDataStore
$scope=global

2) Create or update a Class which extends ServiceUIComponentDataStore
Either create a new class or update an existing class that will override the initializeService method to add the CSC tabs.

package com.example;
public class MyServiceUIComponentDataStore
extends ServiceUIComponentDataStore
{
@Override
public void initializeService() {

// Add additional CSC Tabs
addServiceUIComponent (
 new atg.svc.ui.util.ServiceUIComponent(
  "myTab",  CSR_LICENSE, CSR_MODULE_NAME,  TAB_TYPE) );

super.initializeService();    
}
}

3) Update the Service Repository with definitions of the new CSC tabs.
As with panels, it's necessary to extend install/data/svc_framework.xml to add the additional tab definitions. In the example below, a new myTab tab definition is being added. It renders a new panel stack called myNewPS, which renders the additional panel added in the adding new panels.

NOTE: The following properties will need to be changed for the tab definition:
tabId
titleKey
resourceBundle
actionId
accessRight
panelStackAssignments - The panel stack assignments, indicating the cell within the page layout where each panel stack is displayed. See the example below.
currentPanelStacks - The list of panel stacks that get rendered when the tab is accessed. See the example below.
panelStackOrder - The list of all panel stacks for the tab in rendering order. This supports the case where rendering dependencies exist between panel stacks that require the panel stacks to be rendered in a specific order. See the example below.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE gsa-template SYSTEM
"dynamosystemresource:/atg/dtds/gsa/gsa_1.0.dtd">

<!--
The new myNewTab tab definition
-->
<add-item item-descriptor="TabDefinition" id="myNewTab">
<set-property name="appId" value="workspace"/>
<set-property name="tabId" value="myNewTab"/>
<set-property name="titleKey" value="myNewTab"/>
<set-property name="resourceBundle"
value="atg.commerce.csr.FrameworkResources"/>
<set-property name="actionId" value="myNewTab"/>
<set-property name="accessRight" value="myNewTab"/>
<set-property name="panelStackAssignments"
value="myNewPS=contentColumn,globalPanels=globalCell,helpfulPanels=sidebarColumn/>
<set-property name="currentPanelStacks"
value="myNewPS=contentColumn,cmcHelpfulPanels=sidebarColumn,globalPanels=globalCell"/>
<set-property name="panelStackOrder"
value="cmcHelpfulPanels,helpfulPanels,myNewPS"/>
<set-property name="templateIds"
value="contentHeader=contentHeaderTemplate"/>
</add-item>

<!--
The panel stack that gets rendered initially when the tab
is loaded. This is done by setting the currentPanelStacks
property of the tab definition.
-->
<add-item item-descriptor="PanelStackDefinition"
id="myNewPS">
<set-property name="appId" value="workspace"/>
<set-property name="panelStackId" value="myNewPS"/>
<set-property name="errorPanelId" value="errorPanel"/>
<set-property name="header" value="contentHeader"/>
<set-property name="titleKey" value="myNewPS"/>
<set-property name="resourceBundle"
value="atg.commerce.csr.FrameworkResources"/>
<set-property name="panelIds"
value="errorPanel,myAdditionalPanel1"/>
</add-item>

<!--
Update the existing framework to be aware of the new tab.
-->
<update-item item-descriptor="FrameworkDefinition"
id="WsAgentFramework">
<set-property name="tabIds" value="myNewTab"
remove="true"/>
</update-item>

<update-item item-descriptor="FrameworkDefinition"
id="WsAgentFramework">
<set-property name="tabIds" value="myNewTab"
add="true"/>
</update-item>

<gsa-template>

4) Create a Javascript function to render the new tab
The actionId property of the tab definition points to a Javascript function that gets invoked to render the new tab when a user clicks on it. The Service framework already has a function to change to an existing tab, so we just call that. Create a function like the one below:

function myNewTab(){
atgChangeTab(atg.service.framework.changeTab('myNewTab'),
           null,null,null);
}

Now that the all the necessary updates have been made, the Service database should be reloaded and the application restarted.. Be sure to clear out the browser cache, before logging on to CSC. When a user clicks on the new tab, the new panel stack is rendered and displays the panel.