Experiences with SAP Gateway

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

Posts Tagged ‘DataJs

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

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

Posting to Gateway with SAPUI5

leave a comment »

It has been a while since my last post, been busy building apps on Android.

Anyway thought I would quickly share how easy it is to post to SAP Netweaver Gateway using the SAPUI5 library.


To start with you need to reference the datajs library.


Once you have referenced it, you can use the library to post as follows.

For this example I extended the existing “New Contact” popup form on the Shell layout to capture the needed input, to get the values from the popup I did the following

var firstName = sap.ui.getCore().byId("firstNameTextField").getValue(),
lastName = sap.ui.getCore().byId("lastNameTextField").getValue(),
handle = sap.ui.getCore().byId("handleTextField").getValue(),
email = sap.ui.getCore().byId("emailTextField").getValue(),
status = sap.ui.getCore().byId("statusTextField").getValue();

I then used the values to create the data entry object

var contactEntry = {Handle: handle,
FirstName: firstName,
LastName: lastName,
Email: email,
Status: status};

Declare a variable the service uri

var serviceURI = "http://<host>:<port>/sap/opu/sdata/sap/<service>/Contacts";

Then build a request based on the form data and service uri, making sure you add the applicable XML headers

var request =
{ headers: {"X-Requested-With": "XMLHttpRequest",
"Accept": "application/atom+xml,application/atomsvc+xml,application/xml",
"Content-Type": "application/atom+xml",
"DataServiceVersion": "2.0" },
requestUri: serviceURI,
method: "POST",
user: "developer",
password: "ch4ngeme",
data: contactEntry };

Finally post the request, passing the callback functions
OData.request( request,
function (data) {
//Success Callback
sap.ui.commons.MessageBox.show("New contact saved successfully.", sap.ui.commons.MessageBox.Icon.SUCCESS, "Contact Saved", sap.ui.commons.MessageBox.Action.OK);
function (err) {
//Error Callback:

I am hoping with future releases this can be incorporated into the sap.ui.model.odata.ODataModel

Written by rsol1

April 5, 2012 at 3:34 pm

Posted in Uncategorized

Tagged with , , , ,