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.

Connect to Gateway

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

          Click the ‘G’ connection to create a new server connection

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

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

If the connection establishes, you get a new link.

Click to expand the list…

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

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

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

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

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’?)

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.

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.

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.

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.

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

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

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

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

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

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.

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

View 2

View 3

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.