Skip to Content

Having just installed and tested the GWPA plugin for Eclipse, I found the process of producing a basic application very straightforward. Even so, I thought it would be worth producing some content to cover the subject as there is nothing in this space at the moment.

I assuming that readers have Eclipse installed – I am using Juno Build 20130225-0426.

Eclipse plugin setup

If you do not have the GWPA and SAPUI5 plugins, obtain them here: https://tools.hana.ondemand.com/juno. Use the “Install New Software” function in Eclipse Help and point the installer to that address.

There are four sets of plugins, the ABAP and HANA Cloud parts are not needed to follow this blog.

Note #1: if you have the previous plug-in release, un-install it first. If you don’t, you can find that it overlaps with the new features and some tree-nodes, etc. in Eclipse tools will be duplicated but contain different content.

Note #2:I had a problem with the Android feature install, to get around this I simply deselected it from the install as I do not plan to build any Android apps right now.

Let’s Build!

Start Eclipse and open the new OData perspective.

          /wp-content/uploads/2013/06/perspec1_234149.png/wp-content/uploads/2013/06/perspec2_234150.png

Connect to Gateway

A Gateway server instance is required to provide a service catalog feed. GW server connections are maintained here:

          scat setup1.png Click the ‘G’ connection to create a new server connection

( If this view is not visible, open it from the window menu: )

                                                                                          scat setup0.png

Enter the server details an OK it. The connection will tested.

          /wp-content/uploads/2013/06/gwdetails_234156.png

If the connection establishes, you get a new link.

new conn.png

Click to expand the list…service list.png

Check that the service you are basing your application on is present – if not you will need to check the registered services in the server itself. We are going to use CATALOGSERVICE (if that’s not present you have a major problem).

Start a new project

          new project.png

Name it and choose the base type of project and template – we use HTML5 and opt for SAPUI5 template (desktop/browser style).

         project name.pngproj type.png

The next step is to set the service URL – enter it directly or use the Service Catalog browser to choose it.

          choose service - gw.png

               choose scat.png

Once chosen, the service model details are shown; you can check here that you do have the right service.

scat chosen.png

Adding views

The view wizard will now place a default view definition in front of you. The default entry point into an OData service is always a collection so the wizard sets the view type to ‘List’. It will then locate the ‘addressable’ entitysets in the model – if a set is not marked as addressable, it can only be reached via a parent entity.

This setting is also seen in the GWPA tools (‘clientPageable’?)

view 1 - set coll.png

We could jump straight to the Service collection but I will go in by the CatalogCollection.

Once I chose this, I need to chose the fields for the view with ‘Add’. The fields of the relevant entity, based on my set choice, will be presented for selection. I tick the ones I wish to display.

add fields.png

I get a lost of three fields but I want the columns in a different order, so I use the Move tool to reorder them.

move up.png

View 1 done, but that doesn’t show a lot. The meat of the data is in the service list, so lets create a view for that.

The view hierarchy follows the model hierarchy; we can only proceed to a new view if there is an association (relationship) from the current view to the next entityset, or if we wish to see the detail of a set member. This is only true for the template model, you have much more freedom once you start to write your own view controller logic.

Add a new view with the ‘Add’ button on the views column. A new view proposal appears – this one is a detail view for the catalog set member; that’s not what we want here.

add view 2.png     default view2 not wanted.png

First change the view type to ‘List’. There is a possible navigation to a lIst so this option is available, otherwise it would be Detail only.

view 2 change type.png

There is a navigation property called ‘Services’ which navigates to the service list. Name the view to match.

view 2 as list.png

Repeat the steps for selecting and ordering fields for the view.

view 2 added ordered fields.png

Finally we can add a third view which is a detail view of the service entity (you should be familiar with the steps now).

view 3 done.png

Finish the wizard, and your project is built. You should get something like this in the Project Explorer (not to be confused with Navigator, which is similar but not as detailed).

project built.png

My SAPUI5 libraries are locally hosted, so I need to alter the bootstrap script in ‘index.html’ so that the resources library link is correct for local execution. If you are working with libs hosted on the AS, I think it should work with no edits (our server installation of UI5 libs is in progress so I cannot confirm this time of writing).

/wp-content/uploads/2013/06/bootstrap1_234210.png

For the same “local” reason, I also need to edit the connectivity.js file because the GW server needs to be accessed by a proxy and the absolute address has been hardwired into the file.

          service url 1.png     service url 2.png

Further background for this local development environment can be found on DJ Adams post over on http://scn.sap.com/community/developer-center/front-end/blog/2013/01/31/getting-started-with-sapui5-alternative-guide (and thanks for the extra help Deej)

Make sure all of the changes are saved and we are good to go for testing.

Test

http://localhost:8888/ui5proj/Service%20Catalog/WebContent/index.html

or your equivalent pointing to the application WebContent, should yield:-

View 1

/wp-content/uploads/2013/06/ui51_234222.png

View 2

/wp-content/uploads/2013/06/ui52_234223.png

View 3

/wp-content/uploads/2013/06/ui53_234245.png

Note: you may get an http error if you drill down into detail on any ‘/IW*’ services. I think this is a problem with the key containing escaped values for the ‘/’ parts. Any custom services should be fine, as in the example.

This should provide a good starting point for learning the basic internals of SAPUI5 scripting.

To report this post you need to login first.

17 Comments

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

  1. Nagesh A

    Hi Ron,

    Here in service catalog some services are displayed with red cross marks, may i know why so???
    Because i am facing the same problem all my serivces in gateway are displayed like that and i am confused about what to do>>
    check the screen.

    Thanks

    Nagesh

    (0) 
    1. Ron Sargeant Post author

      Hi Nagesh,

      If you get an occasional “red x”, it is probably an error in the model/metadata.

      If they are all red, it is probably a login problem in the service backend (where the alias is pointing).

      If you double-click one of the entries it should tell you what is wrong with it.

      Cheers

      Ron.

      (0) 
      1. Nagesh A

        Ron,

        Thanks for your reply. I checked my services in gateway they are working fine and i didnot face any issue there. I got data from my backend system also.

        when i click on any service in eclipse it is showing following error.

        Thanks

        Nagesh

        (0) 
  2. Guru Prasad Karanam

    Hi Ron,

    Thanks for the tutorial. I was able to complete the tutorial and was also able to publish the app to Hana cloud successfully. Unfortunately, in the server version nor in the local version I am not able to get any output and even no errors also. If I have a static text like “Hello World” in the index.html file it comes out, but not the application data, not sure if I missed anything.

    With Regards

    Guru

    (0) 
  3. Sivaraman Thiru

    Hi Ron ,

    I am bit confused with all these terminology. Could you please advise me how do I make app for mobile using SAP netweaver gateway/Odata/Eclipse ..?

    I have SAP netweaver gateway system 2.0 installed and have Eclipse Kepler. Recently I have seen GWPA ..how and where can I get that ? and I am not able to install SAP Netweaver Gateway Plugin for Eclipse..can you please advise..

    Kind Regards

    Rama

    (0) 
    1. Ron Sargeant Post author

      Hi Siva,

      What you are asking for is a bit much! This article is not for beginners, so I am not surprised you are confused by terminology.

      The instructions at the start are sufficient to locate and install GWPA, but if you hit issues with the installation… 🙁 ask the Eclipse developers…

      There are plenty of articles and guides on SCN that will expand your knowledge – I’d concentrate on learning more about Gateway before worrying about building apps with GWPA. 


      Regards


      Ron.

      (0) 
  4. Sunitha Bai

    Hi Ron,

    Nice document and very useful. I did a starter application project by following Ur document, everything seems fine but actually I am not able to open the application in the internet browser. Its shows ‘No Data’.

    Capture.PNG

    I tried changing the server to local host which I used (Apache Tomcat server), then also im facing the same issue.

    Could you please help in solving this issue?

    Thanks in advance.

    Regards,

    Sunita

    (0) 
  5. Ringo Liebscher

    Dear Ron and all,

    Thanks a lot for the detailed introduction. As I get a blank result page only, I’m looking for friendly hints to find the solution.

    What already works / what I did:

    + Connected Eclipse Kepler to the Gateway Service Catalog.

    + Created the Starter Application with GWPA v1.1.1.

    + Adapted SAPUI bootstrap to https://sapui5.hana.ondemand.com/resources/sap-ui-core.js (works fine at least for my SAPUI5 examples without OData access).

    What does not work yet:

    – Get a blank page when starting the application via Eclipse -> Web App Preview or via Internet Explorer with Apache 2.2.

    – Get a “Service Unavailable” error when starting via Eclipse -> J2EE Preview (both in Run and Debug mode).

    Questions:

    ? I’m not sure about the required proxy settings. I tried with the generated code, with your suggested modifications to Connectivity.js (ER4 is the system ID, right?) and with the modifications to web.xml suggested at https://sapui5.hana.ondemand.com/sdk/#docs/guide/2d3f5fb63a2f4090942375df80abc39f.html none of it helped (using the data of the proxy for Internet connections at our company).

    ?  Where could I start to identify the problem?

    Thank you and best regards,

    Ringo

    (0) 
      1. Ringo Liebscher

        Yes, I fixed it. The problem was the cross-domain request – the web server is not allowed to respond to requests of the client (the browser) which demand resources from a third party (the SAP Gateway).

        The straightforward solution which worked for me is to configure a proxy forward in configuration file of the web server. That is an alias translating requests coming in e.g. for /mygateway/ to http://mygatewayhost.domain.com:8000/. The syntax for that depends on the particular web server.

        In the Eclipse project -> WebContent -> Util -> connectivity.js the var serviceUrl has to be set to include the alias you defined, e.g. if the web server runs on your localhost:

        var serviceUrl = http://localhost/mygateway/sap/opu/odata

        With these settings, the all requests of the client refer to one host and port (in this case localhost) and there is no cross-domain problem anymore.

        There are other options to overcome the problem which are described e.g. at

        http://scn.sap.com/community/developer-center/front-end/blog/2013/06/29/solving-same-origin-policy-issue-in-different-ways

        However I had difficulty with Apache and used nginx instead.

        Best regards & success,

        Ringo

        (0) 
  6. Sankar Kumar Chellam

    Hi Ron My question may not be related to the above post . But I need some basic advice from you regarding the neweaver gateway architecture for SAPUI5 mobile applications. We have developed SAPUI5 front end and Netweaver gateway services. We created  Classes and methods using functional modules. The development was carried out in ECC+NW gateway environment. Now we are trying to move the services to standalone gateway and connect to the sap ecc back end.  But we are getting error message that the fields (ECC related fields) are not in the netweaver gate way. In order to use standalone gateway should we not move the ABAP classess and methods to NW gateway ? I donot undertand the issue..or what are all the components should be kept in the standalone netweaver gateway environment. Thanks

    (0) 
    1. Ron Sargeant Post author

      Hi Sankar,

      With a hub, you connect to the backend service, you do not relocate it. Think about it: the backend service provides backedn data – why would it be on a server where the backend data for the provision model does not exist?

      All you need to do is republish the service from the hub, fetching the service definition from the backend. It’s identical to how you would have done it already, but the alias is not ‘LOCAL’.

      Regards

      Ron.

      (0) 

Leave a Reply