Adding 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.

Procedure

  1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
  2. Complete one of the following steps:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1In 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 you want 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.
    • Introduced in Feature Pack 2In the Enterprise Explorer view, expand LOBTools > WebContent > config > commerce > Management_Center_component > propertiesViews, where Management_Center_component is the name of the tool you want to customize. All properties view definitions for objects managed by the Management Center are stored in this directory. All properties view files follow a standard naming convention: Management_Center_objectPropertiesView.def.
  3. Open the file that you want to change and complete one of the following steps:
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1Locate the class that defines the user interface WebSphere Commerce Version 7.0.0.0Feature Pack 1For 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.
    Introduced in Feature Pack 2Locate the definition that defines the user interface Introduced in Feature Pack 2For example, to modify the product properties view, open the ProductPropertiesView.def file and locate: definitionName="catProductProperties". The file also includes the high level definition of the tabs and definitions that define the contents of each properties view tab.
  4. Determine the location in which you want to place the tab in relation to other properties view tabs for the object.
    All tabs are defined within:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1wcfPropertyTabs entry
    • Introduced in Feature Pack 2PropertyTabs element
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1Add a <wcfPropertyTabPane> tag WebSphere Commerce Version 7.0.0.0Feature Pack 1Specify the name and text label for the tab in this tag.
    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>
    
    Introduced in Feature Pack 2Add a <PropertyTabPane> tag Introduced in Feature Pack 2Specify the name and text label for the tab in this tag.
    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. -->
    <PropertyTabPane name="productPricingTab" text="Pricing">
    	<!—
    		Property Pane: Pricing. This is includes the property pane
    		definition that contains product pricing details.
    	 -->
    	<PropertyPane baseDefinitionName="catPricingTab"/>
    </PropertyTabPane>
  5. Complete one of the following steps:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1Create 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>
    • Introduced in Feature Pack 2Create a new definition that defines the contents of the new tab and add it anywhere within the file. For example, add the catPricingTab definition:
      <PropertyPane definitionName="catPricingTab">
      …
      </PropertyPane>

What to do next

After you complete your customization:
Version Steps
  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 setting is the default environment setting.
  2. Test your changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.
  3. Deploy your changes to your production environment.
Introduced in Feature Pack 2
  1. Test your changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.
  2. Deploy your changes to your production environment.