If you are working in a large corporate environment, chances are likely that your business data is in SAP systems. SAP is a leading enterprise software vendor. Traditionally SAP was a closed environment using proprietary UI solutions. More recently, however, SAP is opening its ecosystem by embracing open web standards and partnering with leading client framework vendors such as Sencha.

In this blog I will show how you can use Sencha Touch to create mobile apps that connect to SAP business data. Our integration will be based on SAP NetWeaver Gateway and Sencha’s SAP OData connector.

OData

So what is OData? OData (Open Data Protocol) is a set of conventions for URLs and data formatting for REST APIs. OData is an open standard and backed by Microsoft, SAP, IBM and others. Check out the OData site and the examples to get a quick impression of the capabilities and conventions of OData.

SAP NetWeaver Gateway

SAP NetWeaver Gateway is a SAP server add-on that allows mobile devices and other consumers to connect to SAP systems using OData-based REST services. The SAP Gateway front-ends various SAP systems like ERP, CRM, SRM and enables controlled read/write access to business data using HTTP and OData.

image

SAP graciously provides an online demo system where you can test-drive the SAP Gateway. Our mobile app is going to connect to this demo system,but you will need to go through the account registration process to get a demo account. Check out the getting started document. On SCN (SAP Community Network) you will find more information on SAP NetWeaver Gateway and you will also find examples of other integration scenarios, e.g. using SUP (Sybase Unwired Platform, renamed to SAP Mobile Platform in version 2.2) in combination with Sencha Touch.

Sencha SAP OData connector

Last year, Sencha and SAP announced their partnership in the mobile space. As a result, Sencha has delivered an SAP OData proxy which makes it easy for Sencha Touch developers to connect to SAP NetWeaver Gateway. Get the latest version of the Sencha SAP OData connector here! You will need the OData.js file for the sample app below.

Let’s get coding

We’ll build a Sencha Touch app that fetches TravelAgency data from SAP NetWeaver Gateway and displays them in a grouped List. The easiest way to get started with Sencha Touch is to include the hosted library from http://cdn.sencha.io.

Create the following app.html file that includes Sencha Touch JavaScript library and stylesheet:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.xml .imp font-weight: bold; color: red;
.xml .es0 color: #000099; font-weight: bold;
.xml .br0 color: #66cc66;
.xml .sy0 color: #66cc66;
.xml .st0 color: #ff0000;
.xml .sc-1 color: #808080; font-style: italic;
.xml .sc0 color: #00bbdd;
.xml .sc1 color: #ddbb00;
.xml .sc2 color: #339933;
.xml .sc3 color: #009900;
.xml .re0 color: #000066;
.xml .re1 color: #000000; font-weight: bold;
.xml .re2 color: #000000; font-weight: bold;
.xml span.xtra display:block;

Now, let’s define the Model for TravelAgency in model/TravelAgency.js, using the SAP OData proxy.

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Using the Model, we can define a store for TravelAgencies in store/TravelAgencies.js:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Please note that I included a grouper function. It returns the first letter of the Travel Agency’s name and is used to build a grouped list, which we will define next.

The TravelAgencyList view (in view/TravelAgencyList.js) lists the names of the agencies and groups them by first letter:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Finally, we use our building blocks to launch our application in app.js:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

It’s time to fire up your Chrome browser with the “disable-web-security” command line. This will suppress the Same Origin Policy which normally doesn’t allow you to do XHR request across domains:

image

Now you can view app.html in Chrome, showing the TravelAgencies fetched from SAP Gateway:

image

We have just built our first Sencha Touch app on top of SAP data! You can use the many UI components in Sencha Touch to create other views on your SAP data. Here are some examples:

image
image
image
image

Create, update and delete

So far, we have used the SAP OData connector to fetch data from the SAP NetWeaver Gateway server. However, we can modify server data just as well! In the following example we will create, modify and delete a Booking for a Flight in the SAP NetWeaver Gateway Flight service.

We’ll first define a Booking model:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Now let’s create a booking for a Flight. Please note that there are some required fields that we need to provide:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Once we have a Booking, we may update its properties:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

To delete the Booking, just use the erase() method on the model:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

The exact semantics and allowed operations on the SAP data are determined by custom configuration and coding in SAP Netweaver Gateway. In the Flights service, the Booking record is not removed from the database. Instead, the Booking is marked as ‘Cancelled’.

It’s time to wrap up! In this post we have introduced the Sencha SAP OData connector and provided examples how a Sencha Touch app can interact with SAP data through SAP NetWeaver Gateway. I hope this helps you get started with building SAP mobile apps with Sencha Touch.
Thanks for reading!

Resources

.right, .alignright float: right; margin: 0 0 10px 10px;
.left, .alignleft float: left; margin: 0 10px 10px 0;

View original post here:  

Building SAP mobile apps with Sencha Touch