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

< Previous | Next >


Create a set of control widget elements

As you determined in a previous step, to add a new search option requires a new set of three control widget elements: one parent and two children.

Note that you can use the com.ibm.commerce.telesales.widgets.controls extension point to create the controls. You do not need com.ibm.commerce.telesales.widgets.CompositeDefinitions here.


Create the first widget element

The first control widget element is the parent widget for the next two widgets, and defines an ID to identify the menu item, the label and the text input field as a group.

To create the first control widget element:


Procedure

  1. In the Editor view, in the myNewExtensionsPlugin tab, click the Extensions tab.

  2. Click Add.

  3. From the Available extension points list, select com.ibm.commerce.telesales.widgets.controls and click Finish.

  4. In the All Extensions pane, right-click com.ibm.commerce.telesales.widgets.controls and select New > control.

  5. In the Extension Element Details pane, clear any default values then set the following values (the value for compositeDefinitionId is explained in the next section of the tutorial):

    Property Value
    id MyNewSearchOption
    type composite
    managerType find
    compositeDefinitionId productQuickPageMFPartNumCompositeDefinition

  6. Save the changes.

  7. In the All Extensions pane, right-click MyNewSearchOption (control) and select New > property.

  8. In the Extension Element Details pane, set the following values:

    Property Value
    name compositeType
    value findCriteriaPage

    When a control is constructed, the declared attributes and properties will be passed to the appropriate control factory as determined by the control type. The properties will also be available to the widget manager associated with the use of the control.

  9. Repeat the previous two steps to create another property with the following values. The value extendedFindDialog.searchOption refers to the properties file and resource bundle key you created in a previous step. The name of the file is extendedFindDialog.properties and the resource bundle key in the file that will display is searchOption:

    Property Value
    name title
    value extendedFindProductDialog.searchOption

  10. Save the changes, and leave the editor open.


Create the second control widget element

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

To create the control widget element that defines the label:

  1. In the All Extensions pane, right-click com.ibm.commerce.telesales.widgets.controls and select New > control.

  2. In the Extension element details pane, clear any default values and set the following values:

    Property Value
    id MyNewSearchOptionLabel
    type requiredLabel
    fieldId MyNewSearchOptionField
    text extendedFindProductDialog.searchOption

  3. Save the changes, but do not close the editor.


Create the third control widget element

The third control widget element defines the text input field in which the user inputs the search criteria.

To create the control widget that defines the text input field:

  1. In the All Extensions pane, right-click com.ibm.commerce.telesales.widgets.controls and select New > control.

  2. In the Extension Element details pane, clear any default values and set the following values:

    Property Value
    id MyNewSearchOptionField
    type text
    required true
    tooltip extendedFindProductDialog.searchOption
    managerType find
    label extendedFindProductDialog.searchOption

  3. Save the changes, but do not close the editor.

  4. Right-click the new control widget element, labeled extendedFindProductDialog.searchOption. Click New > property.

  5. In the Extension Element Details pane, enter the following properties. The value property will match a parameter that we will use when making code changes to search for the manufacturer part number, later in this tutorial :

    Property Value
    name findCriteriaFieldName
    value ManufacturerPartNum

  6. Save the changes, but do not close the editor.


View the source code

To view the changes in the source code of the plugin.xml file:

  1. Click the plugin.xml tab.

  2. Examine the source code and determine how the changes in the Extensions tab are reflected in the source code: 

    <extension
    point="com.ibm.commerce.telesales.configurator">
   
<configurator path="config"/>
       
</extension>
       
<extension
    point="com.ibm.commerce.telesales.resources.resources">
   
<resourceBundle
baseName="myNewExtensionsPlugin.extendedFindProductDialog"/>
       
</extension>
       
<extension
    point="com.ibm.commerce.telesales.widgets.controls">
   
<control
        type="composite"
        managerType="find"
       
compositeDefinitionId="productQuickPageMFPartNumCompositeDefinition"
        >
       
<property
            value="findCriteriaPage"
            name="compositeType"/>
       
<property
            value="extendedFindProductDialog.searchOption"
            
        name="title"/>
   
</control>
   
<control
        text="extendedFindProductDialog.searchOption"
        type="requiredLabel"
        fieldId="MyNewSearchOptionField"
        />
   
<control
        required="true"
        type="text"
        managerType="find"
        label="extendedFindProductDialog.searchOption"
        
                tooltip="extendedFindProductDialog.searchOption"
        >
       
<property
            value="ManufacturerPartNum"
            name="findCriteriaFieldName"/>
   
</control>

       
</extension>

Tip: It is possible to change the source code in the plugin.xml tab instead of using the Extensions editor. However, it is recommended that you use the Extensions editor to avoid making typing errors.

< Previous | Next >


+

Search Tips   |   Advanced Search