The following example creates a new page by creating a myNewTab tab definition and then rendering a new panel stack called MyNewPS, which then renders three additional panels: myNewPanel1, myNewPanel2, and myNewPanel3.
In the following example, these properties will be changed for the new tab definition:
The
appIdproperty must be set toworkspacefor the tab to be loaded in the Service Center UIThe
tabIdproperty must correspond to the tab ID referenced in theContentDefinitionitem defined for the tab actionThe
titleKeyproperty references a resource defined in a resource bundle in the Commerce Service Center class pathThe
accessRightmay remain the defaultGlobalPanelright or a specific right. If using a specific right, the right must be defined and assigned to Service Center users. Note: The access right must be defined or the page will not be renderedThe
panelStackAssignmentsproperty uses pre-existing column names defined in the Service Framework Repository. This positions the panel stacks in the left column usingcontentColumn, the right column usingsidebarColumnor top area usingglobalCell. Note: Changing the top area in theglobalCellis not supportedThe
currentPanelStacksproperty determines which panel stacks to show initially or by defaultThe
panelStackOrderproperty determines the sequence in which the panel stacks are rendered in case there is cross-referencing JavaScript between panel stacks that creates dependencies in the rendering orderThe
contentIdsproperty points to theContentDefinitionitem defined above so that the requested JavaScript action is executed when the tab is selected
To create a new page:
Create an
/atg/svc/framework/serviceFramework.xmlfile in your new custom module and add theContentDefinitionitem for the new tab action. This defines the JavaScript action that will be attached to theTabDefinitionitem for the new tab (via thecontentIdsmap, see below) and then executed. For example:<content-definition>
<id>WsMyNewTabAction</id>
<app-id>workspace</app-id>
<enabled-yn>true</enabled-yn>
<object-type>ContentDefinition</object-type>
<content-id>myNewTabAction</content-id>
<mime-type>text/javascript</mime-type>
<body>atgChangeTab(atg.service.framework.changeTab('myNewTab'),
null,null,null);</body>
<url-yn>true</url-yn>
</content-definition>To create a new navigational item, modify the
NavContainerand otherNavItemcomponents as outlined in Creating a New NavAction section.Append your new tab definition information to the existing tab definition. This example creates a tab definition named
WsMyNewTabDefinition. The tab definition identifies themy.company.ui.Resourcesfile that defines themyNewTab.resourcekey, which would be created in your custom application:<tab-definition>
<id>WsMyNewTabDefinition</id>
<app-id>workspace</app-id>
<enabled-yn>true</enabled-yn>
<object-type>TabDefinition</object-type>
<resource-bundle>my.company.ui.Resources</resource-bundle>
<content-ids>
<map-entry>
<key>actionJavaScript</key>
<value>myTabAction</value>
</map-entry>
</content-ids>
<template-ids>
<map-entry>
<key>contentHeader</key>
<value>contentHeaderTemplate</value>
</map-entry>
</template-ids>
<tab-id>myNewTab</tab-id>
<title-key>myNewTab.resource</title-key>
<visible-yn>true</visible-yn>
<access-right>GlobalPanel</access-right>
<panel-stack-assignments>
<map-entry>
<key>preferencesPanel</key>
<value>contentColumn</value>
</map-entry>
<map-entry>
<key>helpfulPanels</key>
<value>sidebarColumn</value>
</map-entry>
<map-entry>
<key>MyNewPS</key>
<value>contentColumn</value>
</map-entry>
<map-entry>
<key>globalPanels</key>
<value>globalCell</value>
</map-entry>
<map-entry>
<key>cmcHelpfulPanels</key>
<value>sidebarColumn</value>
</map-entry>
</panel-stack-assignments>
<current-panel-stacks>
<map-entry>
<key>MyNewPS</key>
<value>contentColumn</value>
</map-entry>
<map-entry>
<key>cmcHelpfulPanels</key>
<value>sidebarColumn</value>
</map-entry>
<map-entry>
<key>globalPanels</key>
<value>globalCell</value>
</map-entry>
</current-panel-stacks>
<panel-stack-order>
<id-entry>
<id>globalPanels</id>
<priority>0</priority>
</id-entry>
<id-entry>
<id>cmcHelpfulPanels</id>
<priority>1</priority>
</id-entry>
<id-entry>
<id>helpfulPanels</id>
<priority>2</priority>
</id-entry>
<id-entry>
<id>MyNewPS</id>
<priority>3</priority>
</id-entry>
<id-entry>
<id>preferencePanels</id>
<priority>4</priority>
</id-entry>
</panel-stack-order>
</tab-definition>Create a
MyNewPSpanel stack definition that will be used by the new WsMyNewTabDefinition tab definition. The panel stack definition identifies themy.company.ui.MyUserResourcefile that defines theMyNewPSkey, which would be created in your custom application:<panel-stack-definition>
<id>MyNewPS</id>
<app-id>workspace</app-id>
<enabled-yn>true</enabled-yn>
<object-type>PanelStackDefinition</object-type>
<resource-bundle>my.company.ui.MyUserResource</resource-bundle>
<panel-stack-id>MyNewPS</panel-stack-id>
<header>contentHeader</header>
<error-panel-id>errorPanel</error-panel-id>
<title-key>MyNewPS</title-key>
<tab-affinity-yn>true</tab-affinity-yn>
<panel-ids>
<id-entry>
<id>errorPanel</id>
<priority>0</priority>
</id-entry>
<id-entry>
<id>myNewPanel1</id>
<priority>1</priority>
</id-entry>
<id-entry>
<id>myNewPanel2</id>
<priority>2</priority>
</id-entry>
<id-entry>
<id>myNewPanel3</id>
<priority>3</priority>
</id-entry>
</panel-ids>
</panel-stack-definition>
