This training will enable you to create your first simple mobile application using Neptune Application Designer and the SAPUI5 mobile control library (sap.m).


After installing the NAD ABAP add-on make sure that your user has assigned the /neptune/developer role. 

You should now have the Neptune transactions in your user menu:



Go to the Neptune Application Designer transaction and give your application a name then press the create button. You will now receive a standard SAP transport request.





You will now enter the main designer environment where most of the front-end coding will take place.

If you look at the library area in the designer tab, you can see that all libraries are available. This is because we have not yet decided which one to use.




Now, go back to the Application tab and choose SAPUI5 and sap.m in the library. For this simple app that is enough. For more controllers and features like graphing you might add the me and viz libraries as well.








Next we need to chose a theme for the application. For now just chose the BlueCrystal theme that will give you the popular Fiori look and feel.




 The designer will now only contain the libraries you have chosen




The sap.m control library consists of sub folders that group the different controls. Layout, List, Table, SimpleControls and ValueHolders.

To create a mobile app you will need to drag an App controller from the Layout folder and place it under the HTML5 document. 

Then you need to give the app a name in the object area to the right on the screen. 


All SAPUI5 elements need to have a name and most controllers also need this to be unique.




The next controller to add is a page which also can be found in the layout library. We will create a menu page so name it MenuPage




To be able to navigate we will use a Tile. You will find this as a StandardTile controller under the SimpleControls folder.

Click on the attributes tab of the tile element. Here you can specify details about the controllers look and feel and also behavior like events.

To add an icon you can use the url scheme sap-icon:// and then the name of the Icon you wish to present.


The help button next to the icon attribute will show you a list of icons that is delivered with the UI5 framework.





Now it is time to activate the code. Press the activate button  and make sure you do not have any syntax errors. You can now preview the application. 


We recommend using chrome as it has great developer support such as the console. 


After getting the preview with wrapper to work you can add and play around with more attributes on the tile controller. It should look something like this:






From the tile we just created we want to set up an easy navigation to another page. First we need to create a new page that will be the landing page from the tile navigation.

Since this page will be used as an input page for searching for customers, just drag another page element into the object tree on the same level as the MenuPage and call it SearchPage


 


Click on the Tile you created and go to the attributes tab. You will see the press event and next to it a button for the JavaScript editor   .


When you click this button the JavaScript editor will pop up. If you right click in the text area you will get a menu. Navigate to SAPUI5 -> Other -> Navigation sap.m



You get a set of different navigation options but you only need a simple one for now. Delete everything except this part:


App.to("nextPage");


App = name of your sap.m.App object

nextPage = name of your page


Remember it is case sensitiv.


Now since we named our new page for SearchPage change this to:


App.to("SearchPage");


Now you can activate the code and test it in the preview and you should be able to navigate to a new blank page.



And here you get stuck as we do not have any means to navigate back. So lets add a Footer bar and a back button. Add a Bar under the search page and set position to "setFooter".




Under the Bar add a BarContent with position attribute ContentLeft. 




Drag a button from the SimpleControls folder under the BarContent. This will now be located on the left side of the footer. 
Add "sap-icon://arrow-left" to the icon attribute and "App.back();" in the press event.


You are now able to navigate back to the MenuPage so test it out in the preview


Before we develop any further on the user interface we should look into the back-end coding.

 

To create and application class press the Class Builder button this will take you to the standard class builder in SAP.
For Neptune Apps to be able to use the class you need to add the /NEPTUNE/IF_NAD_SERVER interface.


First you need to create some attributes. This small app will be able to send data from a search field, receive a list of the customers in the search result and details about a specific customer.

Create a structure for the search in SE11

 
Attributes that can be used by the binding in the designer need to be public.

For SAPUI5 based applications you need to use structures and Table Types

Add the following to your application class.




Now add a method for searching the customer table in SAP



Add the following code to the method

data: lv_mcod1 type kna1-mcod1..


* Build Search Term
  lv_mcod1 = gv_page_search-mcod1.

  translate lv_mcod1 to upper case.

  concatenate '%'
              lv_mcod1
              '%'
              into lv_mcod1.

* Get Data
  select *
         from kna1
         into table it_kna1
         up to 100 rows
         where mcod1 like lv_mcod1.

* Sorting
  sort it_kna1 by name1.



Next we need a method for fetching details of a single customer based on the customer number.

Add a new method with the following code:

* Get Customer
  select single *
         from kna1
         into wa_kna1
         where kunnr eq ajax_value.



You need to add AJAX_VALUE as a parameter for the method (This is where we will pass the customer number from the client later)





The last thing to do with the application class is to add ajax_id's to the handle_on_ajax method. We will use 'GET_CUSTOMER_LIST' and 'GET_CUSTOMER_DETAIL' as ajax id's in the designer.



For this small application we are done with the application class. Go back to the Application Designer and add a Form from the sap.ui.layout Form folder and add it to the search field. 
Then in the general tab bind the form to GV_PAGE_SEARCH by pressing the  bind button.




Right-click on the SearchForm and choose wizard -> Insert Fields Edit you should now have the following fields under the Form and automatically have bound relevant attributes



Add a new Page to the application. This will be the ListPage where we will show the result of the search.



Under the page add a List from the list folder and bind it to IT_KNA1



Add a StandardListItem under the List and bind KUNNR from IT_KNA1 to the Title in the attributes tab.



In the Formatter area under attributes add RemoveLeadingZero to the Title



To be able to load the list with items we need to send data to the server. Add a new BarContent in the SearchPage and a Button for activating the search



Now comes perhaps the most important part to get an understanding of about how Neptune works together with SAPUI5 and the models in the framework. For detailed information check out this Link and this Video


On the General Tab of the SearchList that is bound to IT_KNA1 add GET_CUSTOMER_LIST in the Ajax ID and press the model button  Here it is important to check SearchForm in the Send model check-box as this will send whatever the user typed in the search field back to the server.




Go back to the Attributes tab of the Search Button and add getOnline + name of the list you have bound the customer table to, so in this instance that will be getOnlineSearchList(); This is specific to Neptune coding and it should be explained in the links above.



To check if it is working activate the application and press the preview button (not the wrapper version). If you are using Chrome right click and press inspect element. Open the Network console and type something in the search field and press the search button. In the Network Response you should now see the JSON data coming back from the server




We have not navigated to the ListPage yet. To get smother transitions and be able to handle errors or empty search results etc. this solution requires that we navigate AFTER a successful ajax call.

On the ajaxSuccess event on the Attributes tab of the SearchList add App.to("ListPage"); 



Now add some more bindings in the listItem attributes. You can also use the concatenate binding using this button  Here is an example






Activate and test the solution in the wrapper preview



Now add a new page (DetailPage) and a Form under it. Bind the form to wa_kna1 and right Click on the form and use the wizard to add display fields (There will be a lot so you will probably want to delete some of them afterwards)





Now, to be able to navigate from a specific list item to the detail page first change the type of the StandardListItem to Navigation



Now on the press event use the JavaScript Helper and right-click in the script area and navigate to SAPUI5 -> List/Table (mobile)  and choose Get Selected Row.




 

We need to change the script a little to be able to get the customer number and pass it to the server for loading details in wa_kna1. Change yourField and the getOnline function.
It should look like this:

// List Get Selected Row
// Replace yourField with Field ID
var context = oEvent.oSource.getBindingContext();
var value = context.getProperty("KUNNR");

// Update data for a component
// Value is passed into the application class in AJAX_VALUE
getOnlineDetailForm(value);

Now we need to add the Ajax_Id to the detail form so the server knows which request is coming from the client


Also on the attributes tab of the DetailForm we need to add the navigation to the DetailPage on the ajaxSuccess event

 


If you haven't done so already clean up a bit of the fields so you show more relevant data and add a back button to the different pages.



Test your application it should be working and you have completed the basic training for Neptune Application Designer with the SAPUI5 mobile framework!