Adding a Custom Tab in Service Center

To add a new tab to Service Center, perform the following steps:

The following example displays the addition of a new myNewTab tab definition. It renders a new panel stack called MyNewPS, which renders the three additional panels: myNewPanel1, myNewPanel2, and myNewPanel3.

The following properties will be changed for the tab definition:

<?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="WsMyNewTabDefinition">
    <set-property name="appId" value="workspace"/>
    <set-property name="tabId" value="myNewTab"/>
    <set-property name="titleKey" value="myNewTab.resource"/>
    <set-property name="resourceBundle"
        value="atg.commerce.csr.FrameworkResources"/>
    <set-property name="accessRight" value="GlobalPanel"/>
<!--
     Note: both cmcHelpfulPanels and helpfulPanels must be defined in
      case the user goes to Utilities | Preferences while on the Commerce
      tab. Preferences needs the next steps menu in the helpfulPanels panel
      stack.
  -->
    <set-property name="panelStackAssignments"
        value="MyNewPS=contentColumn,globalPanels=globalCell,
        helpfulPanels=sidebarColumn cmcHelpfulPanels=sidebarColumn
        preferencesPanel=contentColumn"/>
    <set-property name="currentPanelStacks"
        value="MyNewPS=contentColumn,cmcHelpfulPanels=sidebarColumn,
        globalPanels=globalCell"/>
    <set-property name="panelStackOrder"
        value="globalPanels,cmcHelpfulPanels,helpfulPanels,MyNewPS,
        preferencePanels"/>
    <set-property name="templateIds"
        value="contentHeader=contentHeaderTemplate"/>
    <set-property name="contentIds" value="actionJavaScript=myTabAction"/>
  </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="acme.csr.MyUserResource"/>
    <set-property name="panelIds"
        value="errorPanel,myNewPanel1,myNewPanel2,
        myNewPanel3"/>
  </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>

  1. Once the new tab and panel stacks are defined, add the ContentDefinition item for the new tab action. This defines the JavaScript action that will be attached to the TabDefinition item for the new tab (via the contentIds map, see below) and will be executed when the tab is selected. For example:

    <add-item item-descriptor="ContentDefinition" id="WsMyNewTabAction">
      <set-property name="appId" value="workspace"/>
      <set-property name="contentId" value="myNewTabAction"/>
      <set-property name="mimeType" value="text/javascript"/>
      <set-property name="body"><![CDATA[atgChangeTab(atg.service.framework.
        changeTab('myNewTab'),null,null,null);]]></set-property>
    </add-item>

  2. The list of valid framework components is managed by the FrameworkComponents service in the /atg/svc/configuration/FrameworkComponents.properties file. Add the new tab to the end of the list in the end of your customer application configuration layer with the flag set to true, for example:

    componentIds+=\
    myNewTab=true

    Note: The same componentIds list is used for both panels and tabs.

    You can modify the action that a tab performs by modify the ContentDefinition item for the action in the Service Framework Repository. Once you have modified the item, you must define the JavaScript that will be run when the tab is clicked.

 
loading table of contents...