Posting to Gateway with SAPUI5

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.

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

Advertisement