Traditional search methods are based on the “provide inputs – launch search – browse results” approach; typical examples of this method are the ones used by Wikipedia,Google (before suggest) and yes, SAP search helps..
The current trends for search methods are autocomplete and live search, in which the user is immediately helped and guided in seeking what he is searching for as soon as he types in a character. Examples of this areGoogle Suggest, Microsoft Bing, YouTube, etc..
An interesting analysis of pro and cons of live search can be found here, but just to summarize, here are some of the main advantages:
- the user is driven to find the best matching alternative
- users can refine their search simply typing more characters
- once the best matching option is selected the user can directly jump to the page
Now, what about SAP? couldn’t we have live search helps as well?
Starting from NW 7.02 the InputField in WDA should be equipped with the new feature Web Dynpro and AJAX but while waiting, we tryed to understand how to build the live search support with WDA in NW 7.01.
WDA do not provide access to low level events (like key pressed), they are not designed for this, but we needed some code to be executed whenever the user typed in a key, and here is where Adobe Islands come into help.
Infact Adobe FLEX provides this low level access, so the idea is to let the Adobe Island do the dirty job of finding the values related to the user input, querying a server side data provider, and embedding the Flex component in a WDA.
And here it comes SAP suggest, the live search for Web Dynpro composed by an Adobe FLEX data consumer and a SAP BSP data provider.
The BSP data provider takes the results of some ABAP operations (e.g. a simple select of top 10 records from a db table) and renders them as an XML document. The BSP has a single parameter that acts as a filter for the query.
The Adobe flex data consumer is a component designed to be embedded (Island) in a Web Dynpro for ABAP. The component requests the BSP url every time a new key is typed in the input box by the user, and renders the results as a list. The BSP url is known by the Adobe flex component because it is passed during the initialization by the embedding WDA.
When the user selects a specific item from the flex component, an event is triggered by the component and the key of the select item is given back to the embedding WDA.
The following video shows the behavior of Sap Suggest:
With this approach you can change the usage type of the component simply assigning it a different BSP URL, using SAP suggest for materials, vendors, countries or whatever you need, just initializing the component with a different BSP URL.
Some considerations on the backend load are necessary, even if there are several tricks to improve performances and reduce the load:
- Activate caching options for the BSP (server/client side)
- Provide the correct URL to the BSP consumer in order to avoid the redirect due to BSP In-Depth: URL Mangling mechanism
- Do not request the BSP page whenever a single character is typed but use some smarter criteria ( eg. When the user waits more then x seconds)
- Consider the usage of SAP NetWeaver Search Engine Service (SES) as data provider
- Define XML tags as short as possible in order to produce the shortest XML document.
A technical remark is that in the actionscript code of an Adobe island it is not possible to use the HTTPService object otherwise the component will throw an exception once loaded by the WDA. I am not sure whether this is a bug of WDIslandLibrary library for Flex 2.0 (the ones I have used) or if this means that the HTTPService is already used internally for the communication between the WDA and the flex component, anyway to workaround this problem I had to use the URLLoader object which I think is less powerful but at the end does the job.
The only critical point I found is the interaction between FLEX and the WDA at the User Interface level, infact if you place a flex component above a WDA textinput component, if the size in pixel assigned to the flex component in the WDA is set to the minimum (dropdown closed) then, when the dropdown is open you will not be able to see it, the flex component will not overlap the WDA component, but it will remain in its own limited area.
If instead the size assigned to the flex component is the maximum (dropdown completely open), you’ll see an empty space between the two components.
In this case I think that the best solution would be to have a form or a tray completely flex based, extending the usage of flex not only to the SAP suggest component but also to its closest neighbour.
Another point of attention is that the focus is managed independently from FLEX and the WDA, for this reason you might have both the FLEX control and the WDA control focused; anyway this issue can be easily solved with some coding at the FLEX side.
By the way, someone might think that here at TechEdge we have some maniac obsession for search helps, we came up with the SAP Elegant Finder was born – it is the Open Source that makes a pleasure to search on Web Dynpro for ABAP some time ago and now we are back again with SAP suggest.. Uhmm.. Yes, I think we are a little bit obsessed 🙂
I have to thank Sergio Ferrari for his precious hints and for passing me the obsession for search helps!