SAP and Xamarin for C# Mobile Cross Platform Development Tutorial

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# –