Develop SAP Mobile Apps with Sencha Touch and Cordova / PhoneGAP

This is Part 3 of the entire Overview.

First Part on how to create mobile App in SMP, please click here

Second Part on Configure SMP for back end SAP Connectivity, please click here

Before we proceed, you need to download few things to setup your development environment.

1. Download Sencha Touch

2. Download PhoneGAP or Cordova

3. Download a webserver (XAMPP is the one i use)

In our previous sessions, we’ve covered How we can configure SMP to connect with SAP Backend systems, and how to consume the web services using NW Gateway.

Now let’s have deeper look into SalesOrder Service and it’s metadata.

<Property Name=“SalesOrderID” Type=“Edm.String” />

<Property Name=“NetSum” Type=“Edm.Decimal” />

<Property Name=“Tax” Type=“Edm.Decimal” />

<Property Name=“Currency” Type=“Edm.String” />

<Property Name=“ChangedAt” Type=“Edm.DateTime” />

<Property Name=“Note” Type=“Edm.String” />

<Property Name=“CreatedAt” Type=“Edm.DateTime” />

<Property Name=“TotalSum” Type=“Edm.Decimal” />

<Property Name=“Status” Type=“Edm.String” />

<Property Name=“CustomerName” Type=“Edm.String” />

<Property Name=“BusinessPartnerID” Type=“Edm.String” />

** `These are the fileds returned to the web service` **

This service returns the above details, and in our front end app we need to store these values into local memory, in HTML5 these will be called as Store and defined as Models.

Sencha Touch:

Sencha is based on MVC Architecture, and its highly recommended to use Model, View and Controllers.

In our example we will define our view(Screen) to show the data returned for the SalesOrders. In the same way each request/response may have its own view(Screen) or some business validations may happen based on the need.

Here are some views we need to create for this example

Views:

Login view – User will enter Username and password

Selection View – Use Choice of selection

Order View – We will show the Sales Orders in the device

Sales Order Details View – Details of Sales Order (Line items, Material and Business Partner)

Sales Partner View – Display Sales Partner details

Material View – Display Material Details in the Sales Order

Graphical View – Display Charts using Sencha Touch GPL Version

Models and Stores:

Models and stores are important and need to be defined inline with our Metadata to store the return values from the Sales Order service. We can do all internal operations in the store once we’ve data including converting, sorting or writing some special business logic.

Profile:

     We can create profiles which suites for our needs, as an example user will open this app in Small resolution device such as phone, or user can open the same app in big screen such as tablet, we need to provide different look and feel as Tablet will have more space to show the details. This can be easily done with Sencha Touch (Please note that, our example will not show the profile concept)

I’ve uploaded all the source code to this location in GutHub, feel free to download, in the source code please change the URLs referring to your SMP3 and update your password to make it work.

Native Build:

Once you have the working example of this, then you are ready to compile this app into Native apps, you can setup each environment locally or simply you can use PhoneGap Remote build, which will generate all the native apps for you. for more information https://build.phonegap.com/

If you need any help / assistance on setting up this demo working please contact me via comment section below.