Experiences with SAP Gateway

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

Posts Tagged ‘SAPUI5

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

json1

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.

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

dateFormat

*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.
date_params
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.

Advertisements

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.

code1

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

batch_request

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 , , , , ,

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.

nested1_

nested2_

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.

app_struct

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/

Conclusion

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 , , ,

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

SAPUI5 data binding master slave with Gateway services

with 6 comments

Spent the day trying out the SAPUI5 framework, of all the new products and initiatives I saw at SAP TechEd last year, this library (collection) sparked my interest the most, mainly because over the years I have used reluctantly JQuery, DOJO, Prototype, YUI, ExtJS etc. on SAP projects, now there is something supported by SAP I can imagine a lot of that reluctance will disappear .

There is a lot in SAPUI5,  it will take me some time to get familiar and comfortable enough to start using on customer sites, I hope they don’t stop here and there is a lot more features and functionality to come. My first impressions are very positive, for some reason the data binding takes me back to a time before WD4A and after HTMLB, reminding me of the flexibility and freedom of BSP or an early WD4J.

It seems appropriate the first thing I developed with SAPUI5 was a data binding master slave solution, it was the first thing I learnt with WD4J and WD4A , it gives a good perspective of what is possible, next up will be MVC.

I have shared on google code a simple example of master slave data binding, it uses the ODATA.org Northwind service (see pic below) , I got it working with an association, but I also show in the code how it is possible using filters.

Written by rsol1

February 16, 2012 at 3:32 pm

Posted in Uncategorized

Tagged with , , , ,