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

http://blogs.msdn.com/b/lightswitch/archive/2012/03/13/using-lightswitch-odata-services-in-a-windows-8-metro-style-application-elizabeth-maher.aspx

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.

Image

To start with you need to reference the datajs library.

jQuery.sap.require("sap.ui.model.odata.datajs");

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