The video below introduces this open-source extension in just 2 minutes (or jump directly to download the source code).
The jQuery Mobile (jQM) toolkit is a great javascript library for developing HTML5 mobile apps. It can be used in combination with business server pages and it becomes a mobile solution that runs on any Netweaver server without need of middleware or other tools. This is a strong combination of technologies and Build your first Mobile web app using jQuery Mobile and ABAP - Part 1 Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features - Part 1 have already been posted here in SDN.
With some integration jQM can become even more interesting for SAP mobile application development. One specific functionality that is often needed in mobile forms is the equivalent to the F4 search help that we find in Dynpro and WebDynpro. We propose a widget for jQM that allows generic implementation of search help functionality. Like all jQM widgets it just needs to be included together with the main jQM javascript.
Then to add a search help to a input field it needs to have the searchhelp data-role to activate the widget. The mandatory data-options are the name of the search help and the name of the search help field in the results that will be transferred to the form field.
With this information the widget will modify the input field to have an extra button on the right that will open the search help.
When the button is pressed the widget will call a BSP service in the Netweaver server that will return a XML file with the search help fields meta information. With this information a dialog screen is created dynamically.
When the user fills some information and chooses Search a second call is made to the Netweaver server with the query information together with the search help name. The search help is queried in the server and a XML is returned with the results data. This information is formatted to be displayed in the screen and whatever line the user selects will transfer the output field to form input.
This widget is available as an open-source project in this repository. Our goal with this project is to develop widgets that make jQM SAP mobile development simpler and also to collect utilities and sample applications that can make learning and using JQM on Netweaver easier.
Currently it includes a sample application for transaction codes searching that can be installed on the free NW dev edition, and a larger sample application that runs on ECC and can be used to change the status of shipments (the video below shows that app in action). The repository also includes a patched jQueryMobile file that currently is needed in order to run with BSP urls.
Needless to say that feedback and contributions are very welcome and we also setup a mailing list for support and discussion on jQM/SAP development. Hope you like it.
Pedro Lima / Nuno Maltez
4 Comments
