Skip to Content

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:

support@neptune-software.com

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:

/wp-content/uploads/2013/07/ui51_249921.png

/wp-content/uploads/2013/07/ui52_249922.png

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.

/wp-content/uploads/2013/07/ui53_249935.png

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

/wp-content/uploads/2013/07/ui54_249936.png

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

/wp-content/uploads/2013/07/ui55_249937.png

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

/wp-content/uploads/2013/07/ui56_249941.png

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.

/wp-content/uploads/2013/07/ui57_249942.png

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”);

/wp-content/uploads/2013/07/ui5new_249944.png

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.

/wp-content/uploads/2013/07/ui59_249943.png

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

/wp-content/uploads/2013/07/ui510_249945.png

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.

/wp-content/uploads/2013/07/ui511_249946.png

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

/wp-content/uploads/2013/07/ui512_249947.png

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

/wp-content/uploads/2013/07/ui513_249948.png

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.

/wp-content/uploads/2013/07/ui514_249949.png

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)

/wp-content/uploads/2013/07/ui515_249950.png

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

/wp-content/uploads/2013/07/ui516_249951.png

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.

/wp-content/uploads/2013/07/ui517_249952.png

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

/wp-content/uploads/2013/07/ui518_249953.png

And your result should look like this

/wp-content/uploads/2013/07/ui519_249954.png

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 support@neptune-software.com. Happy SAPUI5 coding!

To report this post you need to login first.

18 Comments

You must be Logged on to comment or reply to a post.

    1. Njål Stabell 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 🙂  

      (0) 
    1. Njål Stabell 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 🙂  

      (0) 
  1. 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…

    -Satheesh

    (0) 
      1. Gopi Gopi

        Hi,

            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.

        ‘sap.m.app’ is null or not a object.

        Thanks,

        (0) 
        1. Njål Stabell 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 http://support.neptune-software.com/support/home

          And someone will look further into your problem.

          BR

          Njål

          (0) 
          1. Ivan Schenck

            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.

            Regards,

            Ivan.

            (0) 
            1. Njål Stabell 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

              (0) 
    1. Njål Stabell 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:

      BR

      Njål

      (0) 

Leave a Reply