Extending the Advanced Search dialog to include extended properties as search

The Advanced Search dialog in the Catalogs tool is implemented by the catAllCatalogEntriesAdvancedSearchContent class.The class, catAllCatalogEntriesAdvancedSearchContent , is in WCDE_installdir \workspace\LOBTools\WebContent\WEB-INF\src\lzx\commerce\catalog\restricted\searchDefinitions\CatalogAdvancedSearchContent.lzx. catAllCatalogEntriesAdvancedSearchContent is a subclass of wcfAdvancedSearchContent.

About this task

The existing search condition input fields use user interface widgets, such as wcfInputText, wcfBaseRadioGroup, wcfBaseRadioButton, wcfGridCheckbox, and other OpenLaszlo user interface widgets.

Procedure

  1. Define the new properties that are used in the extended Advanced Search dialog.
    Verify which properties are already added to the CatalogLOB_en_US.properties file and add any properties definitions that are missing from this file.
    1. Go to LOBTools > Java Resources: src > com.mycompany.catalog.client.lobtools.properties directory.
    2. Open the CatalogLOB_en_US.properties file.
    3. Verify that the following properties definitions are in the CatalogLOB_en_US.properties file:
      
productWarranty_DefaultOption=choose one...
      If any of these properties definitions are not defined, add them to the file.
    4. Save and close the file.
    5. Go to LOBTools > WebContent > WEB-INF > src > lzx > mycompany > catalog.
    6. Open the extCatalogManagementResourceBundle.lzx file.
    7. Verify that the following wcfResourceBundleKey definitions are contained in the extCatalogResourceBundle class:
      
<wcfResourceBundleKey name="productWarranty_DefaultOption"/>
      If any of these wcfResourceBundleKey definitions are not defined, add them to the file.
    8. Save and close the file. If the LOBTools project is not compiled automatically, right-click the LOBTools project and select Build OpenLaszlo Project.
    9. To make the properties that you defined available, restart the WebSphere Commerce Test Server.
  2. Create a new advanced search content class. You must create a new Advanced Search dialog that extends the default Advanced Search dialog. You add your custom user interface widgets to this dialog. The user selects the warranty term and warranty type from a list of options.
    1. Open WebSphere Commerce Developer.
    2. In the Enterprise Explorer view, go to LOBTools/WebContent/WEB-INF/src/lzx/mycompany/catalog
    3. Right-click the catalog folder; select New > Folder.
    4. Name the folder searchDefinitions.
    5. Right-click the searchDefinitions folder; select New > File
    6. Name the file MyCompanyCatalogAdvancedSearchContent.lzx.
    7. Open the MyCompanyCatalogAdvancedSearchContent.lzx for editing.
    8. Add the following code to the MyCompanyCatalogAdvancedSearchContent.lzx file: 
      
<library>
    <!--Define the new class, which is extended from catAllCatalogEntriesAdvancedSearchContent-->
    <class name="extAllCatalogEntriesAdvancedSearchContent" extends="catAllCatalogEntriesAdvancedSearchContent">
        <simplelayout axis="y" />
        <view name="sectionWarranty" width="400" height="100">
            <simplelayout axis="x" />
            <view name="termSection">
                <simplelayout axis="y" />
                <view name="sectionWartermTXT" width="100" height="10">
                    <simplelayout axis="y" />
                    <!--Assign the header text, which is defined in extension.catalog.CatalogLOB_en_US.properties-->
                    <text text="${extCatalogResources.productWarrantyTerm_ColumnHeader.string}" width="100%" />
                </view>
                <view name="fillerWar1" width="50" />
                <view name="sectionWarterm" width="172" height="50">
                    <simplelayout axis="y" />
                    <view name="fillerWar2" height="10" />
                    <!-- 
                    Define the warterm input fields as wcfBaseComboBox, considering the value of warterm is enumerable 
                    Set the options list in method init.
                    -->
                    <wcfBaseComboBox name="wartermSelection" width="130">
                    	<method name="init">
							super.init();
							this.addItem(extCatalogResources.productWarranty_DefaultOption.string, "null");
							this.addItem(extCatalogResources.productWarranty_DisplayNameForTerm1.string, 30);
							this.addItem(extCatalogResources.productWarranty_DisplayNameForTerm2.string, 45);
							this.addItem(extCatalogResources.productWarranty_DisplayNameForTerm3.string, 60);
							this.selectItem("null");
						</method>
                   </wcfBaseComboBox>
               </view>
            </view>

            <view name="typeSection">
               <simplelayout axis="y" />
               <view name="sectionWartypeTXT" width="100" height="10">
                    <simplelayout axis="y" />
                    <!--Assign the header text, which is defined in extension.catalog.CatalogLOB_en_US.properties-->
                    <text text="${extCatalogResources.productWarrantyType_ColumnHeader.string}" width="100%" />
                </view>
               <view name="fillerWar3" width="50" />
                <view name="sectionWartype" width="172" height="50">
                    <simplelayout axis="y" />
                    <view name="fillerWar4" height="10" />
                    <!-- 
                    Define the warterm input fields as wcfBaseComboBox, considering the value of warterm is enumerable 
                    Set the options list in method init.
                    -->
                    <wcfBaseComboBox name="wartypeSelection" width="130">
                    	<method name="init">
							super.init();
							this.addItem(extCatalogResources.productWarranty_DefaultOption.string, "null");
							this.addItem(extCatalogResources.productWarranty_DisplayNameForType1.string, "LIMITED");
							this.addItem(extCatalogResources.productWarranty_DisplayNameForType2.string, "COMPREHENSIVE");
							this.selectItem("null");
                     </method>
                    </wcfBaseComboBox>
               </view>
             </view>
        </view>
        
        <method name="setSearchOptions">
        	<![CDATA[
        	super.setSearchOptions();
        	this.searchOptions.wartermSelection = this.sectionWarranty.termSection.sectionWarterm.wartermSelection.getValue();
        	this.searchOptions.wartypeSelection = this.sectionWarranty.typeSection.sectionWartype.wartypeSelection.getValue();
        	]]>
        </method>
    </class>
<wcfRegisterSearchDefinition searchType="FindAllCatalogEntries" searchDefinitionClass="catFindAllCatalogEntriesSearchDefinition"/>
	<!---
		This search is used to find {@link catBaseProductPrimaryObjectDefinition}, {@link catBaseBundlePrimaryObjectDefinition}, {@link catBaseKitPrimaryObjectDefinition}, {@link catBaseCatalogGroupSKUPrimaryObjectDefinition} and {@link catBaseProductSKUPrimaryObjectDefinition}. 
              The search retrieves objects that match the search term. The search term text is compared with the values of the following properties:
			<ul>
			<li>
partnumber
			<li>
name
			</ul>
	 -->
	<class name="catFindAllCatalogEntriesSearchDefinition"  extends="wcfSearchDefinition"
			searchType="FindAllCatalogEntries" 
			displayName="${catalogResources.findCatalogEntriesSearchDefinition_DisplayName.string}" 
			listClass="catCatalogEntrySearchGrid" 
			listTitle="${catalogResources.catalogGroupChildListTitle.string}"
			utilitiesListClass="catCatalogEntryUtilitiesSearchGrid"
			advancedSearchContentClass="extAllCatalogEntriesAdvancedSearchContent"
			icon="catalogEntriesIcon"
			tooltip="${catalogResources.searchAllCatalogEntriesTooltip.string}">
		<wcfSearchService name="findAllCatalogEntries" url="/cmc/FindCatalogEntries-All">
			<wcfServiceParam name="storeId"/>
			<wcfServiceParam name="masterCatalogId"/>
		</wcfSearchService>
	</class>
</library>
      In this code sample, the extAllCatalogEntriesAdvancedSearchContent class uses properties resource bundles to show the warranty type and warranty term option names.
      For example, extCatalogResources.productWarranty_DefaultOption.string, extCatalogResources.productWarranty_DisplayNameForTerm1, extCatalogResources.productWarranty_DisplayNameForType1.string, and so on. Some of these were already defined in Tutorial: Adding fields in the Catalogs tool
      Note: Since the advanced search content class is not an IBM class, it is prefixed with ext to indicate that it is an extension.
    9. Save and close the file.
  3. Register the new advanced search class. After the new OpenLaszlo library file MyCompanyCatalogAdvancedSearchContent.lzx is created, register it in CatalogExtensionsLibrary so that the classes in this library can be used by other classes.
    1. Go to LOBTools > WebContent > WEB-INF > src > lzx > commerce > catalog.
    2. Double-click CatalogExtensionsLibrary.lzx to open it in the default editor.
    3. In the library section, add a line to include the new advanced search class:
      
<include href="../../mycompany/catalog/searchDefinitions/MyCompanyCatalogAdvancedSearchContent.lzx"/>
    4. Click Save.
  4. Bind the new advanced search class with the catalog entry search definition. After you create the new advanced search content, you must bind it with the catalog entry search definition. You must bind it so that it can be launched by the Catalog search widget.
    1. Determine the name of the specific search definition that you want to modify so that you can search for it in other files:
      Option Description
      Go to the \LOBTools\WebContent\WEB-INF\src\lzx\commerce\catalog directory
      1. Open the CatalogManagementToolDefinition.lzx file:
        1. In the Search definitions section, locate the catFindAllCatalogEntriesSearchDefinition catalog entry search definition: 
          
<!-- Search definitions -->
<catFindKitsSearchDefinition/>
<catFindBundlesSearchDefinition/>
<catFindSKUsSearchDefinition/>
<catFindProductsSearchDefinition/>
<catFindAllCategoriesSearchDefinition/>

<catFindAllCatalogEntriesSearchDefinition isDefault="true" displayName="${catalogResources.findAllCatalogEntriesSearchDefinition_DisplayName.string}"/>

 
<catFindAllCatalogEntriesExceptSKUsSearchDefinition/>
          This is the name of the search definition that you want to modify.
      2. Search the *.lzx files for the FindAllCatalogEntries definition name. This definition is declared in the \LOBTools\WebContent\WEB-INF\src\lzx\commerce\catalog\searchDefinitions\FindAllCatalogEntriesSearchDefinition.lzx file.
      Go to the \LOBTools\WebContent\config\commerce\catalog directory
      1. Open the CatalogManagementToolDefinition.def file:
        1. In the Search definitions section, locate the catFindAllCatalogEntriesSearchDefinition catalog entry search definition, where the baseDefinitionName is FindAllCatalogEntries: 
          
<!-- Catalog Search Definitions -->

<SearchDefinition baseDefinitionName="FindAllCatalogEntries"
   displayName="${catalogResources.findAllCatalogEntriesSearchDefinition_DisplayName}"
   isDefault="true"/>

<SearchDefinition baseDefinitionName="FindAllCatalogEntriesExceptSKUs"/>
<SearchDefinition baseDefinitionName="FindCategories"/>
<SearchDefinition baseDefinitionName="FindProducts"/>
<SearchDefinition baseDefinitionName="FindSKUs"/>
<SearchDefinition baseDefinitionName="FindBundles"/>
<SearchDefinition baseDefinitionName="FindKits"/>
          This is the name of the search definition that you want to modify.
      2. Search the *.def files for the FindAllCatalogEntries definition name. This definition is declared in the \LOBTools\WebContent\config\commerce\catalog\searchDefinitions\FindAllCatalogEntriesSearchDefinition.def file.
    2. Double-click one of the following files to open it in the default editor:
      • WebSphere Commerce Version 7.0.0.0Feature Pack 1 FindAllCatalogEntriesSearchDefinition.lzx
      • Introduced in Feature Pack 2 FindAllCatalogEntriesSearchDefinition.def
      Option Description
      FindAllCatalogEntriesSearchDefinition.lzx In this class file:
      1. Locate the advancedSearchContentClass attribute in the class definition and change the attribute value to the newly defined advanced search definition:
        
advancedSearchContentClass="extAllCatalogEntriesAdvancedSearchContent"

        The following code snippet shows the modified FindAllCatalogEntriesSearchDefinition.lzx file:

        
<library>
        <class name="catFindAllCatalogEntriesSearchDefinition"  extends="wcfSearchDefinition"
            searchType="FindAllCatalogEntries" 
            displayName="${catalogResources.findAllCatalogEntriesSearchDefinition_DisplayName.string}" 
            isDefault="true" 
            listClass="catCatalogEntrySearchGrid" 
            listTitle="${catalogResources.catalogGroupChildListTitle.string}"
            
advancedSearchContentClass="extAllCatalogEntriesAdvancedSearchContent">

        <wcfSearchService name="findAllCatalogEntries" url="/cmc/FindCatalogEntries-All">
            <wcfServiceParam name="storeId"/>
            <wcfServiceParam name="masterCatalogId"/>
        </wcfSearchService>
      </class>
</library>
      2. Click Save.
      FindAllCatalogEntriesSearchDefinition.def In this definition file:
      1. Locate the advancedSearchContentClass attribute in the class definition and change the attribute value to the newly defined advanced search content class:
        
advancedSearchContentClass="extAllCatalogEntriesAdvancedSearchContent"

        The following code snippet shows the modified FindAllCatalogEntriesSearchDefinition.def file:

        
<Definitions>
    <SearchDefinition
       
 advancedSearchContentClass="extAllCatalogEntriesAdvancedSearchContent"
        definitionName="FindAllCatalogEntries"
        displayName=
		"${catalogResources.findCatalogEntriesSearchDefinition_DisplayName}"
        icon="catalogEntriesIcon" listDefinitionName="catCatalogEntrySearchGrid"
        listTitle="${catalogResources.catalogGroupChildListTitle}"
        searchType="FindAllCatalogEntries"
        tooltip="${catalogResources.searchAllCatalogEntriesTooltip}"
        utilitiesListDefinitionName="catCatalogEntryUtilitiesSearchGrid">
        <SearchService name="findAllCatalogEntries" url="/cmc/FindCatalogEntries-All">
            <ServiceParam name="storeId"/>
            <ServiceParam name="masterCatalogId"/>
        </SearchService>
    </SearchDefinition>
</Definitions>
      2. Click Save.

Results