Thanks for moving on to the 2nd blog in this series. For those just joined; this blog is the second in a serie of 2. The first can be found here. In the first blog we build a NetWeaver Gateway service exposing flight data.
In this 2nd part we will consume this data in a mobile app. We will build this app with the just released appBuilder. A WYSIWYG editor which is one of the ways to build a SAPUI5 application. The first time I saw the AppBuilder in a real live demo was when it was presented and demo-ed by Roel van den Berge on the SAP Inside Track Netherlands 2013.
Of course there are also other ways to build a SAPUI5 app. Since this blog assumes no handson experience yet with SAPUI5 or NetWeaver Gateway. The appBuilder is an easy way to get aquanted with the topic.
Install appBuilder
No need to repeat, it is all explained here; Installation is real easy. Basically it means; install node.js and download and run the appbuilder.
The editor runs in your browser.
Create project
Start the appbuilder, and it will open a url similar to this in your browser:
A start screen will appear with several test apps and also the option to create a new project.
Create a new project for a tablet;
After creating the project in the appbuilder, you will see an empty ipad screen.
Before we can show data on here we need to define the datasource.
Define datasource
To consume data we need to define the OData service from part 1 of this blog series as a datasource;
Open the pane on the left to view datasources. Use the 'new datasource' button to add a new one.
Use the full url to your service (without filter or collection).
Note:This is service we tested in the gateway client in blog series 1. To get the full url including hostname, go to your gatewaysystem and use /iwnfd/maint-service and use 'call in browser' to get the full url to your service.
Example
http://<NetWeaver GatewaySystemHost>:<Port>/sap/opu/odata/sap/ZSCN_FLIGHTDEMO_SRV
Define superlist metadata
To show the list of flight on the screen we need to connect our datasource to a superlist. The first step for a superlist is to define the superlist metafile.
Create it via the 'designers' menu on top.
A superlist .slmeta file is added into our project, it can be further configured by checking the right pane and click on datastructure.
We need to select the datasource first, this is our ODataService flight with in there, the FlightSet.
Select and add columns
Select the columns which you would like to add to your list view.
Select them by choosing the 'label' control for those columns, leave the others to 'none'.
Do pick 'label' for: curr/ price/ deptime/ cityto / cityfrom / flightdate / airline
After clicking confirm,view the right pane and set the alignment to 'horizontal' instead of 'vertical'
In the middle of the browser screen we see the layout of the future listscreen
Select the flightdate column and view its properties in the right pane.
Set it to these values;
Reorder the columns (by drag and drop on the screen) to the following order. And also set the width on the other columns:
1) flightdateset 'flightdate' to dateformat: 'shortdate', width 12%
2) depttime to width 10%
3) airline to 12 %
4) cityfrom to 18%
5) city to 20%
6) price to 8%
7) curr to 4%
Hint: Since we already connected the data to the screen, you could already press preview to get an indication how your list will look showing flight data.
Add an image
Click on 'save' and 'return'.
This will return you the 'home' screen.
In left pane select 'project' and browse to the 'img' folder and select this.
In the 'file' menu upload a picture to show along the flightlist.
Again in the project in the left pane, browse through our files and select the flightlist.slmeta and open it.
In the left pane select the image icon, and drag it onto the superlist table and position it as it is the most left column.
Select the image when it is dropped onto the screen and view its properties in the right pane.
Click the button at the 'src' property and in here set the path to your image in the \img folder.
Set the 'width' of the image to 3%
We can preview the data now including our image. It will look like this;
The superlist meta definition is fully done now. 'Save' and press 'return' to move back to the home screen.
Add the list to the homepage
Check in the project on the left and browse to the 'view' folder and make sure the HomePage.view.html screen is currently opened (blue).
In the toolbox menu select the superlist icon and drag it onto the homescreen. Adjust the size to the surround screen.
View the superlist element properties in the right pane and click on the select metafile.
Select your flightlist.slmeta file and use confirm.
The page will refresh now and it will show the flightlist on the homescreen.
Test
Click on 'run' in the top right of the window.
It will open in a new browser window and give you the ability to view portrait or landscape mode and zoom in or out.
The result will look like this:
Closure
Congratulations (again) on succesfully completing these steps! Thanks for reading until the end of this blog. Thanks for joining this blog series,
Stay tuned for more on SAPUI5 and NetWeaver Gateway.
Shout out to Twan van den Broek Yes, scrollable it is.