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

Add a tab to a properties view

You can add a new tab to an existing Management Center properties view. The Management Center framework includes properties views to allow a business user to create and update business objects.

Before you begin

Before you customize the Management Center user interface, ensure you have customized the persistence layer and the Business Object Manager:

1. Created a new WebSphere Commerce table in the schema.

2. Generated object relational metadata and the physical SDO.

3. Configured the Business Object Manager to include new properties in user data.

4. Updated query templates for read and update.

To add a new tab to an existing properties view within the Management Center:

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. 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 code snippet 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>
   

5. Create a new class that defines the contents of the new tab and add it anywhere within the 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