Tutorials > Sales Center > Extend a page in an editor

< Previous | Next >

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.

Procedure

1. Import the com.ibm.commerce.telesales.ui.impl.* plug-ins as binary projects. By importing these plug-ins as projects, we will be able to search for the id of the user interface element to change:

   1. In the Plug-ins view, select all the plug-ins that begin with com.ibm.commerce.telesales.ui.impl.

   2. Right-click the selected plug-ins and select Import > As Binary Project. The plug-in projects display in the Package Explorer view.

2. Enable widget hover logging. When widget hover logging is enabled, you can hover the mouse pointer over the user interface widget to change, and its id will display in the console of the IBM Sales Center development environment:

   1. In the IBM Sales Center development environment, click Run > Run.

   2. In the Run window, select the Trace tab.

   3. Select Enable tracing for the selected plug-ins.

   4. In the Plug-ins and support tracing pane, select com.ibm.commerce.telesales.widgets.

   5. In the right pane, ensure debug, debug/logging, and debug/widgetHoverLogging are selected. Your screen should appear similar to the following screen capture:

      

   6. Click Run.

3. After the IBM Sales Center client opens, click Open > Sales Center - Order Management.

4. Log on and select a store, such as ConsumerDirect.

5. Click Order > Create.

6. Navigate to the user interface element to modify. In this tutorial, to modify the Payment page of the order editor:

   

   Hover over this page, then examine the console in the IBM Sales Center development environment. You should see the following text: Mouse hover control ID is 'com.ibm.commerce.telesales.ui.impl.orderPaymentPageComposite'. This is the id of the user interface widget to change.

7. Determine in which plug-in this id is defined:

   1. From the Search menu, select File.

   2. In the File Search tab, in the Containing text field, enter orderPaymentPageComposite.

   3. Click Search. The Search view shows that the orderPaymentPageComposite is defined in the com.ibm.commerce.telesales.ui.impl.order plug-in.

8. Close the IBM Sales Center client.

9. Disable the widget hover logging:

   1. Click Run > Run.

   2. In the Run window, select the Trace tab.

   3. Deselect Enable tracing for the selected plug-ins.

   4. Click Apply.

   5. Click Close.

Examine the orderPaymentPageComposite definition

Examine the default definition of the page we will modify:

1. Expand com.ibm.commerce.telesales.ui.impl.order

2. Double-click fragment.xml to view its contents.

3. Click the fragment.xml tab.

4. Find the following composite definition: <extension point="com.ibm.commerce.telesales.widgets.compositeDefinitions"> <gridCompositeDefinition layoutId="tableCompositeGridLayout"> <row > <control controlId="orderPaymentComposite" dataId="fillHorizontalGridData"/> </row> <row > <control controlId="orderPaymentPriceSummaryComposite" dataId="orderGeneralPageDefaultData"/> </row> <row > <control controlId="emptyLabel" dataId="fillHorizontalGridData"/> </row> <row > <control controlId="orderPONumberLabel" dataId="orderGeneralPageIndentedLabelData"/> <control controlId="orderPONumberText" dataId="orderItemPageGrandTotalTextGridData"/> </row> <row > <control controlId="orderEmailConfirmation" dataId="fillHorizontalIndentGridData"/> </row> </gridCompositeDefinition> </extension>

5. Note the gridCompositeDefintion id, orderPaymentPageCompositeDefinition. You will add new fields and labels for the gift message information.

< Previous | Next >

+

Search Tips   |   Advanced Search