SAP and Xamarin for C# Mobile Cross

Platform Development Tutorial

Posted by Ramesh Vodela Jan 17, 2014
Ramesh Vodela
IVS consulting Houston
I'am a SAP developer with C# - I integrate SAP and non SAP environments using C# - In
the year 2002 I went to an Microsoft Event for Windows Mobile and Pocket PC development
and was impressed on how Visual Studio could be used to develop applications for Pocket
PC and Windows mobile and I could use Visual Studio C# to integrate pocket PC with SAP
using the .NET connector. As Pocket PC went obsolete and smart phone took over it was
only logical for me to try develop smart phones and SAP. I found that this was not that
easy. I tried Objective C for Mac(IOS), HTML5 and Jquery, java for Android and C# for
windows mobile. For long time C# windows developer Objective C and Mac development is
not easy - With the HMTL5 and JQuery I found that this was not very fast and found myself
having to comprise. I have also tried Eclipse based tool from SAP Sybase Unwired Platform
(SUP) - with this tool I could develop quick applications using WorkFlows - but if we have to
modify the generated code this was not easy. Also workflow applications run within a
workflow container this can have performance impact. I also tried Native Applications in
SUP - I could easily change Windows mobile code as this was C#( a year back tired It still
generates Windows mobile with no windows phone code generation) and I could use Visual
Studio to modify - For other native applications such as objective C and android - this was
not easy as I found the debugging tools were not that great like what is provided in Visual
Studio.
It was about a year back that I heard about Xamarin and went to seminar and realized that
this was tool I was looking for- Xamarin is C# based development tool and also an add on
to Visual studio that lets you develop applications for all 3 mobile platorms ( IOS, Android
and windows Phone). The aim of this tutorial is to show how to use Visual Studio with
Xamarin to integrate SAP and mobiles devices - If you want to learn the Xamarin tools you
can Visit the Xamarin.com web site for downloads and tutorials.
I will show two methods of Mobile applications 1) Mobile applications not using
MVVM(Model View View Model) - In this method we have a project for each type of mobile
device application doing the same task 2) Cross Platform Mobile Application using MVVM In this we have a core project that is common to call the 3 platforms (Andorid,IOS and WP)
where most of the coding is done and the individual UI projects reference this core project
with almost no coding.
If you want to integrate SAP with non SAP environments we need to expose SAP Services
and then invoked these services from the respective environments
A) Expose SAP Services - we can expose as REST service or Web Service - In this tutorial
we cover on how to Expose ABAP as REST Service use JSON format for POST method sending JSON format data as this is more difficult.
B) Develop Mobile application and invoke the REST service
A 1 Expose SAP ABAP as REST Service
A.1.1 Create a function Group

A.1.2 Create an RFC Function call - Right Click on Function Group and Create a function
call - We create RFC here - although RFC is not required we use RFC to keep this
general( you can expose this as web service if you like)
Give the FM a name Z_GET_COMPANY_NAME

A.1.3 Make this RFC FM

A1.4 Set Import and export parameters

The code the FM is in text file attachment - with heading A1.1. Code
Syntax Check and activate the FM

A1.2 Create a Rest Service handler that invokes an RFC

Start the transaction SE24 ( Class Builder) - To invoke a method as REST handler you have
to implement the infterface IF_HTTP_HANDLER method HANDLE_REQUEST

choose Create

For the code of the class method see the attachment under section code for A1.2
A 1.3 Create the JSON parsing utility - This is provided in the GITHUB web site - All you
have do is to implement JSON parsing utility - The url is provided in the attachment under
section A1.3 of the attachment
A.1.4 Create an End point for the REST Service - Stat the transaction SICF

Activate the Service - After that Select Test Service - This will open IE with the url - Make a
note of this URL as you will use this in Xamarin Project
B1 Create a General Android Mobile without MVVM
Start the Visual Studio with Xamarin installed ( see Xamarin.com for downloads ) - There
are two options Xamarin Studio which is quite similar to Visual studio or add on Visual
studio. Start Visual Studio and choose File - New - Project -

Choose Andorid Application Project

Go the folder Resources - Layout folder and double click on .Main.axml file which is screen
for the android mobile device - Delete the button Create the following text elements by
dragging from the tool box an dropping on the surface B.1.1 Medium Text View and change the Text Property to 'CALL SAP TUTORIAL'
B1.2 From the Text Fields drag Plain Text and drop it on the screen - in the Hint property
enter "Company Code"
B1.3 Drag and Drop a button and change the Text to CALL SAP
B1.4 Drag and Drop a textview and clear the Text ( we will populate the SAP REST CALL
RESult ) - The Rest Service takes Company Code as input and gives the companyName - so
we display company name here
The resulting screen will look as follows

The XML coding for this screen is shown in the attachment under code for section B1.4
having done this - We have to do the coding in Activity1.cs - The code for this given in
attachment under section B1.5
Having done this you can compile and Press F5 to execute it - (assuming that you have an
emulator set up) the Andorid screen show up - you enter the compay code and Click on
"CALL SAP" Button - This will make the REST CALL and return the Company Name will will
be bound to the Text View below the button
B2 Create a Cross Platform Mobile Application using MVVM - The Main feature of this
approach is we do most of the coding in common project and do the bindings in respective
platform dependent UI projects - which almost have no code - From solution architecture is
very good as you have one common code location with little code in the UI projects
B2.1 Start Visual Studio and choose C# Windows and choose Portable Class Library
Project - Delete the class1.cs file that is created

Choose all the platforms that you will need - Right Click on the references folder and from
the options choose manage NUGET and search for "mvvmcross:
The figure below shows all the plugins that we need to install for this project

The FirstViewModel.cs is the file that is created will be our Model View - Change from the
attached file under section B2.1 Core Library Code As I could not attach additional images
I will describe the steps
We also have to create Services folder and implement a services class which will have the
routines to call SAP REST Service - This code is given in section B2.2of the attachment
B2.2 Compile the Code
B3.1 in the Same Solution create an addition project - this time choose Andorid
application.
B3..2 Remove the Activity1.cs and Main.axml files
B3.3 Right Click on references and Add reference to the Core project created in Section B2
B3.4 Right Click on References and choose manage NUGET and all the plugins that we
added earlier in the Core PCL project
B3.5 change the Firstview.axml code to that provided in the attachment under section B3.5
The link between the Variables that you see on the screen in AXML file View are linked
to the variables in Model View in CORE project ( association by name ) - For example when
you click the Button with name Button1 - there is a variable Button1 in FirstViewmode.cs in
the Core project that is associated with a call to handle the button click - in the same way
text fields are found to variables that are read ( when the user types in ) and populated in
CORE project which gets transferred to the screen.
After you compile this project you can execute and see the same result - The important
point is there is no coding in the Android project
B4.1 Create a new project in the same solution and this time choose Windows Phone Follow the same steps as we did in android for adding reverences. When we add NUGET There is todo-mvvmcross folder with some text files giving the code you have to copy and
paste it as directed there - Modify the firstview.xaml to that given in section 4.3 and modify
the code in the file App.cs as shown in section 4.2 of the attachment..
Make the Windows phone project as the Current Project by right Clicking on the project and
execute the project In a similar fashion we can create IOS project in the same soluiton
The important point is we calling SAP REST Service only in the CORE project and most of
the coding is the CORE project - The UI project has a very little code which device specific
Additional Example Work
When we develop any application we usually have an USER registration process - This
mean Create a new user, if successful you are directed to application pages - Once A user

is created you can login to use the application - When the user forgets the password - you
request for password be emailed to you - I have developed this process using MVVM and
developed android ui and posted as an short video on youtube - The url for the video is in
the attachment under section URL at the end - This again uses REST Services which are
based on SQL server and hosted on IIS on windows - I have written a REST handler in C# 423 Views 0 Comments PermalinkTags: .net, integration_architect, bbp_rfc_read_table, c#.net;,
mobile_business_model