Tutorial: Adding an editable column to the Order Items table by creating a new widget manager
Attention: This tutorial is currently under revision. The content might contain errors or inaccuracies. Subscribe to this page to be notified when an updated version is available.
The purpose of this tutorial is to demonstrate how to add an editable column to the Order Items table by creating a new widget manager.
Learning objectives
After completing the steps in this tutorial, we will be able to create a new editable column with the heading "Fulfillment Center" in the Order Items table as a drop-down list. With this column, you can select a fulfillment center value, which is saved along with the rest of the Line items in the database.
Time required
Expect this tutorial to take 4 hours to complete.
Audience
This tutorial is intended for WebSphere Commerce developers who are responsible for customizing the appearance of the IBM Sales Center client user interfaces.
Prerequisites
To complete this tutorial you should be familiar with the following terms and concepts:
- Eclipse plug-ins
- The Java programming language
- Rational Application Developer
- Relational databases
- IBM Sales Center Customization
- IBM Sales Center UI Framework extension points
Before beginning this tutorial, ensure you have completed the following tasks:
- Install the development environment for both IBM Sales Center and WebSphere Commerce.
- Publish a consumer direct sample store.
- Create a customer and an order.
Resources
Download the zip file to access the sample code used in this tutorial.
Lessons in this tutorial
- Create two fulfillment centers for the ConsumerDirect store
By default, each starter store has one fulfillment center. In this tutorial it is necessary to have more than one Fulfillment center for the ConsumerDirect store in order to populate the drop-down list later in the tutorial. - Determine the ID of the user interface widget to modify
In this step, you determine which user interface element of the IBM Sales Center to extend, and you gather the necessary information about the extension point. - Create a custom Sales Center plug-in
The IBM Sales Center consists of a set of Eclipse plug-ins. In this step, you create a new plug-in to hold the custom code. By isolating the code in its own plug-in, you can find the code and ensure that the customizations are not overwritten by any fix packs or migration to future versions. - Create a properties file for the new Order Items table
The properties file is a resource bundle that contains translatable text to display in the user interface widget. In this step, you create a properties file that contains text for the new "Fulfillment Center" table column, and add an entry to the com.example.commerce.telesales.myNewPracticePlugin plug-in to point to the new properties file. - Create a new definition for the user interface widget
In this step, you create the own definition of the Order Items table for adding a new editable column. In a later step in this tutorial, you use the system configurator to indicate that the IBM Sales Center should display this definition, not the default definition. - Point to the new widget definition
In the previous step, you created a customized version of the Order Items table. In this step, you create a file that indicates that the custom definition should be used instead of the default definition. - Create the new widget manager for the new editable column
This section is related to creating the new widget manager for the new editable column. - Determine which BOD is used to communicate from the server to the client
In this step, you determine what BOD is used to communicate with Sales Center and which class needs to be extended on the server side. - Create a new class and add code to get the fulfillment list
In this step of the tutorial, you create a new class and add code to get the fulfillment list. - Verify the ShowStore BOD
In this step of the tutorial, you verify the code. - Extend the request handler on the Sales Center client to read the BOD message
This section is about extending the request handler on the Sales Center client to read the BOD message. - Verify that the customization for ShowStore is successful
This section is about verifying the user interface. - Determine which BOD is used to store information about the fulfillment center
In this step of the tutorial, you determine what BOD is used to communicate with Sales Center and which class needs to be extended on the server side. - Create a new class to extend from the ShowSalesOrder class
In this step of the tutorial, you create a new class to extend from the ShowSalesOrder class. - Add the code to the new ExtendedShowSalesOrder class
In this section you add the code to the new ExtendedShowSalesOrder class. - Verify the customization code for ExtendedShowSalesOrder
In this step, you test to see if the code works. - Deploy the changes
In this step, you deploy the changes you made in the previous steps.