Adding a new tab to the Product Management tools

If you want to add a new tab to the Product Management tools to better meet your business needs, you can customize the JSP files and create a new command to reuse the product line update command, and fulfill additional tasks. This section adds support for catalog entry inventory information. The example illustrates how to customize the JSP files and create a new command to reuse the product line update command and fulfill additional tasks. Once completed, you will be able to update the catalog entry inventory for ItemBean and PackageBean.

Procedure

Create a new directory under the WC_eardir/xml directory. For the purposes of this scenario, name the directory WC_eardir/xml/myCustomXML, where myCustomXML represents a directory name. Create the directory structure WC_eardir/xml/myCustomXML/tools/catalog. If other Product Management tools customization scenarios are already implemented, this directory may already exist.

Update the Catalog Page List XML file to add a new tab with two columns in the Product Management tools. To protect your customized data, it must be created in a safe place, separate from the WebSphere Commerce assets. This procedure creates a new Catalog Page List definition file, in a new folder. This is not done within the development environment. To add the column:

Change to the WC_eardir/xml/tools/ directory.
Make a copy of the WC_eardir/xml/tools/catalog/CatalogPageList.xml file and paste it in the WC_eardir/xml/myCustomXML/tools/catalog directory.
Open the CatalogPageList.xml file in a text editor.

Locate the following section:


<tab id="Details"         title="ProductUpdateTitle_Tab_0"/>
<tab id="Category"        title="ProductUpdateTitle_Tab_1"/>
<tab id="Description"     title="ProductUpdateTitle_Tab_2"/>
<tab id="Extended"        title="ProductUpdateTitle_Tab_3"/>
<tab id="Images"          title="ProductUpdateTitle_Tab_4"/>
<tab id="Custom"          title="ProductUpdateTitle_Tab_5"/>

Add the following line to create a new tab called Inventory:


<tab id="Inventory"     title="ProductUpdateTitle_Tab_6"/>

Locate the following section:


<column id="customField5"     tabid="5" type="TEXTAREA" CLASS="dtable"        
  input="STRING" maxsize="254" width="40%" title="productUpdateDetail_Field5"     
  other="" />

Add the following lines to create two columns, called Inventory Flag and Inventory Quantity:


<column id="inventoryFlag"     tabid="6" type="TEXTAREA" CLASS="dtable"     
  input="STRING" maxsize="64" width="50%" title="productUpdateDetail_InventoryFlag"     
  other="ONCHANGE=fcnIntegerOnChange(this)" />
 
<column id="inventoryQuantity"     tabid="6" type="TEXTAREA" CLASS="dtable"     
  input="STRING" maxsize="64" width="50%" title="productUpdateDetail_InventoryQuantity"     
  other="ONCHANGE=fcnNumberOnChange(this)" />

Save the file.

When you create a custom XML file to update the user interface, you must update the appropriate resources.xml file so that the new user interface displays as expected. This is not done within the development environment. Note: If you completed the scenario on Adding a medium sized image to the Product Management tool, then this update will already exist.

To make this update:
1. Change to the WC_eardir/xml/tools/catalog directory.
2. Open the resources.xml file in an editor.
3. Scroll down to the "resourceXML" section of the file, and update the catalog list page entry so that it matches the following sample:
```
<resourceXML name="CatalogPageList"
     file="../myCustomXML/tools/catalog/CatalogPageList.xml"/>
```
4. Save the file.
Modify the ProductNLS_locale.properties file to add the information for the new tab and its columns:
1. Open the WebSphere Commerce development environment
2. Navigate to the WebSphereCommerceServerExtensionsLogic project.
3. Navigate to the src folder.
4. From the src folder's pop-up menu, select New, and then Package.
5. In the Name Field on the New Java Package dialog, type a unique name. For the purposes of this scenario, type com.myCompany.catalog.Properties, where myCompany represents a custom directory name. Packages created by IBM, and included in WebSphere Commerce, follow a naming convention which begins with "com.ibm...".
6. Right-click on the com.myCompany.catalog.properties folder, and select New, and then Other. In the New dialog, click Simple, File, and then Next.
7. In the File name field, type ProductNLS_locale.properties, where locale represents your locale from which your business users will access the WebSphere Commerce Accelerator.
  Note: If you completed the scenario on Adding a medium sized image to the Product Management tool, then this update will already exist.
8. Click Finish to create the file and open it in a text editor.
9. To simplify future maintenance, it is a good idea to include comments in the new file. This is optional, though strongly recommended. At the top of this file, include some comments similar to the following to clarify the purpose of the file:
```
#
# Customized properties for catalogs
# New inventory tab for the Product Management tools
##################################################################
```
10. Add the following lines in the properties file:
```
ProductUpdateTitle_Tab_6=Inventory
productUpdateDetail_InventoryFlag=Inventory Flag
productUpdateDetail_InventoryQuantity=Quantity
```
11. Save the file, but do not close the development environment .
When you create a custom properties file, you must update the appropriate resources.xml file so that the new file is available to the tools within the component. This is not done within the development environment. If you completed the scenario on Adding a medium sized image to the Product Management tool, then this update will already exist. To make this update:
1. Navigate to the directory WC_eardir/xml/tools/catalog.
2. Open the resources.xml file in a text editor.
3. Scroll down to the resourceBundle section of the file, and update the code so that it matches the following sample:
```
<resourceBundle name="ProductNLS">
     <bundle>com.ibm.commerce.tools.catalog.properties.ProductNLS</bundle>
     <bundle>com.myCompany.catalog.properties.ProductNLS</bundle>
</resourceBundle>
```
  where myCompany represents your company name.
4. Save the file.

Update the createData(...) and createDataObject(...) methods in the Worksheet2.jspf file:

In the WebSphere Commerce development environment, under the CommerceAccelerator/Web Content/tools directory, create a new folder called custom.
Navigate to the CommerceAccelerator/Web Content/tools/catalog folder.
Select the Worksheet2.jspf file. From the file's pop-up menu, select Copy.
Select the Web Content/tools/custom folder. From the folder's pop-up menu, select Paste.
Select the new file. From the file's pop-up menu, select Open With > Text Editor.

In the createData(...) function, add the following section of code before the return result; line:


//Add this inventory section
  try {
   
   InventoryAccessBean abInventory = new InventoryAccessBean();
   abInventory.setInitKey_catalogEntryId(abEntry.getCatalogEntryReferenceNumber());
   abInventory.setInitKey_fulfillmentCenterId(cmdContext.getStore().
         getFulfillmentCenterId());
   abInventory.setInitKey_storeId(cmdContext.getStoreId().toString());
   abInventory.refreshCopyHelper();
   
   result += "data["+index+"].inventoryFlag     = '" + toEscapeSlash(abInventory.
         getInventoryFlags()) + "';\n";
   result += "data["+index+"].inventoryQuantity = '" + toEscapeSlash(abInventory.
         getQuantity()) + "';\n";
  } catch (Exception e) {
  }

In the function createDataObject(...) function, add these lines:


result += "   this.inventoryFlag    = '';\n";
  result += "   this.inventoryQuantity = '';\n";

between the following lines:


result += "this.categoryID='-1';\n";

and


result += "}\n";

Save the file.

Make changes to the file ProductUpdateDetail.jsp using the following steps:
1. In the WebSphere Commerce development environment, navigate to the CommerceAccelerator/Web Content/tools/catalog folder.
2. From the ProductUpdateDetail.jsp file's pop-up menu, select Copy.
3. From the CommerceAccelerator/Web Content/tools/custom folder's pop-up menu, select Paste.
4. Select the file. From the file's pop-up menu, select Open With > Text Editor.
5. Modify the import statement at the beginning of the Worksheet2.jspf file to point to the custom Worksheet2.jspf:
```
<%@ include file="../custom/Worksheet2.jspf" %>
```
6. Add the following import statement to the existing import statement: <%@ page import="com.ibm.commerce.fulfillment.objects.InventoryAccessBean" %>
7. Save the file.
Create the CatalogEntryXMLInventoryExtensionControllerCmd interface. In the WebSphere Commerce development environment:
1. Navigate to the WebSphereCommerceServerExtensionsLogic project.
2. Navigate to the src folder.
3. Select the src folder. From the folder's pop-up menu, select New, then Package.
4. In the Name field type com.myCompany.commerce.tools.catalog.commands, and click Finish.
5. Select the com.myCompany.commerce.tools.catalog.commands package. From the package's pop-up menu, select New, and then Interface.
6. In the Name field, type CatalogEntryXMLInventoryExtensionControllerCmd.
7. Click Finish to open the command in a text editor.
8. Add the interface code.
9. Save and close the file.
Create the CatalogEntryXMLInventoryControllerCmdImpl command implementation to process the customized data. To create this command implementation:
1. Navigate to WebSphereCommerceServerExtensionsLogic.
2. Select the com.myCompany.commerce.tools.catalog.commands package. From the package's pop-up menu, select New, and then Class.
3. In the Name field, type CatalogEntryXMLInventoryExtensionControllerCmdImpl.
4. Click Finish. The file opens in a text editor.
5. Add the implementation code.
6. Save the file, but do not close the development environment.
Add entries to the struts-config-ext.xml file to point to your customized JSP page and controller command. All customization changes should be made in struts-config-ext.xml, not to struts-config.xml.
1. In the WebSphere Commerce development environment, navigate to the CommerceAccelerator/Web Content/WEB-INF folder.
2. From the struts-config-ext.xml file's pop-up menu, select Open.
3. Locate the following text:
4.  <global-forwards>
5. Immediately after this section, add the following tag: <forward name="ProductUpdateDetail" path="/tools/custom/ProductUpdateDetail.jsp"/>
6. Locate the following text:
7. <action-mappings type="com.ibm.commerce.struts.ECActionMapping">
8. Immediately after this section, add the following tag:
```
<action parameter="com.myCompany.commerce.tools.catalog.commands.CatalogEntryXMLInventoryExtensionControllerCmd" path="/CatalogEntryXMLControllerCmd"
type="com.ibm.commerce.struts.BaseAction"/>
```
9. Save the file, but do not close the development environment.
Test your customization in your development environment. To complete this test:
1. Stop and restart WebSphere Commerce within WebSphere Commerce Developer
2. Opening WebSphere Commerce Accelerator.
  - Click Merchandise > Catalog Management
  - Click Product > Catalog Management
3. Select a category and click List catalog entries. An Inventory tab should display.
4. Click the Inventory tab. If you receive the correct results, then the customization has been a success, and you can proceed to propagate all of the changes you made to the development environment to the production environment as detailed in the following steps. If this check fails, you will have to determine the cause of the error, and debug.

Package and deploy the updated assets.

The customized code is CatalogEntryXMLInventoryExtensionControllerCmd.class and CatalogEntryXMLInventoryExtensionControllerCmdImpl.class. These classes must be deployed to WC_eardir/WebSphereCommerceServerExtensionsLogic.jar. In addition, new and updated store assets need to be deployed. You will need the following information:

Option	Description
Enterprise application name	`WCServer_enterprise_archive`
Relative path to file	The relative path depends on the file you are deploying: ProductUpdateDetail.jsp CommerceAccelerator.war/tools/custom/ProductUpdateDetail.jsp Worksheet2.jspf CommerceAccelerator.war/tools/custom/Worksheet2.jspf ProductNLS_`locale`.properties properties/com/`myCompany`/catalog/properties/ProductNLS_`locale`.properties struts-config-ext.xml CommerceAccelerator.war/WEB-INF/struts-config-ext.xml

Option

Description

Enterprise application name

WCServer_enterprise_archive

Relative path to file

The relative path depends on the file you are deploying:

ProductUpdateDetail.jsp: CommerceAccelerator.war/tools/custom/ProductUpdateDetail.jsp
Worksheet2.jspf: CommerceAccelerator.war/tools/custom/Worksheet2.jspf
ProductNLS_locale.properties: properties/com/myCompany/catalog/properties/ProductNLS_locale.properties
struts-config-ext.xml: CommerceAccelerator.war/WEB-INF/struts-config-ext.xml

Restart your WebSphere Commerce instance.