Tutorials > Sales Center > Add a new search option in the IBM Sales Center

< Previous | Next >

Determine the id of the user interface widget

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 move the mouse pointer over the user interface widget to change, and its ID is displayed 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. Your screen should appear similar to the following screen capture:

      

   5. 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. Navigate to the user interface element to modify. In this tutorial, to modify the Find Product dialog. Click Product > Find:

   

6. Hover over this window (note that you might have to hover over the text fields, such as Product name, rather than the actual dialog), 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.productQuickPage1Composite'. This is the id of the user interface widget to change.

7. Note: In general, after you identify the UI element to customize, you can start looking for the related IDs in the console. The ID must have the related keywords in it. For example, if you are looking for the Logon Label to customize, you can open the Logon page and move the mouse pointer over over the logon area. On the console, you might get other IDs, but you can identify the one that you want from the keywords. You can then confirm the ID by searching in the fragment.xml.
   

8. 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, type productQuickPage1Composite.

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

9. Close the IBM Sales Center client.

10. Disable the widget hover logging:

    1. Click Run > Run.

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

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

    4. Click Apply.

    5. Click Close.

< Previous | Next >

+

Search Tips   |   Advanced Search