This training will enable you to create your first simple mobile application using Neptune Application Designer (NAD) version 3.0 or higher 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.


The main designer environment consists of four major columns (from left to right): the NAD menu, the library area, the object area, and the object properties area. You can resize the NAD menu by clicking the  Toggle Navigation Size button. If you look at the library area in the designer, you can see that all libraries are available. This is because we have not yet decided which one to use.




Now, go to settings on the NAD menu. In the library tab, choose SAPUI5 and sap.m as your libraries. For this simple app that is enough. For more controls and features like graphing you might want to add the .me and .viz libraries as well.




Next we need to choose a theme for the application. For now just choose 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 control 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 controls also need this to be unique.




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




When you drag the page control onto the App control, NAD will ask you if the new object is supposed to be a subnode to the drop target. In the case of the MenuPage, it needs to be a subnode of the App so we confirm the subnode request.




To be able to navigate we will use a Tile. You will find this as a StandardTile control in the SimpleControls folder. Name it TileCustomer. Next go to the attributes section of the tile element. Here you can specify details about the control’s 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 control. 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 TileCustomer you created and go to attributes. 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 helper 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.


Since we named our new page for search 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 an 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 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. Name it MCOD1.




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 attributes 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. In order to connect our UI5 app to the application class, go to settings in the NAD and enter
ZCL_FIRST_APP_CLASS as application class.



Go back to the Application Designer and add a SimpleForm from the sap.ui.layout form folder and add it to the SearchPage. Then in the general section bind the SearchForm to model source GV_PAGE_SEARCH by pressing the bind 
button.



Right-click on the SearchForm and choose wizard -> Insert Fields Edit. A pop-up window will open where you can select for which parts of the model source you want to automatically create fields. In this case, the only option is to select the MCOD1 structure.

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 ListPage add a List control from the list folder and bind it to the model IT_KNA1.




Add a StandardListItem under the SearchList and bind field KUNNR from IT_KNA1 to the title in the attributes section.




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 (with attribute position=ContentRight) in the SearchPage and a Button for activating the search. Add "sap-icon://search" to the icon attribute.




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

On the general section 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 section of the SearchBtn 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 mentioned above.




To check if it is working activate the application and press the Run in Browser 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 only AFTER a successful ajax call.


On the ajaxSuccess event in the attributes section of the SearchList add App.to("ListPage");



Now add some more bindings in the listItem attributes section. In the description property of listItem you can define multiple fields from the source model. You can also use the concatenate & binding function using this button
. Here is an example:



Activate and test the solution in the wrapper preview.




Now add a new page (DetailPage) and a SimpleForm (DetailForm) underneath. Bind the DetailForm to model wa_kna1. Next right click on the form and use the wizard to add display fields.




A pop-up window will show up, asking you to select the fields from the model source that you want to automatically create in the DetailForm. Select fields with relevant data, e.g. KUNNR, NAME1, NAME2, ORT01 and click OK.




NAD will automatically create proper fields and labels as part of the DetailForm.




Now to be able to navigate from a specific list item to the DetailPage first change the type of the StandardListItem to Navigation.




On the press event of listItem use the JavaScript Helper in the editor: 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 add the Neptune specific getOnline + name of page 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 DetailForm so the server knows which request is coming from the client.




Also in the attributes section of the DetailForm we need to add the navigation to the DetailPage on the ajaxSuccess event.




If you haven't done so already, 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 3.x with the SAPUI5 mobile framework!