Tutorials > Management Center > Add new fields in the Catalogs tool

< Previous | Next >


Create a new tab for warranty information

In this lesson, you customize the product property list view by adding a new tab for warranty information.

To define the new warranty tab, you update one of the following files:

Next, you provide detailed warranty information in one of the following files:

The following screen captures show the result of the customization.

Add a Warranty tab

Add detailed warranty information by creating two combination box widgets: Warranty Term and Warranty Type. The values in the XWARRANTY table are displayed. These values are editable and persist to the database.

The user interfaces shown above are not complete at this stage, and are shown to demonstrate the design you are working towards as you perform this lesson.


Steps:


Procedure

  1. Define the Warranty tab in one of the following files:

    Option Description
    ProductPropertiesView.lzx

    1. Open WebSphere Commerce Developer.

    2. Open the Java EE perspective, Enterprise Explorer view.

    3. Navigate to LOBTools > WebContent > WEB-INF > src > lzx > commerce > catalog > propertiesViews.

    4. Open the ProductPropertiesView.lzx file.

    5. Determine the location to place the new tab in relation to other tabs. For example, in this scenario, the newly created tab is added between the Manage Product and Descriptive Attributes tabs.

    6. Locate the following code for ManageProduct: 

      <!-- Tab: Manage Product. This tab contains general information about the selected product such as name and description. -->
<wcfPropertyTabPane name="manageProductTab" text="${catalogResources.manageProductTab.string}">
<!-- Property Pane: Manage Product. This is an instantiation of the property pane class which contains general product details. -->
<catManageProduct/>
</wcfPropertyTabPane>

    7. Add code for the Warranty tab after the manageProductTab tab. 

      <!-- Tab: Warranty. This tab contains warranty information for a product. -->
<wcfPropertyTabPane name="productwarrantyTab" text="${extCatalogResources.productWarranty_TabHeader.string}">
<!-- Property Pane: warranty. This is an instantiation of the property pane class which contains product warranty details. -->
<catWarrantyPane/>
</wcfPropertyTabPane>

    ProductPropertiesView.def

    1. Open WebSphere Commerce Developer.

    2. Open the Java EE perspective, Enterprise Explorer view.

    3. Navigate to Dynamic Web Project > LOBTools > WebContent > config > commerce > catalog > propertiesViews.

    4. Open the ProductPropertiesView.def file.

    5. Determine the location to place the new tab in relation to other tabs. For example, in this scenario, the newly created tab is added between the Manage Product and Descriptive Attributes tabs.

    6. Locate the following code for ManageProduct: 

      <!-- Tab: Manage Product. This tab contains general information about the selected product such as name and description. -->
<PropertyTabPane name="manageProductTab" text="${catalogResources.manageProductTab}">
   
<!-- Property Pane: Manage Product. This is an instantiation of the property pane class which contains general product details. -->
   
<PropertyPane baseDefinitionName="catManageProduct"/>
</PropertyTabPane>

    7. Add code for the Warranty tab after the manageProductTab tab. 

      <!-- Tab: Warranty. This tab contains warranty information for a product. -->
<PropertyTabPane name="productwarrantyTab"
      text="${extCatalogResources.productWarranty_TabHeader}">
  
<!-- Property Pane: warranty. This is an instantiation of the property pane
        class which contains product warranty details. -->
   
<PropertyPane baseDefinitionName="catWarrantyPane"/>
</PropertyTabPane>

  2. Add detailed warranty information in one of the following files:

    Option Description
    CatalogPropertyPane.lzx

    1. Open the Java EE perspective and select Enterprise Explorer view.

    2. Navigate to LOBTools > WebContent > WEB-INF > src > lzx > commerce > catalog > propertiesViews.

    3. Open the CatalogPropertyPane.lzx file. The CatalogPropertyPane.lzx file contains all property panes used in the Catalogs tool. Update this file to add detailed warranty information.

    4. Add the following code between the <library> and </library> tags: 

      <class name="catWarrantyPane" extends="wcfPropertyPane">
<wcfPropertyGroup open="true" groupTitle="${extCatalogResources.productWarranty_GroupTitleForWarranty.string}">
<wcfPropertyCombobox promptText="${extCatalogResources.productWarranty_WarrantyTermPrompt.string}" width="200"  propertyName="x_warterm"/>
<wcfPropertyCombobox promptText="${extCatalogResources.productWarranty_WarrantyTypePrompt.string}" width="200"  propertyName="x_wartype"/>
</wcfPropertyGroup>

</class>

      Tip: The objectPath is the path required to navigate from the reference object to its child object. The objectPath is used to locate a child Management Center object relative to the current object. If the property applies to the current object, then you do not need to specify an object Path. In this example, both Warranty Term and Warranty Type applies to the current object, CatalogEntry.

    5. Save the file.
    CatalogPropertyPane.def

    1. Open the Java EE perspective and select Enterprise Explorer view.

    2. Navigate to LOBTools > WebContent > config > commerce > catalog > propertiesViews.

    3. Open the CatalogPropertyPane.def file. The CatalogPropertyPane.def file contains all property panes used in the Catalogs tool. Update this file to add detailed warranty information.

    4. Add the following code between the <Definitions> and </Definitions> tags: 

      <PropertyPane definitionName="catWarrantyPane">
   
<PropertyGroup open="true"
        groupTitle="${extCatalogResources.productWarranty_GroupTitleForWarranty}">
       
<PropertyCombobox
            promptText="${extCatalogResources.productWarranty_WarrantyTermPrompt}"
            width="200"  propertyName="x_warterm"/>
       
<PropertyCombobox 
            promptText="${extCatalogResources.productWarranty_WarrantyTypePrompt}"
            width="200"  propertyName="x_wartype"/>
   
</PropertyGroup>
</PropertyPane>

      Tip: The objectPath is the path required to navigate from the reference object to its child object. The objectPath is used to locate a child Management Center object relative to the current object. If the property applies to the current object, then you do not need to specify an object Path. In this example, both Warranty Term and Warranty Type applies to the current object, CatalogEntry.

    5. Save the file.

< Previous | Next >


+

Search Tips   |   Advanced Search