web channel enhancement

[pramodhkapoor]

In this blog post I would like to share how to enhance the SAP WCEM to support multi select advanced search helps. This feature shall improve the user experience of web applications

The enhancements consists of two parts – the first part is to set the f4 help to multi selection and the second part is to add several search criteria’s within the generic search framework.

Part One:

SAP Web Channel framework implemented the composite component inputWithHelpValues.xhtml (SC: SAP-WEC-FRW DC:wec/frw/tc/ui/runtime/jsf) which consists of the input field with the f4-help icon (see the red rectangle in the picture below) and the handling of the f4 help popup . This CC has a distinctive interface – one attribute is the selectionMode which can be set to SINGLE or MULTI – default value is SINGLE.  The selectionMode attribute controls the selection type of the result list within the f4 help !

One search criteria line of the generic search (e.g. the Connection ID in the picture above) is implemented in the component advSearchCriteria.xhtml
(SC: SAP-WEC-FRW DC: wec/frw/mc/wcf)– here you will find the CC inputWithHelpValues at different places. But the attribute selectionMode is not
set – that mean the f4 help search is set to single selection. Now, you have to set the selectionMode to MULTI for your specific f4 help search. 

Therefore you have to enhance the advSearchCriteria.xhtml component (Module com.sap.common) with the standard enhancement concept. Please refer to Development Guide at SAP Web Channel Experience Management 3.0 – SAP Help Portal Page

Then, the implementations of the inputWithHelpValues has to be adjusted in your  enhanced advSearchCriteria component. The idea is that the rendered attribute of the inputWithHelpValues is used to distinguish if the standard f4 help component (single selection) or your specific f4 help component (multi selection) will be rendered.

Below is a code snippet which you have to implement in your enhanced advSearchCriteria component:

• search for all inputwithHelpValues and duplicate the entry
• the standard inputWithHelpValues should be rendered for all searches except that search you want to support the multi selection
• the new inputWithHelpValues should have another id, the selectionMode attribute is set to MULTI and should only be rendered for your specific product search

<wcf:inputWithHelpValues id="cIABSCVal"
                title="#{i18n['comsapcommon.ui.searching.adv.sc.value']}"
                searchManager="#{cc.vch.advSearchVCHandler.helpValuesSearchManager}"
                searchRuntime="#{null}"
                searchName="#{searchCriterionUI.helpValuesSearch}"
                searchBean="#{searchCriterionUI}"
                searchPropertyName="valueLowSingle"
                styleClass="fw-combineinputbutton-valuehelp"
                rendered="#{searchCriterionUI.type == 'input' and searchCriterionUI.hasValueHelp == 'TRUE' and searchCriterionUI.helpValuesSearch != 'Product_Search_within_F4'}">
</wcf:inputWithHelpValues>

<wcf:inputWithHelpValues id="cIABSCVal_Multi"
                title="#{i18n['comsapcommon.ui.searching.adv.sc.value']}"
                searchManager="#{cc.vch.advSearchVCHandler.helpValuesSearchManager}"
                searchRuntime="#{null}"
                selectionMode="MULTI"
                searchName="#{searchCriterionUI.helpValuesSearch}"
                searchBean="#{searchCriterionUI}"
                searchPropertyName="valueLowSingle"
styleClass="fw-combineinputbutton-valuehelp"
                rendered="#{searchCriterionUI.type == 'input' and searchCriterionUI.hasValueHelp == 'TRUE' and searchCriterionUI.helpValuesSearch == ' Product_Search_within_F4'}">
</wcf:inputWithHelpValues>

After that the result list of your specific  f4-help should be set to multi selection ! When the user now chooses more entries and hit the Apply button, then a string is returned to the generic search criteria like this one:

Part Two:

This return string has now to split into separate search criterias like

Connection is 1000

Connection is 1234

Connection is 2140

Generic Search Framework offers the possibility to create selection criterias as dark attribute via coding. Please refer to Development Guide at SAP Web Channel Experience Management 3.0 – SAP Help Portal Page

Create a new search criteria in your search description. Then within your implementation for such a ‘dark’ attribute you can now iterate over the existing search criterias (use selOption. getSelectOptionLineIterator). While iterating of the search criterias from UI, find that one which could have included the multi-select values. Parse the multi-select values and create new search criteria per single value

Hope this helps.