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
You get a set of different navigation options but you only need a simple one for now. Delete everything except this part:
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:
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.
Before we develop any further on the user interface we should look into the back-end coding.
For SAPUI5 based applications you need to use structures and Table Types
Add the following to your application class.
data: lv_mcod1 type kna1-mcod1..
* Build Search Term
lv_mcod1 = gv_page_search-mcod1.
translate lv_mcod1 to upper case.
* Get Data
into table it_kna1
up to 100 rows
where mcod1 like lv_mcod1.
sort it_kna1 by name1.
* Get Customer
select single *
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)
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.
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
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.
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!