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:
- Change to the WC_eardir/xml/tools/catalog directory.
- Open the resources.xml file in an editor.
- 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"/>
- Save the file.
- Modify the ProductNLS_locale.properties
file to add the information for the new tab and its columns:
- Open the WebSphere Commerce development environment
- Navigate to the WebSphereCommerceServerExtensionsLogic project.
- Navigate to the src folder.
- From the src folder's pop-up menu, select New, and then Package.
- 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...". - 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.
- 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. - Click Finish to create the file and open it in a text editor.
- 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 ##################################################################
- Add the following lines in the properties file:
ProductUpdateTitle_Tab_6=Inventory productUpdateDetail_InventoryFlag=Inventory Flag productUpdateDetail_InventoryQuantity=Quantity
- 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:
- Navigate to the directory WC_eardir/xml/tools/catalog.
- Open the resources.xml file in a text editor.
- 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.
- 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.
- In the WebSphere Commerce development environment, under
the CommerceAccelerator/Web Content/tools directory, create a new
folder called
- Make changes to the file ProductUpdateDetail.jsp using
the following steps:
- In the WebSphere Commerce development environment, navigate to the CommerceAccelerator/Web Content/tools/catalog folder.
- From the ProductUpdateDetail.jsp file's pop-up menu, select Copy.
- From the CommerceAccelerator/Web Content/tools/custom folder's pop-up menu, select Paste.
- Select the file. From the file's pop-up menu, select Open With > Text Editor.
- Modify the import statement at the beginning of the
Worksheet2.jspf file to point to the custom Worksheet2.jspf:
<%@ include file="../custom/Worksheet2.jspf" %>
- Add the following import statement to the existing import statement: <%@ page import="com.ibm.commerce.fulfillment.objects.InventoryAccessBean" %>
- Save the file.
- Create the CatalogEntryXMLInventoryExtensionControllerCmd
interface. In the WebSphere Commerce development environment:
- Navigate to the WebSphereCommerceServerExtensionsLogic project.
- Navigate to the src folder.
- Select the src folder. From the folder's pop-up menu, select New, then Package.
- In the Name field type com.myCompany.commerce.tools.catalog.commands, and click Finish.
- Select the com.myCompany.commerce.tools.catalog.commands package. From the package's pop-up menu, select New, and then Interface.
- In the Name field, type
CatalogEntryXMLInventoryExtensionControllerCmd
. - Click Finish to open the command in a text editor.
- Add the interface code.
- Save and close the file.
- Create the CatalogEntryXMLInventoryControllerCmdImpl command
implementation to process the customized data. To create this command
implementation:
- Navigate to WebSphereCommerceServerExtensionsLogic.
- Select the com.myCompany.commerce.tools.catalog.commands package. From the package's pop-up menu, select New, and then Class.
- In the Name field, type
CatalogEntryXMLInventoryExtensionControllerCmdImpl
. - Click Finish. The file opens in a text editor.
- Add the implementation code.
- 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.
- In the WebSphere Commerce development environment, navigate to the CommerceAccelerator/Web Content/WEB-INF folder.
- From the struts-config-ext.xml file's pop-up menu, select Open.
- Locate the following text:
-
<!-- Global Forwards --> <global-forwards>
- Immediately after this section, add the following tag:
<forward name="ProductUpdateDetail" path="/tools/custom/ProductUpdateDetail.jsp"/>
- Locate the following text:
-
<action-mappings type="com.ibm.commerce.struts.ECActionMapping">
- 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"/>
- Save the file, but do not close the development environment.
- Test your customization in your development environment.
To complete this test:
- Stop and restart WebSphere Commerce within WebSphere Commerce Developer
- Opening
WebSphere Commerce Accelerator.
- Click Merchandise > Catalog Management
- Click Product > Catalog Management
- Select a category and click List catalog entries. An Inventory tab should display.
- 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
- Restart your WebSphere Commerce instance.