Experiences with SAP Gateway

"My foots always in my mouth i just can't stomach defeet" – Hilltop Hoods

Posts Tagged ‘ODATA

Working with OData Dates and Times

leave a comment »

When consuming Gateway services in JavaScript the task of working with dates and times is made even harder because of the different representations the objects take. In this blog I will highlight how Gateway OData dates and times are represented in both JSON and JavaScript and show by example how to use these values in SAPUI5 with the JavaScript Date Object and the Class sap.ui.core.format.DateFormat.

TLDR: You can use sap.ui.core.format.DateFormat to format and parse date and time objects when working with Gateway services, see http://jsbin.com/irewuq/9/edit for an example.

Below is the formatted JSON representation of Gateway Entity, similar to what you get using the Flight Service in the Demo Gateway system. eg http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2/FlightCollection?$format=json


Highlighted below are Date and Time passed in this service

"FlightDate": "/Date(1354665600000)/",  - JSON Date Object
"DepartureTime": "PT11H00M00S", - XSD Duration

FlightDate is represented as a JSON Date object, the value is the date in milliseconds since Unix Epoch.

Unix EPOCH time = Date(0) = Thu Jan 01 1970 00:00:00 GMT, this value is handy to know if your going to work with dates. http://en.wikipedia.org/wiki/Unix_time

DepartureTime is represented as an XSD:Duration Date Type

The letters in PT11H00M00 – P: Period, T: Time, H: Hours, M: Minutes see http://www.w3schools.com/schema/schema_dtypes_date.asp

Luckily if you use the ODataModel, datajs the OData library SAPUI5 uses has regular expressions and code logic which parses these values into JavaScript for us. Below is how this Entity looks parsed to JavaScript.

ODataModel values highlighted
FlightDate : Wed Dec 05 2012 11:00:00 GMT+1100 (AUS Eastern Daylight Time)
DepartureTime : { __edmtype: "Edm.Time", ms: 39600000}

FlightDate looks like a string, it is in fact the string representation of a JavaScript Date Object

The JavaScript Date Object supports the following ways for instantiating a date, if you are in the AEDT timezone then the following values will be equal.

var a = new Date('Wed Dec 05 2012 11:00:00 GMT+1100 (AUS Eastern Daylight Time)');
var b = new Date(1354665600000);
var c = new Date('2012/12/05');
a.getTime()===b.getTime()&& a.getTime()===c.getTime()

date.getTime() returns the number of milliseconds since Epoch.

Important to note is the Timezone offset when comparing dates, was +1100 AEDT in December, today its +1000 due to daylight savings.

new Date( )  = Sun Apr 28 2013 14:05:52 GMT+1000 (AUS Eastern Standard Time)
To get a consistent Timezone offset use the one from Epoch

var TimezoneOffset = new Date(0).getTimezoneOffset(); // -660 minutes
DepartureTime is a millisecond value wrapped in a edmtype object.

39600000/3600000 = 11 hours 00 min  // 3600000 is the number of milliseconds in an hour 60 minutes *60 seconds *1000 milliseconds

We can use the value in a javascript date object and it will give us the time since Epoch

new Date(39600000).toUTCString() = Thu, 01 Jan 1970 11:00:00 GMT
new Date(39600000).getUTCHours() = 11

SAPUI5 provides the Class sap.ui.core.format.DateFormat that can be used with JavaScript Date Objects for formatting and parsing dates and times.

The example i’ll give is formatting dates and times to formats you may want to use in a mobile application. eg
date1 time1
There is not much to it if you handle everything in UTC milliseconds, to do this we add the timezone offset when formatting and remove it when parsing.


*Note to SAPUI5 developers DateFormat.format has a to UTC flag, DateFormat.parse could use a from UTC flag.

The following is a list of the pattern elements in the DateFormat class, use them to derive the date and time formats you need.
I have shown you the JSON and JavaScript representations Gateway services have for date and time, given an overview of how to use some of the functions of the JavaScript Date Object, shown an example of how I use the sap.ui.core.format.DateFormat Class to format values for a mobile application which integrates with Gateway services. All that’s left is to share working code http://jsbin.com/irewuq/9/edit.

Written by rsol1

April 28, 2013 at 7:36 am

Posted in Uncategorized

Tagged with , , ,

Gateway Batch Calls from SAPUI5

leave a comment »

One of the features available with the latest release of the UI Development Toolkit for HTML5 (1.8.4) is the ability to batch multiple OData operations into a single call.

I thought I would share a quick example of how its done.

Below is a code snippet showing how to batch the creation of multiple Contact entities and POST them to SAP Netweaver Gateway. The code is part of a simple applications which displays Contacts retrieved from a Gateway OData call in a Table Control. The application has a button ‘Batch Save’, when the button is pressed the function below is called, on completion of the $Batch operation the Table Control shows the new Contact Entities.  The code also shows how easy it is to deep insert a second entity (CREATE_DEEP_ENTITY), Contact_Status represents a separate Entity which has a many to one relationship with the Contact entity.


Here is the HTTP Request, multiple operations wrapped up in a single Multipart MIME message.


And the results of the Gateway callback.

contact_list (1)


Written by rsol1

November 18, 2012 at 6:37 am

Posted in Uncategorized

Tagged with , , , , ,

SAP Netweaver Gateway Client

leave a comment »

I have been using the SAP NetWeaver Gateway 2.0 SP4 Pre-Packaged Trial Version for Linux for a couple of weeks now and one of the things I really like is the SAP Netweaver Gateway Client (trx /IWFND/GW_CLIENT). Very similar in features to the Firefox RESTClient, it allows you to create custom HTTP requests and directly test requests against a Gateway server and this is done within the SAPGui.

The thing that i like the most is the ability to create and re-use Test Cases.

As the SAP Help suggests, it enhances the Error Log

While the Error Log provides you with an overview of detailed context information about errors that have occurred at runtime and enables you to navigate easily to the affected source code, the Gateway Client allows you to reproduce the exact runtime situation that led to a particular error.

In the Error Log (trx /IWFND/ERROR_LOG) you can replay requests in either the Gateway Client or Web Browser.

Written by rsol1

September 19, 2012 at 6:40 am

Posted in Uncategorized

Tagged with , , , ,

Nested Views in SAPUI5 MVC

leave a comment »

Last month Steffen Schwark wrote a good blog on Structuring an SAPUI5 application with MVC, his blog inspired me to port a SAPUI5 application I had been working on to use MVC. I thought I would share the code here on SCN in the hope that others will do likewise and share their experiences.

The code for the application is available on Code Exchange or here as a zip. Follow the simple installation instructions below, when you run it should look something like the pics below.



Application Structure

The application has three main views

  • a customers view with master details and a google map, this view has 3 nested views, one of each type (xml, js and json)
  • a products view with master details filtered by categories
  • a shell view which houses the customers and products views

Each of the main views has its own controller, the customers and products views present data from OData Models.


Installing The Application

I developed the application locally using the IIS (Internet Information Services/Server) web server on my laptop. IIS is very easy to use

GOTO Control Panel\All Control Panel Items\Administrative Tools\Internet Information Service (IIS) Manager

Right click the PC -> Start, you have a webserver running locally

Follow Getting Started with SAPUI5 Installing the SAPUI5 SDK on Visual Studio 2010, the steps are very similar for IIS

Unpack or deploy the source to a folder name ‘nested’ and add as a website like step above

You should now be able to access the application using http://localhost/nested/


My original application had grown into a big ball of mud, all the javascript code was in a single file and it had become very hard to manage. By separating the concerns of my application into small pieces and following the MVC paradigm, the code is now a lot more flexible, easier to test, reuse and build upon.

I am very interested in hearing from others, please download and run the code and get back to me with any comments and suggestions. One thing I would like to hear from those more learned is in how best to implement MV* with SAPUI5, whether it is better to follow MVC, MVP or MVVM.

* The images included in the application were sourced using the Creative Commons search engines.

Written by rsol1

June 24, 2012 at 7:46 am

Posted in Uncategorized

Tagged with , , ,

How to: Windows 8 and OData Services in a Metro Style Application

leave a comment »

A couple of people have requested that I share how I created my Metro App.

The services I used were created on my SAP Netweaver Gateway system, I have recreated the application to use the ODATA.org Northwind service and use images from the Telerik demo site.

As I said in the original post I used the following  blog as a guideline, recreating the application I found there were a couple of notable differences so I will start from the beginning.

I downloaded Windows 8 Consumer Preview ISO image and then installed it as a WMWare Workstation, then I Installed Visual Studio 11 Premium edition.

Once installed and activated inside VS11  Click File –> Add New Project. Select the Split Application template under JavaScript -> Windows Metro style.

Then install the datajs package, Tools -> Library Package Manager -> Package Manager Console. Type ‘install-package datajs’.

I didn’t install the jquery package

Inside of default.html add a reference to datajs, I found I needed to add it before other references, there are dependencies in data.js to the sequence.

Next create the data.js code. I kept it simple and retained a lot of the code from the template.

In splitPage.html added some of the additional fields

 <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
 <h3 class="article-subtitle" data-win-bind="textContent: qty">
 <h3 class="article-subtitle" data-win-bind="textContent: price">

And that’s about it.

To get datajs working in Windows 8 with Netweaver Gateway XML OData services I had to make the following change to return window.DOMParser() instead of the ActiveXObject

The end result should look something like this


Written by rsol1

May 20, 2012 at 12:08 pm

SAPUI5 Gateway and Google Maps

leave a comment »

Lately I have been using the Google Maps API in an Android App I have been working on, thought I would see how easy it was to get the javascript API working with SAPUI5.

Turns out it was a lot easier than I expected, I was able to easily reuse some of the code java code.

Once again I have shared an example on google code, I have extended the Master Slave example with a simple Google Map (see pic below)

For those interested in the Android app

Written by rsol1

May 19, 2012 at 11:35 am

Windows 8 Metro Style Apps and Gateway

leave a comment »

Unfortunately I will have to keep this post brief.  Below are some screen shots from my first Windows 8 Metro Style Application consuming SAP Netweaver Gateway data.

At present there are not many examples of how to consume OData in a Metro Style application, even harder to find an example using javascript.

I used the following blog as a guideline


Once I got started it was actually very easy.

I did however have a slight problem getting Datajs to parse Xml, for which I luckily found a simple work around.

My mind isn’t completely made up about Windows 8 development, I think I will have to code a couple more applications first, I will say it is a completely different experience to the other tools and platforms I have been developing on lately, it is very familiar and very simple, which kind of scares me.

Useful Resources:

Writing code for Metro style apps (JavaScript): http://msdn.microsoft.com/en-US/library/windows/apps/hh770842

Data Model: http://msdn.microsoft.com/en-us/library/windows/apps/hh758329.aspx

Asynchronous programming in JavaScript: http://msdn.microsoft.com/en-US/library/windows/apps/hh700330

Debugging apps: http://msdn.microsoft.com/en-US/library/windows/apps/hh441474

Written by rsol1

May 7, 2012 at 12:43 pm