Get OData end point using SAPUI5 Mobile & SMP 2.3

Things you need:

1. Eclipse, either Juno or Kepler

2. Cordova – Search in SCN for my blog on how to use Cordova, SAPUI5 Development with Android & iOS using Cordova             

3. SAPUI5 SDK

4. You need Base64.js which is needed for Basic authentication

It’s assumed that you have the necessary setup for development.  It is also assumed that you have setup an application ID setup on the SMP 2.3 bounded to an end point.

First create a new SAPUI5 Project.  You will need the Sever Host and Application Id for the OData end point from your SMP 2.3 Admin.

For example: Host Name: http://myserver.com:8080.  The format of the URL that you will eventually will be referring to is: http://<SUPServermachine>:8000/odata/applications/v1/<ApplicatinID>/Connections    

Add the following method in your view controller.js:

//Register the device that requires the use of an application id end point

        createConnectionId: function(usrName,pwd,appId,baseurl) {

               //Where baseurl = http://<SUPServermachine>:8000/odata/applications/v1/

               //where appId = <ApplicationID>

               //The user name and password can be passed on to SMP to get authenticated against LDAP or ActiveDirectory

            try {

                this.userName = usrName;

                this.pwd = pwd;

                this.appId = appId;

                this.baseurl = baseurl;

                this.method = “POST”;

                //register application

                   var accessInfo = usrName + “:” + pwd;

                   var url = baseurl + “/” + appId + “/Connections”;

                var xmlhttp = new XMLHttpRequest();

                xmlhttp.open(this.method,url,false);

                xmlhttp.setRequestHeader(“Authorization”, “Basic ” + Base64.encode(accessInfo) );

                xmlhttp.setRequestHeader(“Accept”, “application/xml,application/atom+xml”);

                xmlhttp.setRequestHeader(“Content-Type”, “application/atom+xml”);

                //xmlhttp.setRequestHeader(“X-SUP-SC”,”<SecConfigName>”);

                //var t = generateEnvelope();

                /****************** envelope *******************/

                var postData = “<?xml version=’1.0′ encoding=’UTF-8′?>” +

                                “<entry xmlns=’http://www.w3.org/2005/Atom‘ xmlns:m=’http://schemas.microsoft.com/ado/2007/08/dataservices/metadata‘ xmlns:d=’http://schemas.microsoft.com/ado/2007/08/dataservices‘>” +

                                “<content type=’application/xml’>” +

                                “<m:properties>” +

                                “<d:DeviceType>iPad</d:DeviceType>” +

                                “</m:properties>” +

                                “</content>” +

                                “</entry>”;

                /****************** envelope *******************/

                xmlhttp.send( postData );

                if( xmlhttp.readyState === 4) {

                    var tmpStr = “”;

                    var foundNode = “false”;

                    var xmlResponse = xmlhttp.responseXML;

                    //parsing application connection id manually

                    for(var i=0; i<xmlResponse.length; i++) {

                       // responseXML contains many node elements.  But the one you are interested in is this node: “ApplicationConnectionId”

                    }

                }//if readystate

            }//try

            catch(error) {

                alert(“Connection Id Error: ” + error.message);

            }//catch

        }

Once you are able to save the connectionID value, you are ready to connect to your datasource

in the controller.js file, add this method:

          //create the XMLHttpRequest connection with the proper header settings including parameters

        createEndPointRequestHeader: function(connectionid, method,username, password,odataquery) {

               //where connectionid is where you got from your first connection

               //where method are: PUT, GET, DELETE, POST

               //username and password – pretty obvious

               //where odataquery is your OData query format, for example:

          var url = “http://<baseURL>/<appliationID>/ServiceEndPoint?$filter=FirstName eq ‘John”;

            try {

               //the connectionid is added in the request header

                var xmlResponse;

                var accessInfo = username + “:” + password;

                this.xmlhttprequest = new XMLHttpRequest();

                this.xmlhttprequest.open(method,odataquery,false);

                this.xmlhttprequest.setRequestHeader(“Authorization”, “Basic ” + Base64.encode(accessInfo) );

                this.xmlhttprequest.setRequestHeader(“Accept”, “application/xml,application/atom+xml”);

                this.xmlhttprequest.setRequestHeader(“Content-Type”, “application/atom+xml”);

                this.xmlhttprequest.setRequestHeader(“User-Agent”, navigator.userAgent);

                //Request Header specific to OData Query

                this.xmlhttprequest.setRequestHeader(“X-SMP-APPCID”, connectionid);

                this.xmlhttprequest.setRequestHeader(“X-CSRF-TOKEN”, “GET”);

                this.xmlhttprequest.send();

                //process response body

                if( this.xmlhttprequest.readyState === 4) {

                    xmlResponse = this.xmlhttprequest.responseText;

                    //alert(xmlResponse);

                }

                return xmlResponse;

            }//try

            catch(error) {

                alert(“Create end point request header error: ” + error.message);

            }//catch

        }

You do need to delete your current connection id or reuse it.  But you have to manage this yourself.  To delete your current connection id on say, application exit, add this method in your controller.js:

//Delete a registered application connection

        deleteConnectionId: function(baseurl, connectionid, usrName, pwd) {

               //By this time, the parameters should start to make sense to you

            try {

                //alert(“asfasdfd”);

                var accessInfo = usrName + “:” + pwd;

                this.userName = usrName;

                this.pwd = pwd;

                this.baseurl = baseurl;

                this.connectionid = connectionid;

                var accessInfo = usrName + “:” + pwd;

                   var url = baseurl + “/Connections(‘” + connectionid + “‘)”;

                   //alert(url);

                   this.xmlhttprequest = new XMLHttpRequest();

                   this.xmlhttprequest.open(“DELETE”,url,false);

                this.xmlhttprequest.setRequestHeader(“Authorization”, “Basic ” + Base64.encode(accessInfo) );

                this.xmlhttprequest.setRequestHeader(“Accept”, “application/xml,application/atom+xml”);

                this.xmlhttprequest.setRequestHeader(“Content-Type”, “application/atom+xml”);

                this.xmlhttprequest.setRequestHeader(“User-Agent”, navigator.userAgent);

                //Request Header specific to OData Query

                this.xmlhttprequest.setRequestHeader(“X-SMP-APPCID”, connectionid);

                this.xmlhttprequest.send();

                //alert(this.xmlhttprequest.readyState);

                if( this.xmlhttprequest.readyState === 4) {

                    xmlResponse = this.xmlhttprequest.responseText;

                    //alert(“Connection Deleted Successfully”);

                }

            }//try

            catch(error) {

                alert(“Delete Connection Error: ” + error.message);

            }//catch

        }

Hopefully this is useful in one way or the other.  Thanks.