Rearranging the Management Center layout

The Management Center user interface is divided into three main sections, the banner, the status bar, and the main area. The main area is the area in the user interface where the the explorer view, uilities view, and main work area display. You can customize the user interface to change the location where these three main sections display.

Procedure

  1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
  2. Expand LOBTools > WebContent > WEB-INF > src > xml > commerce > shell.
  3. Open the MainWorkBench.xml file for editing. This file defines the layout of the banner, status bar, and work areas in Management Center. The sequence of elements in this file determine where the banner, status bar, and work areas display.
  4. Rearrange the elements within this file to match your preferred Management Center layout.
    For example, the status bar displays below the banner and work areas by default. If you prefer to display the status bar between the banner and work areas, move the status bar by changing the placement of the following line of code.
    <StatusArea height="40" id="statusAreaWidget" package="cmc/shell" width="${this.parent.width}"/>
    The placement of this code in the following code snippet changes the Management Center layout to display the status bar between the banner and work areas: 
    
<Definitions>
  <FocusableComponent bgcolor="${RootComponent.Singleton.bgcolor}" classDefinition="true" definitionName="cmc/shell/MainWorkbench" 
   focusable="false" height="${RootComponent.Singleton.height}" visible="false" width="${RootComponent.Singleton.width}">
    <dependency localName="SingletonRegistry" moduleName="cmc/foundation/SingletonRegistry"/>
    <dependency localName="RootComponent" moduleName="cmc/RootComponent"/>
    <BannerArea height="40" id="bannerAreaWidget" package="cmc/shell" width="${this.parent.width}"/>
    <StatusArea height="40" id="statusAreaWidget" package="cmc/shell" width="${this.parent.width}"/>
    <MainArea height="${this.parent.height - SingletonRegistry.bannerAreaWidget.height - SingletonRegistry.statusAreaWidget.height}" 
     package="cmc/shell" width="${this.parent.width}"/>
    <AxisLayout axis="y" spacing="0"/>
  </FocusableComponent>
</Definitions>
  5. Save and publish your changes.