sapui5 ajax,Getting started with Neptune and SAPUI5 Mobile

This guide will teach you how to create mobile apps with Neptune and the new SAPUI5 support that is being introduced in the 2.1 version of the Neptune Application Designer.

Here you can find the BETA transports for the SAPUI5 support of the Neptune Application Designer. You are free to install this on your system but be advised that this is still a BETA release and should not be used for productive solutions. Any issues you encounter should be addressed to:

EDIT: Here is a link to our employee lookup template ported to SAPUI5  Mobile Preview

We will use the flight database as it is part of all SAP ABAP installations. There are some major differences between developing SAPUI5 and jQuery Mobile apps. The first thing you will see is that with SAPUI5 all communication between the server and the client is based on json data that is connected to the SAPUI5 data models. Also the navigation differs between the two frameworks.

We do not deliver the SAPUI5 framework itself as this would for obvious reasons be an issue regarding IP and licensing. So by default we connect the library to the Cloud version but we provide you with the option to declare the path under which you have installed it under Application -> Settings:

If you have Neptune with SAPUI5 installed you will also have the NEPTUNE_FLIGHT_UI5_M application in your system. You should look at this app as it is the basis of this tutorial.

In the application tab you can notice that we do not have the Stateful box checked. In SAPUI5 we have less need of the stateful server functionality.

In the Library tab we have chosen the SAPUI5 framework and the sap.m library which is the mobile version of SAPUI5

The last thing we need in the application tab is to select a Theme. We have chosen BlueCrystal as that has the popular Fiori look and feel

Now go to the designer tab and have a look at the sap.m library and the completed application.

It consists of an App element and five pages

Use the “preview in wrapper” button to see how the application works. The landing page is a Home page with two tiles that are used for navigation. Use the settings functionality on the left side of the preview page to play around with different devices and rotation.

The home page consists of two tiles with basic navigation functionality. Also make note of the help menu for the SAPUI5 icons. Navigation to another page is done by simply using the App.to() function on the press event: App.to(“PageBook1”);

Next, look at the PageBook1 page. You will see that it has the model source GLOBAL which is a structure we have defined in the application class. Also it contains the Ajax ID UI5_INIT_BOOKING so that we know how to fetch the data from the server. This is a good example of how client server communication works with the new SAPUI5 framework.

In the HANDLE_ON_AJAX method of the application class you can see how the global structure (and the page model is filled)

Now look at the list and the inputListItems where you have a select for the Airline and the Ajax ID for loading the different Airlines in the system.

The search page looks like this (The smoker option shows how old this database is 🙂 )

Now to be able to send our selections to the server we need to bind the input fields to the GLOBAL structure. Select the attribute tab of the selAirline element. Use the binding button to the right. You will see that the selectedKey attribute is bound to the CARRID of the GLOBAL structure

All models can be fetched with a “reload” prefix to the model name. If you look at the search button in the footer (under the Right bar content). You will see that the press event is calling reloadListBooking. ListBooking is the result list under PageBook2.

The ListBooking General tab has connected the Model Source IT_SBOOK and has an AJAX_ID UI5_GET_BOOKING. Notice that we have checked the prevent reload at initialization so that the result list is only fetched when the user press the search button. To pass our selected input values to the server we also sendthe model PageBook1 (This will pass the GLOBAL structure to the server which now includes our selected inputs)

We wish to navigate to this page AFTER the ajax call is successfully completed. So we add the navigation script to the ajaxSucess method in the attribute tab

On the server side you can see that the Handle_On_Ajax method with the UI5_GET_BOOKING calls the SEARCH_BOOK method and uses the GLOBAL inputs to do a simple select and filling the IT_SBOOK internal table.

The attributes of the StandardListItem is bound to data we wish to show

And your result should look like this

We have now gone through the fundamentals of how the SAPUI5 navigation and models work with the Neptune framework. Remember to send any issues tosupport@neptune-software.com. Happy SAPUI5 coding!