Adding a medium sized image to the Product Management tool

You can customize the view tabs and columns for the Product Management tools pages.

Note: This scenario and the keyword search scenario use the same user interface field to complete the customization tasks. Each set of required changes cannot coexist. Only one customization scenario can be supported at a time.

In this scenario, the Keyword column from the Images tab is changed to contain medium sized images. After the tasks are complete, the Images tab will have the following three columns, in this order:

Thumbnail size Image
Medium Image
Full Size Image

You customize the CatalogPageList.xml file and the ProductNLS_locale.properties file.

Procedure

Create a directory under the WC_eardir/xml directory and call it WC_eardir/xml/myCustomXML where myCustomXML represents some custom directory name. If other Product Management tools customization scenarios are already implemented, this directory might exist.

Update the Catalog Page List XML file to change the name and the order of the columns in the Images tab 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 Catalog Page List definition file, in a new folder. This procedure is not done within the development environment. To add the column, do the following steps:

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

Move the following line:

<column id="keyword" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" 
 maxsize="254" width="30%" title="productUpdateDetail_Keyword" other=""/>

Between these two lines:


<column id="thumbnailImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" 
 maxsize="254" width="250px" title="productUpdateDetail_ThumbNail" 
 other="ONCHANGE=fcnOnChangeThumbnail(this)"/>
 
 
<column id="fullImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" 
 maxsize="254" width="250px" title="productUpdateDetail_FullImage" other=""/>

In the column id="keyword" segment, change


title="productUpdateDetail_Keyword"


title="productUpdateDetail_MediumImage"

You should see the following changes:


<column id="thumbnailImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" 
    maxsize="254" width="250px" title="productUpdateDetail_ThumbNail" 
    other="ONCHANGE=fcnOnChangeThumbnail(this)"/>
    
<column id="keyword" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" 
    maxsize="254" width="30%" title="productUpdateDetail_MediumImage" other=""/>
    
<column id="fullImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" 
    maxsize="254" width="250px" title="productUpdateDetail_FullImage" other=""/>

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. This procedure is not done within the development environment. To make this update:
1. Create a 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 might exist.
2. Change to the WC_eardir/xml/tools/catalog directory.
3. Place a copy of the file resources.xml in WC_eardir/xml/myCustomXML/tools/catalog.
4. Open the resources.xml file in an editor.
5. 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="../custom/CatalogPageList.xml" />
```
6. Save the file.
Override the existing ProductNLS_en_US.properties file to add the information for the changed columns in the Images tab. To protect your customized data from being overwritten during migration to a future version, or during installation of a future fix pack, or some similar event, it must be created in a safe place, separate from the WebSphere Commerce assets. This procedure creates a properties file, in a new folder, within the WebSphere Commerce development environment:
1. Open the WebSphere Commerce development environment.
2. Go to the WebSphereCommerceServerExtensionsLogic project.
3. Go 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 that are created by IBM, and included in WebSphere Commerce, follow a naming convention which begins with com.ibm...
6. From the com.myCompany.catalog.Properties folder's pop-up menu, 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 access the WebSphere Commerce Accelerator.
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. At the top of this file, include some comments similar to the following to clarify the purpose of the file:
```
#
# Customized properties for catalogs
# Changed columns for the Images tab: new order and replace keyword column with 
# medium image
################################################################################
```
10. Add the following line:
```
productUpdateDetail_MediumImage=Medium Image
```
11. Save the file.
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. To make this update:
1. Change to the WC_eardir/xml/myCustomXML/tools/catalog directory.
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 custom directory name.
4. Save the file.
Creating a custom XML file in a custom directory requires that you update the instance XMLPath setting. This setting governs the locations in which the application attempts to locate XML files. It functions in a manner similar to a Java classpath setting. This is not done within the development environment. To update the XMLPath setting do the following steps:
1. Change to the WC_eardir/xml/config directory.
2. Open the wc-server.xml file in an editor.
3. Scroll down to the <ToolsGeneralConfig> section of the file, and update the XMLPath by specifying your custom directory name to the value. For example, if the original XMLPath value is
```
XMLPath="tools;tools/devtools;WEB-INF/xml/tools;WEB_INF"
```
  and your custom directory is myCustomXML, then change the XMLPath value to
```
XMLPath="myCustomXML;tools;tools/devtools;WEB-INF/xml/tools;WEB_INF"
```
4. Save the file.
Test your customization in your development environment. To complete this test:
1. Stop and restart WebSphere Commerce within WebSphere Commerce Developer.
2. Launch the WebSphere Commerce Accelerator.
3. Select Merchandise > Catalog Management. Products > Catalog Management.
4. Select a category and click List Catalog Entries. Ensure that there are catalog entries in the catalog.
5. Click the Images tab.
  Three columns are displayed: Thumbnail size Image, Medium Image, Full Size Image
  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 store assets.

Update the following information:

Enterprise application name

WCServer_enterprise_archive

Relative path to file

The relative path depends on the file you are deploying:

CatalogPageList.xml

xml/tools/custom/CatalogPageList.xml

resources.xml

xml/tools/catalog/resources.xml
Keep a backup copy of the existing resources.xml file in that directory until your changes are tested in the production environment.

ProductNLS_locale.properties

properties/com/myCompany/catalog/properties/ProductNLS_locale.properties
Restart your WebSphere Commerce instance.
To retrieve the file name of a medium sized image for use on a JSP page, you must use the ProductDataBean.getDescription().getKeyWord() method. The scenario uses the keyword field to hold the medium sized image.