Develop > Presentation layer > Management Center framework > Customize the Management Center user interface > Customizing an existing Management Center tool


Move contents from a tab in a properties view to another tab

You can move the contents from an existing tab, within a Management Center properties view, to a new tab. The Management Center framework includes properties views to allow a business user to create and update objects.

To move contents from an existing tab to a new tab within a Management Center properties view:


Procedure

  1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.

  2. In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > commerce > Management_Center_component > propertiesViews, where Management_Center_component is the name of the tool to customize. All properties view classes for objects managed by the Management Center are stored in this directory. All properties view files follow a standard naming convention: Management_Center_objectPropertiesView.lzx.

  3. Open the file that to change and locate the class that defines the user interface. For example, to modify the product properties view, open the ProductPropertiesView.lzx file and locate: class name="catProductProperties". The file also includes the high level instantiation of the tabs and classes that define the contents of each properties view tab.

  4. To identify the property to work with, first determine the property view, the property pane, the property group, and then property itself.

  5. Determine the location to place the tab in relation to other properties view tabs for the object. All tabs are defined within the wcfPropertyTabs entry. Add a <wcfPropertyTabPane> tag, giving it a name and a text label for the tab. Include a comment above this entry for informational purposes. The following example shows how to add a new tab named Price to contain pricing information about products. 

    <!-- Tab: Pricing. This tab contains pricing information for a product. -->
<wcfPropertyTabPane name="productPricingTab" text="Pricing">         <!-- Property Pane: Pricing. This is an instantiation of the property pane class which contains product pricing details. -->         <catPricingTab/>
</wcfPropertyTabPane>

  6. Remove the existing definitions from the original class. For example, to move pricing information from an existing tab to the new tab, remove <catManagePricingInformation/> from the <catManageProduct> class within the ProductPropertiesView.lzx file.

  7. Create a new class that defines the contents of the new tab and add it anywhere within the properties view file. For example, add the catPricingTab class: 

    <class name="catPricingTab" extends="wcfPropertyPane"> ...
</class>


What to do next

After you complete the customization:

  1. Right-click LOBTools Project; then click Build OpenLaszlo Project to produce an updated ManagementCenter.swf file under the workspace_dir\LOBTools\WebContent directory. This is the default environment setting.

  2. Test the changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.

  3. Deploy your changes to the production environment.


Related concepts

Management Center shell

Management Center user interface


+

Search Tips   |   Advanced Search