Skip to Content
Author's profile photo Former Member

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

EDIT: And here is a blog on how to create phonegap apps  Authentication with SAP Backend for SAPUI5 Hybrid Phonegap apps

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 function on the press event:“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.


  1. 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 to Happy SAPUI5 coding!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Deepak Jharkharia
      Deepak Jharkharia

      Hello Njal,

      Thank you for sharing.Appreciate and waiting for insights.


      Dee Joy

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Hi Njal,

      I really appreciate. Looking for some more good stuff from you.

      Thanks again.

      Warm Regards


      Author's profile photo Former Member
      Former Member

      Hi Njal,

                Informative and good stuff 🙂


      Aakash Bhatter.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Great that you liked it... second version of the BETA will be available soon.

      Author's profile photo Swapnil Shelke
      Swapnil Shelke

      Hi Njal,

      I request you to provide some more basics stuff for SAP MI.


      Swapnil S. S.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Swapnil,

      I am afraid that I am not very familiar with the SAP Mobile Infrastructure solution. So better that someone else blogs about that 🙂  

      Author's profile photo Heikki Kosonen
      Heikki Kosonen

      Hi Njål,

      excellent blog post. Any release date for the 2nd beta version?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Heikki,

      The release candidate is out now. You can download it from here. The dev team is working hard to get the the 2.1 final version ready these days (Scheduled for release end of August). We have also added some cool new features like local storage cashing in the final version 🙂  

      Author's profile photo satheesh Kumaran R
      satheesh Kumaran R

      Hi Njål,

          thanks for the informative blog,

      i have download and imported 2.1 in to my development system sucessfully.. 🙂

      when check the preview getting erreo as below

      503 Service Unavailable

      could u please help in this...


      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Satheesh

      Can you check transaction SICF and see if the neptune node is activated?

      Oh and RC2 was released this morning

      Author's profile photo Former Member
      Former Member


          When we run any of the applications it open in the browser and shows a white screen as Trial Version. The screen is blank.  It gives js error. But I do not the settings under Application menu to set the js path.

      '' is null or not a object.


      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Gopi,

      This is probably either an IE issue (try chrome if you haven't already done that) or that your firewall is blocking the ondemand UI5 from SAP.

      The IE problem is because the browser stops you from running the ondemand files together with your server content.

      Both issues is solvable by downloading a local copy of the SAPUI5 framework and place it on your SAP server (You then need to change the settings in the admin menu install the neptune developer role and you will see the transaction in your SAP menu).

      Hope this helps. If not, post a support ticket on

      And someone will look further into your problem.



      Author's profile photo Former Member
      Former Member

      Thank for the tip. This works like a charm. However it's a bit difficult to change the SAPUI5 library in the admin transaction when this transaction itself uses SAPUI5 but a direct entry in the table /NEPTUNE/GLOBAL solved this problem and now SAPUI5 is working with Neptune.

      Just found out that /NEPTUNE/SETTINGS is the correct transaction and not /NEPTUNE/ADMIN. Anyways... Works great.



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Ivan,

      I just wanted to mention that our next release will include the OpenUI5 since SAP open sourced it. This will greatly reduce the complexity of installing the framework and ensure versions of Neptune to work correctly with versions of UI5

      Author's profile photo Former Member
      Former Member

      Hi Gopi,

      I am having the same blank page issue .How did you resolves this?



      Author's profile photo Former Member
      Former Member

      What the main differences between Neptune and FIORI?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Juan,

      The short answer is that Neptune (a company I work for ) is a development tool for ABAP programmers and FIORI is a set of ready made applications from SAP based on javascript and NW gateway.

      Both use the SAPUI5 framework so you can have an identical user experience (Blue crystal theme)

      An option that I see many customers are looking into is combining both - Use FIORI where the app fits your needs and Neptune where you have cusom coding or where FIORI still does not have a ready made app. This is a good approach (in my opinion) if you have ABAP skills in your organization.

      FIORI is a great initiative where SAP shows that they are serious about changing the user experience of their solutions. This also pushes the SAPUI5 framework forward which is really great.

      So Neptune is a tool that enables ABAP developers to code solutions with an HTML5 frontend (including SAPUI5) and FIORI is a set of applications from SAP:



      Author's profile photo Opeyemi Ibiwoye
      Opeyemi Ibiwoye

      Hello Njal Stabell,

      I have seen the videos on Neptune for developing FIORI APPS/SAP UI5  Applications and it's great for Abapers, Been developing SAP UI5 with eclipse and SAP's WEB IDE for some time now and believe me it was quiet tasking for me, lost interest a lot of times.

      I have access to the DEV servers for some clients I work for, But I obviously cant install Neptune on these servers for my practice only. is it possible for me to get an IDE with Neptune.

      Hope to get a feedback from you soon...

      Author's profile photo Former Member
      Former Member

      backend system is different and frontend is different, hw to call the application class in NAD

      Author's profile photo Lavanya Ravindran
      Lavanya Ravindran

      Hi Everyone,

      I am new to SAP UI5 and Neptune.

      I have a requirement to develop mobile applications using Neptune and SAP UI.

      It will be great if you give me the list of software need to be installed for back end development with Neptune.

      Thank you very much in advance!


      Best Regards,

      Lavanya R