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:


startscherm.JPG

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;

2. create project.JPG

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

4a create datasource odataservice.jpg

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.

5.JPG

6 create superlist.JPG

A superlist .slmeta file is added into our project, it can be further configured by checking the right pane and click on datastructure.

7. open datastructure in right panel.JPG

We need to select the datasource first, this is our ODataService flight with in there, the FlightSet.

8 select datasource.JPG

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

select fields.png

After clicking confirm,view the right pane and set the alignment to ‘horizontal’ instead of ‘vertical’

10 set alignmetn to horizontal.JPG

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;

11 reorder columns and click per field example for flightdate.JPG

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.

12 upload image.JPG

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.

12b add img tag ontolist.JPG

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.

13 set image to image on slmeta.JPG

Set the ‘width’ of the image to 3%

We can preview the data now including our image. It will look like this;

14 preview slmeta incl image.JPG

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).

14b move back to homescreen.JPG

In the toolbox menu select the superlist icon and drag it onto the homescreen. Adjust the size to the surround screen.

15 in the toolbox, add a superlist to the home screen by dragging.jpg


View the superlist element properties in the right pane and click on the select metafile.

Select your flightlist.slmeta file and use confirm.

16 in the right pane, view the superlist properties and select the metafile by clicking and choosing your flightlist-meta. jpg.JPG

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:

end result.png

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.

To report this post you need to login first.

18 Comments

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

    1. Jan Laros

      Are you ashamed to tell everybody that I (a SALES minion) solved your Gateway service issue?! 😉

      Great session, Wim. Glad I attended and well written blogs too. Keep it up!

      (0) 
  1. Dheeram Kallem

    Snoep,

    Nice blog, I’m trying to implement using the demo gateway service.

    (https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZGWSAMPLE_SRV), either getting forbidden error or timeout error.

    If I give URL as https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZGWSAMPLE_SRV, I’m getting error as shown in the screenshot:

    12-17-2013 10-26-21 PM.png

    If I give the URL as “sapes1.sapdevcenter.com/sap/opu/odata/sap/ZGWSAMPLE_SRV”, then I’m seeing below error and the console displays below message:

    12-17-2013 10-27-37 PM.png

    Let me know what I’m missing here.

    Appreciate your time and help. Thanks in advance.

    Regards,

    Dheeram

    (0) 
    1. W. Snoep Post author

      Hi Dheeram,

      Thanks. Can you check if you can call the demo service in your browser directly, and to check if your gateway demo account is working, and see if you can login.

      Open this url: https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZGWSAMPLE_SRV/

      And next see if this url delivers the metadata for the service;

      https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZGWSAMPLE_SRV$metadata

      The same login should be supplied when configuring the url in the appbuilder.

      Hope it helps!

      Wim

      (0) 
      1. Dheeram Kallem

        Hi Wim,

        Thanks for quick response. Yes, the service works in the browser with same credentials and also I developed a iOS mobile application using the same service and credentials.

        I even tried creating new project and ODataService in a different system and got the same error.

        Please advise.

        Thanks,

        Dheeram

        (0) 
        1. W. Snoep Post author

          hi Dheeram,

          It might be you need to setup your proxy server to use in your appbuilder IDE.

          In the <appbuilder install dir>\ares project there is a file name ide.json. Try configuring a proxyserver here as visible below;

          “httpProxy”: {

             “host”:”myproxyserver”,

             “port”:8080,

             “upBase64″:””,

             “user”:””,

             “password”:”,

          }


          Wim

          (0) 
          1. Dheeram Kallem

            Hi Wim,

            Here is the interseting thing I found about the URL that it gets generated. If I use as if like https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZGWSAMPLE_SRV/$metadata/?user=XXXXX&password=XXXX, in the browser a authentication window pop-ups. And if I the URL to https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZGWSAMPLE_SRV/$metadata/?sap-user=XXXXX&sap-password=XXXX, then I can directly see the meta data of the service. You can see the parameters with which the authentication happens are sap-user and sap-password. I did same thing during mobile application development.

            Where can I change these parameters, so that sap-user and sap-password are passed?

            Once again thanks. I’ll try changing the proxy setting as suggested and let you know the outcome.

            Thanks,

            Dheeram

            (0) 
  2. Tom Van Doorslaer

    Aha! I was playing around with a JSOn service instead of an OData service.

    Naturally, I assumed that the JSON service had to be defined under “RESTful services”..

    *NOT*

    Turns out you can define JSON services under ODataQuery services, and it will work fine.

    Don’t put them under OData service however, cause that will just result in error.

    So, Summary, if you don’t feel like playing with GateWay, and you have a JSON service in the backend (using ZCL_JSON_DOCUMENT (see code exchange)), than you can use that JSOn service in the AppBuilder as a ODataQuery.

    (0) 
    1. Dheeram Kallem

      Hello Hemendra,

      I’m also trying to consume demo service and got stuck. When I try to use the service I’m getting authorized error(I’m able to access the same service from browser with same credentials).

      Please see my earlier replies on this issue.

      Thanks in advance.

      Regards,

      Dheeram

      (0) 
  3. Ravi Chaudhary

    Hi Wim,

         I am creating a tablet based app on appBuilder. I thought I was missing something in the code and therefore I wasn’t able to navigate through pages in my app. But later I tried to run the other sample apps provided by appBuilder (the one with images of apple n orange). Suprisingly I couln’t run them as well. I just see the main page when I run, but none of the controls work! (i.e. nothing happens when I click a button)

          I tried running it on mozilla which was very inconsistent (it could run the sample apps a very few times, but couldn’t run my app at all!).

          Also, my chrome is updated to the latest version. I do not understand why would it not be able to execute the apps.

    Regards,

    Ravi Chaudhary

    (0) 
  4. sridevi garapati

    Hi,

    Thanks for sharing Nice blog.

    But, when I am trying something like this by following this blog I was strucked after creating superlist .slmeta file .

    In this blog you mentioned Select and add columns .

    But I am in confusion which one who have to select to add columns.

    I am not getting any screen like Data Source For View.

    Please help me to solve this issue.

    Thanks&Regards

    Sridevi

    (0) 
  5. Daniel Chen Yao Khoo

    Hi Wim, thanks for sharing this. Truly appreciate this.

    We’ve tested this on Appbuilder and it worked. But having published the contents of the www folder to a web server, we were able to load the index.html page, but data from the gateway could not be retrieved. We’ve tested the data source URL and were able to obtain results on Chrome. Have also tried embedding user login and password to the URL to no avail. Did we miss anything?

    Cheers,

    Daniel

    (0) 
  6. Marius Stoica

    Hi Wim,

    I have a problem when I try to add the service into AppBuilder.

    Nor the link that u posted, nor the link that I have from my working web service do not work.

    Both of them work in the browser, but when I try to add them in the AppBuilder, I get one simple error 🙁

    “Error!”

    Nothing more.

    Is there anything I can try? Or do u have any idea what can be wrong?

    I tried the Proxy code that u posted, but doesn’t work either.

    Marius

    (0) 
    1. W. Snoep Post author

      hi Lucas,

      You’re right the download is nowhere to be found, and links are all updated automagically and now referrring to the Eclipse UI5 toolkit or the WebIDE. Correct, since right now in 2015, I won’t choose to use the appbuilder (if it might even be out there still as a product for download).

      I would make a quick start with the WebIDE you can use it freely on a HANA Cloud platform trial. You can find numerous entries on the webIDE on SCN, but also over here:

      Getting Started with SAP Web IDE

      Give it a try!

      Cheers,

      Wim

      (0) 

Leave a Reply