Sales Center: Examine the Find Product dialog definition

Tutorials > Sales Center > Add a new search option in the IBM Sales Center
< Previous | Next >

Examine the Find Product dialog definition

In this step you examine the XML file that defines the Find Product dialog and determine what changes you require to add a new search option.
The section of the Find Product dialog we will extend is displayed in the following screen capture:

In the previous step, you determined that the Find Product dialog is defined in the com.ibm.commerce.telesales.ui.impl.find.product plug-in. To view the definition of the Find Product dialog:

Procedure

Open the IBM Sales Center development environment.

In the Package Explorer view, navigate to the com.ibm.commerce.telesales.ui.impl.find.product plug-in.

Double-click the fragment.xml file to open it for viewing.

Click the fragment.xml tab to display the source code for the file.

In later steps, you create three control widgets to define the new search option, and create the gridCompositeDefinition that groups the three widgets together. The composite definition is tied to the first composite control and adds the second and third controls as its children. For more information, see Create a gridCompositeDefinition and Extend the stackCompositeDefinition.
Add a new search option involves three sections of the fragment.xml file: the control widget elements, the gridCompositionDefinitions and the stackCompositeDefinition. These sections use the following extension points: com.ibm.commerce.telesales.widgets.controls and com.ibm.commerce.telesales.widgets.compositeDefinitions. The com.ibm.commerce.telesales.widgets.controls extension point defines control widget elements such as labels and text input fields. The com.ibm.commerce.telesales.widgets.compositeDefinitions extension point helps you combine control widget elements, for example, to display the control widget elements in table or grid format. These three sections are described below:

Understand the stackCompositeDefinition
Each search option, such as Product Identification, Short Description, and Category in the Search by menu maps to a set of control widget elements and a gridCompositeDefinition as described previously. The following code from the plugin.xml file groups the search options together to be displayed in the drop down menu. Each search option is identified by the control widget id specified in its first control widget element:
<stackCompositeDefinition layoutId="standardStackLayout"> <control controlId="productQuickPage1Composite"/> <control controlId="productQuickPage3Composite"/> <control controlId="productQuickPage6Composite"/> </stackCompositeDefinition>
In this tutorial, we will create a new search option and add it to the Select option menu, so we will create one new set of 3 control widget elements, one gridCompositeDefinition to group them together, and extend the stackCompositeDefinition to include the new search option.

Understand control widget elements
The following control widget elements define the menu item, label and text input field when Product Identification is the selected search option.
<extension
point="com.ibm.commerce.telesales.widgets.controls">
<control 
         
        type="composite" 
       
compositeDefinitionId="productQuickPage1CompositeDefinition" 
        managerType="find">
       
<property name="compositeType"
value="findCriteriaPage"/>
       
<property name="title"
value="ProductAdvPage1.title"/>
</control>
<control 
         
        type="requiredLabel" 
        text="ProductQuickPage1.label.SkuCode" 
        fieldId="findProductOptionalSkuCodeField"/>
<control 
         
        type="text" 
        tooltip="ProductQuickPage1.tooltip.SkuCode" 
        label="ProductQuickPage1.label.SkuCode" 
        managerType="find" 
        textLimit="64" 
        setFocus="true">
       
<property name="findCriteriaFieldName"
value="SkuCode"/>
</control>
<control 
         
        type="requiredLabel" 
        text="ProductQuickPage2.label.Name" 
        fieldId="findProductOptionalNameField"/>
<control 
         
        type="text" 
        tooltip="ProductQuickPage2.tooltip.Name" 
        label="ProductQuickPage2.label.Name" 
        managerType="find"
        textLimit="128">
       
<property name="findCriteriaFieldName" value="Name"/>
</control>
<control 
         
        type="requiredLabel" 
        text="ProductQuickPage4.label.Manufacturer" 
        fieldId="findProductOptionalManufacturerField"/>
<control 
         
        type="text"
tooltip="ProductQuickPage4.tooltip.Manufacturer" 
        label="ProductQuickPage4.label.Manufacturer" 
        managerType="find" 
        textLimit="64">
       
<property name="findCriteriaFieldName"
value="Manufacturer"/>
</control>
</extension>
The first control widget element defines the item that displays in the Select option menu and defines an ID to identify the menu item, the label and the text input field as a group. The first control widget element's properties are...

A unique id to identify this control widget element.

type="composite"

This value indicates that this control widget element will be composed of other elements.

compositeDefinitionId="productQuickPage1CompositeDefinition"

This value is used in the gridCompositeDefinition section of the plug-in.xml file to identify the composite definition.

managerType="find"

This value indicates that the widget manager that manages this control widget is the find widget manager.

property name="compositeType" value="findCriteriaPage"

The compositeType property indicates that this control widget is of type findCriteriaPage. The value findCriteriaPage must be unique per composite.

property name="title" value="ProductAdvPage1.title"

The title property indicates the text that displays in the menu. In the screen capture, this text is Product Identification.

The second control widget element defines the label that displays to the left of the text input field. The control widget element's properties are...

A unique id to identify this control widget element.

type="requiredLabel"

This value indicates that the input is required and therefore displays a red asterisk to indicate to the user.

text="ProductQuickPage1.label.SkuCode"

This value points to the resource bundle that contains the text that displays in the label. In the screen capture, this text is Product ID.

fieldId="findProductSkuCodeField"

This value indicates that the field findProductSkuCodeField is related to this label. The findProductSkuCodeField field is defined in the third control widget element.

The third control widget element defines the text input field. The control widget element's properties are...

A unique id to identify this element.

type="text"

This value indicates that the object is a text input field.

tooltip="ProductQuickPage1.tooltip.SkuCode" and label="ProductQuickPage1.label.SkuCode"

This value indicates which values in the resource bundle should display as the tooltip and label. The tooltip displays when the user hovers their mouse pointer over the field, and the label displays in status messages at the bottom of the IBM Sales Center window.

managerType="find"

This value indicates that the widget manager that manages this control widget is the find widget manager.

textLimit="64"

This value indicates that the text input field can contain a maximum of 64 characters.

setFocus="true"

This value indicates that when the user chooses Product Identification from the menu, the cursor will be active in this text field.

property name="findCriteriaFieldName" value="SkuCode"

This property indicates that the findCriteriaFieldName is SkuCode. SKU, in this case, is the product id.

The last four control widgets are similar to the findProductSkuCodeLabel and findProductSkuCodeField, but for Product Name and Manufacturer labels and fields.

Understand the gridCompositeDefinition
The following code specifies that the labels and fields, for example, findProductSkuCodeLabel and findProductSkuCodeField widgets are children of the productQuickPage1CompositeDefinition. You can see that each label and field pair correspond to a label and field in the screen capture at the top of this page:
<gridCompositeDefinition

layoutId="standardGridLayout">
<row >
       
<control controlId="findProductOptionalSkuCodeLabel"
dataId="requiredLabelGridData"/>
       
<control controlId="findProductOptionalSkuCodeField"
dataId="findTextFieldGridData"/>
</row>
<row >
       
<control controlId="findProductOptionalNameLabel"
dataId="requiredLabelGridData"/>
       
<control controlId="findProductOptionalNameField"
dataId="findTextFieldGridData"/>
</row>
<row >
       
<control
controlId="findProductOptionalManufacturerLabel"
dataId="requiredLabelGridData"/>
       
<control
controlId="findProductOptionalManufacturerField"
dataId="findTextFieldGridData"/>
</row>
</gridCompositeDefinition>
< Previous | Next >

+
Search Tips | Advanced Search