Tutorial: Extending a page in an editor
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.
This tutorial shows you how to extend a page of an editor in the IBM Sales Center. In this scenario, you allow Customer Service Representatives to enter gift card information in the IBM Sales Center client when capturing an order on behalf of the customer.
Learning objectives
In this tutorial we will add the Gift Card Information Section at the bottom of the page shown in the following screen capture:
After completing this tutorial, you should be able to do the following tasks:
- Create a new plug-in
- Determine extension points
- Add text to a new page
- Add help to a new page
- Integrate user interface elements
- Retrieve gift message information
- Update the config.xml file to recognize new reply builders
Time required
Expect this tutorial to take 3 hours to complete.
Audience
This tutorial is aimed at WebSphere Commerce developers who will be responsible for extending IBM Sales Center pages.
Prerequisites
- You should be familiar with the following terms and concepts:
- You completed the Extending the object model and modifying an existing task command tutorial. You must have a development and production machine running the code from the object model tutorial because this IBM Sales Center tutorial builds on top of the object model tutorial code.
Lessons in this tutorial
- Determine what extend
In this step, we will determine which user interface element of the IBM Sales Center client to extend and gather information about that extension point, such as its id. - Modify the user interface
In this step of the tutorial, you modify the user interface IBM Sales Center client to contain labels and fields for the gift message information. - Add tooltip help to the new page
In this part of the tutorial, we will add help information to the extended Order Summary page of the IBM Sales Center client to describe the new fields you created. You will add descriptive information that displays when the mouse hovers over a particular field called a tooltip. - Add infopop help to the new page
In this part of the tutorial, you add an infopop to the extended Order Summary page of the IBM Sales Center client. An infopop is a context-sensitive window that opens when the user interface element has focus and the user presses F1. - Test the changes
You are now ready to test the updated user interface and determine if the database on the server side gets updated with the new gift card information. - Modify the OrderGiftDataBean class
This section refers to modifying the OrderGiftDataBean class. - Send gift information from the server to the client
This section refers to sending gift information from the server to the client. - Deploy the changes
This section refers to deploying the changes. - Extend a page in an editor - Summary
This section summarizes the tutorial.