SAP and Xamarin

Challenges of Mobilizing SAP MM with Xamarin - Create Service in SAP Netweaver Gateway


Overview

In the previous post, we finished our last page, called Purchase Order Items Confirm. For the next few weeks, the plan is to implement the back-end features one-by-one, and in parallel we will link these features under our existing mobile app, SAP Goods Receipt. Today, I'm going to demonstrate you, how easy is to create a simple OData service within SAP Netweaver Gateway. Ready to go?

Then, let's get started!


Create New Project

Our first task is to create a new project in the transaction, SEGW by clicking on the highlighted button.


In the popup window, we are going to set a unique Project ID, a Description, and if you don't have any specific requirements, you can leave the rest of the properties as it was by default. At last, we need to assign it to a Package, or mark it as a Local Object.


Generate Project

In the next step, we are going to generate the project, namely generate the different helper classes, such as Model Provider Class, or Data Provider Class.


In the popup window, the system fills the different class names out automatically, so our task is only to approve them.


Register Service

In the next step, we are going to register our newly created service. In order to do this, first let's select a system (in my case the SAP ECC and SAP Netweaver Gateway is installed together, but it can differ in your case).

For the case, if you don't have any entry in the list, you can find the relevant settings under the following path: SPRO -> SAP NetWeaver -> Gateway Service Enablement -> Backend OData Channel -> Connection Settings to SAP NetWeaver Gateway -> SAP NetWeaver Gateway Setting.

At last, push the button, Register in order to register our service.


In the popup window, the system gives us a prefilled screen again, so we only need to assign a Package, or mark our service as a Local Object, and approve the settings.


If everything went fine, you should see the same green traffic light.


Test Your Service in Browser

Now our service is active and running, so there is nothing left, then Test it! In order to test it in the simplest way, let's click on the button, Maintain.


If you have more than one service, then let's select the one with the technical name, ZGOODSRECEIPT_SRV.


At the bottom side of the window, we can find the different testing tools: we can test it in simple browser or using the built-in Gateway Client (that is actually an OData client). For the sake of the simplicity, let's push the button, Call Browser that opens a browser up for us with the appropriate service URL.


We can go further and test it in a browser directly with the following service URL (please replace xxxx.xxxx.com corresponding to you system settings):

http://xxxx.xxxx.com/sap/opu/odata/sap/ZGOODSRECEIPT_SRV/$metadata

Since our service doesn't do anything (it's an empty service), we got the following results back:


Summary

Our service is up and running. It doesn't do anything, but from now on, we can simply use it to authenticate into our system.

Next, we are going to move back to our Xamarin mobile app, and try to call this service using the URL (http://xxxx.xxxx.com/sap/opu/odata/sap/ZGOODSRECEIPT_SRV/), to login into our system.

I hope, you could follow me, and everything went fine. If not, then don't hesitate to leave me a comment below!

Stay tuned, keep reading! If you want to get notification about the newest posts, follow us or subscribe to our newsletter! If you liked it, please share it! Thanks!

Challenges of Mobilizing SAP MM with Xamarin - Purchase Order Items Confirm Page


Overview

In the previous post, we finished the third page of our app, the Purchase Order Items page. In this post, we are going to continue our project, and start implementing our last page, called Purchase Order Items Confirm in the same way as before. The workflow is going to be very similar to the previous ones: we create a new page, build its structure in XAML, and implement its code behind as well. Ready to go? Then, let's get started!


Create a Purchase Order Items Confirm Page

First of all, let's create a new page for showing a confirmation page for an item of a Purchase Order, by right clicking on the folder, Pages >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Forms Xaml Page, and name it as PurchaseOrderItemsConfirmPage.


Construct the Purchase Order Items Confirm Page in XAML

This goes similar to the previous pages, namely we define a main StackLayout for holding the content of the complete page, and add a 15dip left&right padding, to ensure the content of our page doesn't climb down from the screen.

Then, we divide the page into three different sections: Purchase Order Item Header, Quantity to confirm, and a last one section for the Save Item button.

Now, we are going to build the Header section first, using two another sub StackLayouts: one for the Item Name and the Quantity Confirmation Ratio, and another for the Confirmed Price that we aligned to the end (right side).

For the Item Name and the Quantity Confirmation Ratio, we use almost the same label definitions as in the Purchase Order Items page.

Into the next sub StackLayout, we place a Label for holding the Confirmed Price. That's it! That was the Header section, now we can go ahead and talk about the next one.

In the Quantity to confirm section, we place a simple Label to display the text: "Quantity to Confirm" that we aligned to center, and under it an Entry for the user input.

The last section is about the Save Item button, so simply let's place a button into it!


Set Navigation to the Purchase Order Items Confirm Page

Now, it's time to go back to our previous page, named Purchase Order Items, and set the event, ItemTapped in the XAML to handle user interactions on the Purchase Order Items listview. We are going to handle it in the method, OnPurchaseOrderItemSelected().

In the event handler, first we simply clear the selections (without it the tapped item stays selected). Then with the help of Navigation.PushAsync(), we navigate to our newly created page, PurchaseOrderItemsConfirmPage, and send two parameters via its constructor: the Purchase Order, and the Purchase Order Item.


Implement the Code-Behind

As we defined our new page in XAML, and set the navigation from the Purchase Order Items Page to this page, it's time to implement the code-behind as well. First of all, we need two fields to store the received constructor parameters (remember, we send two parameters in the event handling method).

In the constructor, after the initialization, we simply save the received parameters into our read-only fields.

Then, reusing the received information, we construct the Title with the following format: "Purchase Order Item: 3000000003 / 10".

Next, we take care of the header bindings (Item name, Quantity Confirmation Ratio, and Confirmed Price) that we extract to a helper method, HeaderBinding().

Remember, we defined a button in XAML that we want to use later on to save the entered quantity. To implement its click event, now, we simply display a simple message, and navigate back to the list of Purchase Order Items (note: it will be reimplemented later).

In the extract method, HeaderBinding() we simply assign the Purchase Order Item info to the different labels.


Run Your Android and iOS Apps

Now comes the best part of building native mobile apps, namely let's BUILD and RUN it! :) I attached two screenshots about the running apps, one for the Android, and another for the iOS app.


Summary

It was a long story again, sorry for that! But don't forget: Hard work pays off! Now, we have a running app with four pages with a nice navigation among them! I hope, you could follow me, and everything went fine. If not, then don't hesitate to leave me a comment below!

Stay tuned, keep reading! If you want to get notification about the newest posts, follow us or subscribe to our newsletter! If you liked it, please share it! Thanks!

Challenges of Mobilizing SAP MM with Xamarin - Purchase Order Items Page


Overview

In the previous post, we finished the second page of our app, the Purchase Orders page. In this post, we are going to continue our project, and start implementing the next page, called Purchase Order Items in the same way as before. It's going to be a bit more complex, than the previous two pages, since the page contains a header, a listview, and a button at the bottom of the page that requires a bit more work!

Today lessons

  • How to build complex Xamarin.Forms pages
  • How to navigate between Xamarin.Forms pages back and forth
  • How to use IValueConverter


Create a New Model for Purchase Order Item

Since we are working on the Purchase Order Item page, we need a model as well. For this, let's create a model, named PurchaseOrderItem, by right clicking on the folder, Models >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Class.



For a Purchase Order Item, we are going to store the following info: Id, Name, Confirmed Price, Quantity Confirmation Ratio, and a Status.

namespace SAPGoodsReceipt.Models
{
    public class PurchaseOrderItem
    {
        public string Id { get; set; }
        
        public string Name { get; set; }

        public string ConfirmedPrice { get; set; }

        public string QuantityConfirmationRatio { get; set; }

        public PurchaseOrderItemStatus Status { get; set; }
    }
}


Extend the Purchase Order Model

Since, the Purchase Order Items belong to the Purchase Orders, we need to link them together like this: we are going to store a collection of Purchase Order Items for each Purchase Order. Then we add an additional property, named Total Price Confirmation Ratio.


Create an Enum for Purchase Order Item Statuses

In the model, Purchase Order Item we referred to a type, named PurchaseOrderItemStatus that actually is an enum.

To keep our projects transparent, we are going to create a new folder for our helper classes. For this, let's create a new folder, named Helpers under our PCL project, by right clicking on the project >> Add >> New Folder, where we are going to place the different helper classes of our app.



Now, let's create the enum, named PurchaseOrderItemStatus, by right clicking on the folder, Helpers >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Class.



Within the class, let's implement an enum with the followings: New, InComplete, and Complete.

namespace SAPGoodsReceipt.Helpers
{
    public enum PurchaseOrderItemStatus
    {
        New,
        InComplete,
        Complete
    }
}


Create a Purchase Order Items Page

Now, we are going to create a new page for showing the items of a Purchase Order, by right clicking on the folder, Pages >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Forms Xaml Page, and name it as PurchaseOrderItemsPage.


Construct the Purchase Order Items Page in XAML

This goes similar to the previous page, like we define a main StackLayout for holding the content of the complete page, and add a 15dip left&right padding, to ensure the content of our page doesn't climb down from the screen. Why we place the main StackLayout within ContentPage.Content? I will answer it later!

Then, we divide the page into three different sections: Purchase Order Header, Purchase Order Items, and a last one section for the Send Goods Receipt button.

Now, we are going to build the Header section first, using two another sub StackLayouts: one for the Vendor Name and the Number of Items, and another for the Ratio of the Confirmed Total Price that we aligned to the end (right side).

For the Vendor Name and the Number of Items, we use the exact same label definitions as in the Purchase Orders page.

The story is the same for the next one, but now instead of the Total Price, we are going to show the Ratio of the Confirmed Total Price.

The next section is about the List of Purchase Order Items that actually is ListView and we are going to define its ViewCell again, in the exact same way as we did in the case of the Purchase Orders listview.

The ViewCell definition starts with a simple StackLayout.

Then, we divide it into two section: a "left" and a "right" part.

On the left hand side, we place a Label for the Name of an Item, and display the Ratio of the Confirmed Quantity.

On the right hand side, we place a single Label for showing the Confirmed Price for the given Purchase Order Item.

In the last section, we only define a simple button, named Send Goods Receipt that we are going to use later on.


Colorize the Confirmed Price

As you remember, in the model, named PurchaseOrderItem we defined a property, called Status with an enum type that we will use to colorize the Confirmed Price. The rule is the following:

  • if the Status == InComplete, then the color is going to be Orange,
  • if the Status == Complete, then the color is going to be Green,
  • otherwise, the color is going to be the default color.

In XAML, to define the color of an object in this way, we need an IValueConverter implementation, let's say a StatusToColorConverter that is responsible to take a Status, and return a Color back. For this, let's create a new helper class, named StatusToColorConverter, by right clicking on the folder, Helpers >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Class.



The implementation of the StatusToColorConverter is very simple. Now, we only need to implement the method, Convert(), so we won't deal with the method, ConvertBack(), just return a null back. Within the Convert() method, we are going to construct a simple branch based on the received value (that is actually a PurchaseOrderItemStatus), and return a color back.

That's it!

namespace SAPGoodsReceipt.Helpers
{
    public class StatusToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
                              object parameter, System.Globalization.CultureInfo culture)
        {
            if ((PurchaseOrderItemStatus)value == PurchaseOrderItemStatus.Complete)
            {
                return Color.FromHex("#A6D800");
            }
            else if ((PurchaseOrderItemStatus)value == PurchaseOrderItemStatus.InComplete)
            {
                return Color.FromHex("#ED810E");
            }
            else
            {
                return Color.Default;
            }
        }

        public object ConvertBack(object value, Type targetType, 
                                  object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
    }
}

Now, it's time to jump back into the XAML definition. To use our newly created converter class, first we need to set its namespace and assembly. Then we need to build a simple ResourceDictionary, where we refer to it with the key colorConventer.

That's why, we used ContentPage.Content when we defined the layout of the page, because I knew that we are going to build a resource dictionary as well (ContentPage.Resources).

From now on, we can use it to define the color of our Confirmed Price label. So we bind the the ConfirmedPrice property to the Label's text, and the Status property to the Label's text color.

That's it!


Set Navigation to the Purchase Order Items Page

For this, we need to open up the XAML for PurchaseOrdersPage, and add a single line of code: ItemTapped = "OnPurchaseOrderSelected".

Now, there is nothing left, than implementing the method that we referred to in the XAML file, OnPurchaseOrderSelected().

When we tap on one of the item in the listview, the system will call this method. Our first task is to remove the row selection (otherwise the selected row will remain highlighted, when we navigate back to the list). Then we need to perform a simple navigation to our Purchase Order Items page, as initializing a new PurchaseOrderItemsPage with sending the selected Purchase Order as a parameter that then we add to the top of the navigation stack, using the Navigation.PushAsync() method.


Implement the Code-Behind

Now, as we are ready the navigation from the PurchaseOrdersPage to the PurchaseOrderItemsPage, we should catch somehow the received selected Purchase Order, and display its content on the page.

namespace SAPGoodsReceipt.Pages
{
    public partial class PurchaseOrderItemsPage : ContentPage
    {
        readonly PurchaseOrder PurchaseOrder;

        public PurchaseOrderItemsPage(PurchaseOrder purchaseOrder)
        {
            InitializeComponent();
            this.PurchaseOrder = purchaseOrder;

            ...
        }
    }
}

Then using the received Purchase Order, we feed the Title (simply display the PurchaseOrder.Id), the Header, and the Listview with data.

namespace SAPGoodsReceipt.Pages
{
    public partial class PurchaseOrderItemsPage : ContentPage
    {
        readonly PurchaseOrder PurchaseOrder;

        public PurchaseOrderItemsPage(PurchaseOrder purchaseOrder)
        {
            InitializeComponent();
            this.PurchaseOrder = purchaseOrder;

            Title = String.Format("Purchase Order: {0}", PurchaseOrder.Id);
            
            HeaderBinding();
            ListviewBinding();
        }
    }
}

In the Header section, we display the Name of the Vendor, the Number of Items, and at last the ratio for the Confirmed Total Price that we both get from the selected Purchase Order.

namespace SAPGoodsReceipt.Pages
{
    public partial class PurchaseOrderItemsPage : ContentPage
    {
        readonly PurchaseOrder PurchaseOrder;

        public PurchaseOrderItemsPage(PurchaseOrder purchaseOrder)
        {
            InitializeComponent();
            this.PurchaseOrder = purchaseOrder;

            Title = String.Format("Purchase Order: {0}", PurchaseOrder.Id);
            
            HeaderBinding();
            ListviewBinding();
        }

        private void HeaderBinding()
        {
            Name.BindingContext = PurchaseOrder;
            NumberOfItems.BindingContext = PurchaseOrder;
            TotalPriceConfirmationRatio.BindingContext = PurchaseOrder;
        }
    }
}

In the ListView, we simply bind the list of Items for the selected Purchase Order to our PurchaseOrderItemsListView.

namespace SAPGoodsReceipt.Pages
{
    public partial class PurchaseOrderItemsPage : ContentPage
    {
        readonly PurchaseOrder PurchaseOrder;

        public PurchaseOrderItemsPage(PurchaseOrder purchaseOrder)
        {
            InitializeComponent();
            this.PurchaseOrder = purchaseOrder;

            Title = String.Format("Purchase Order: {0}", PurchaseOrder.Id);
            
            HeaderBinding();
            ListviewBinding();
        }

        private void HeaderBinding()
        {
            Name.BindingContext = PurchaseOrder;
            NumberOfItems.BindingContext = PurchaseOrder;
            TotalPriceConfirmationRatio.BindingContext = PurchaseOrder;
        }

        private void ListviewBinding()
        {
            PurchaseOrderItemsListView.ItemsSource = PurchaseOrder.Items;
            BindingContext = this;
        }
    }
}


Extend the GetPurchaseOrders()

Finally, we arrived to the last part of our task today, namely we need to provide some sample data to our app (we need items for our Purchase Orders). We need to extend our existing method, GetPurchaseOrders().


Run Your Android and iOS Apps

Now comes the best part of building native mobile apps, namely let's BUILD and RUN it! :) I attached two screenshots about the running apps, one for the Android, and another for the iOS app.



Summary

It was a long story again, sorry for that! Hard work pays off! Now, we have a running app with three pages with a nice navigation among them! I hope, you could follow me, and everything went fine. If not, then don't hesitate to leave me a comment below!

Next, we are going to work on the Confirm Item page.

Stay tuned, keep reading! If you want to get notification about the newest posts, follow us or subscribe to our newsletter! If you liked it, please share it! Thanks!

Challenges of Mobilizing SAP MM with Xamarin - Purchase Orders Page



Overview

In the previous post, we finished the first page of our app, the Login page. In this post, we are going to continue our project, and start implementing the next page, called Purchase Orders in the same way as before. It's going to be a bit more complex, than the Login page, since the page contains a grouped list, and requires a bit more work!

Today lesson

How to feed a grouped listview with data in Xamarin.Forms


Create a Purchase Orders Page

First of all, we are going to create a new page for the list of Purchase Orders , by right clicking on the folder, Pages >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Forms Xaml Page, and name it as PurchaseOrdersPage.


Specify the Root Page of the Application

In the previous post, we defined a single-paged application (with our LoginPage), but now we have 2 different pages, and we would like to navigate back-and-forth between them.

For this reason, we are going to redefine the root page of our app (file App.cs), like this: instead of assigning the LoginPage itself to the MainPage of our app, let's instantiate a NavigationPage, with specifying the LoginPage as the initial page.

As a result, our apps still start with the Login page, but from now on, we are able to navigate back-and-forth among the different pages as well.

namespace SAPGoodsReceipt
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            // old definition: MainPage = new LoginPage();
            MainPage = new NavigationPage(new LoginPage());
        }
        ...
    }
}

So now, we can navigate between our pages, but using the class, NavigationPage has a side-effect, namely it places a navigation bar at the top of our pages as well, that we want to avoid on the login page, since we don't need navigation bar on this page.

For this, there is nothing to do, than setting the property of the NavigationPage class, named HasNavigationBar to false within the file, LoginPage.xaml.cs.

namespace SAPGoodsReceipt
{
    public partial class LoginPage : ContentPage
    {
        public LoginPage()
        {            
            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);
        }
    }
}


Set Navigation to the Purchase Orders Page

After wrapping our LoginPage into a NavigationPage, we are a step away from navigating among our pages. In order to navigate from the Login page to our new Purchase Orders page using the button, Login we have to catch the Clicked event of our button.

But how to refer to it? Button1, Button3, ButtonLogin, ...?

It's simple, first we need to provide a name, by setting the x:Name property of our button to, let's say LoginButton, in the XAML of the LoginPage:

Now, we can easily refer to our button and its events, and specify an event handler with a simple lambda expression. Within the lambda expression, now we are going to simply navigate to our new PurchaseOrdersPage.

Note

Later on, we will perform an authentication here before navigating to the next page (of course in case of success only).
namespace SAPGoodsReceipt
{
    public partial class LoginPage : ContentPage
    {
        public LoginPage()
        {            
            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);

            LoginButton.Clicked += (sender, e) => {
                Navigation.PushAsync(new PurchaseOrdersPage());
            };
        }
    }
}


Create Models

If you are ready, then we can go ahead and make some preparation for the Purchase Orders list.

To keep our projects transparent, we are going to create a new folder for the models. For this, let's create a new folder, named Models under our PCL project (by right clicking on the project >> Add >> New Folder), where we are going to place the different models of our app.



We are going to create two models, one for defining a single Purchase Order entity, and another for representing a group with a key and the list of its related items.

For this, let's create two models, named Group and PurchaseOrder, by right clicking on the folder, Models >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Class.



The Purchase Order model is going to be very simple, with a few properties, like Id, Vendor, GroupType, NumberOfItems, TotalPrice (note: we are going to extend it if it's appropriate).

The grouped listview approach in Xamarin.Forms originates from James Montemagno. The part of the solution is to create a complex model that we use for storing each K key with the associated list of T items.


Construct the Purchase Orders Page in XAML

Alright, now we have everything to build our Purchase Orders page directly in XAML.

First, we are going to set a title for our page, like Purchase Orders (this will be displayed on the navigation bar). Then we are going to place a ListView control into our XAML defintion that is used to display scrolling lists of data, like in our case the list of Purchase Orders, where:

  • we name it as PurchaseOrdersListView (so we are able to refer it later),
  • set the property IsGroupingEnabled to true (it's very important, if we want grouped list)
  • and at last, we set the binding for text of the group headers that is going to be the Group.Key property ("1. Today Deliveries", "2. Late Deliveries").

Since we want to use custom cells in the grouped listview, we need to define and customize the appearance of a cell for ourselves (we cannot use the built-in cells), in the following way:

We start the cell definition with a horizontal main Stacklayout that we place 15dip away from the left and right sides of the screen (to ensure the content won't slip off the screen).

Within the main StackLayout, we place two sub StackLayout centered vertically, the first will hold the Vendor and the Number of items, and the second one will hold the Total price that is aligned to the end (or with other words, to the right side).

So as I have already told you, in the first sub StackLayout, we place the infos: the Vendor and the Number of items. We are going to display both of them using simple Labels. To bind the content of the Labels to the properties of the Purchase Order model, we set the binding context like this: ...Text="{Binding Property_Name}"...

Then, we place another Label into the second sub StackLayout for displaying the Total price, where apply the same binding method (we map the content of the label to the PurchaseOrder.TotalPrice property).


Implement the Code-Behind

Now, we arrived to the last step, namely feeding the grouped listview with data that we are going to implement, in the code-behind file, PurchaseOrdersPage.xaml.cs.

To feed a listview, we need to use its ItemsSource property. Now, we simply delegate the work of collecting the required data to a method, named GetGroupedPurchaseOrders.

Note

Later on, we will extract this logic into a PurchaseOrder repository, since collecting the required data, it's not the view's responsibility.
namespace SAPGoodsReceipt.Pages
{
    public partial class PurchaseOrdersPage : ContentPage
    {
        public PurchaseOrdersPage()
        {
            InitializeComponent();

            PurchaseOrdersListView.ItemsSource = GetGroupedPurchaseOrders();
            BindingContext = this;
        }

        ...
    }
}

Since, we will get the Purchase Orders in list format from SAP, and we want grouped list of Purchase Orders, we need to group them before binding it the ItemsSource property. This takes place in this method:

  • first we save the simple list of Purchase Orders,
  • then we sort and group them based on the GroupType property ("1. Today Deliveries", "2. Late Deliveries"),
  • and at last, we create a collection of the groups.

As you can see, now we use an ObservableCollection instead of a simple List, since the ObservableCollection is data collection that provides notifications when items get added, removed, or when the whole list is refreshed, so we don't need to deal with refreshing the UI, when the collection changes.

To feed the listview with sample data, now let me simply create some sample records only in the memory.


Run Your Android and iOS Apps

Now comes the best part of building native mobile apps, namely let's BUILD and RUN it! :) I attached two screenshots about the running apps, one for the Android, and another for the iOS app.


Summary

It was a long story, but now we have a running app with two pages! I hope, you could follow me, and everything went fine. If not, then don't hesitate to leave me a comment below!

Next, we are going to work on the Purchase Order Items page.

Stay tuned, keep reading! If you want to get notification about the newest posts, follow us or subscribe to our newsletter! If you liked it, please share it! Thanks!

Challenges of Mobilizing SAP MM with Xamarin - Login Page


Overview

In the previous post, we finished the complete wireframe of our app. In this post, we are going to open up our Xamarin Studio or Visual Studio, and start implementing the pages using Xamarin.Forms. During the tutorials, I'm going to use Visual Studio, but you can follow me using Xamarin Studio as well.

Alright! Let's get started!


Create a Solution

First, we are going to create a new solution, named SAPGoodsReceipt, using the template Templates >> Visual C# >> Mobile Apps >> Blank App (Xamarin.Forms Portable).

If everything went well, you should see something like this within your solution:

  • a portable class library (PCL) project, named SAPGoodsReceipt that will contain our shared code,
  • an Android, named SAPGoodsReceipt.Droid and
  • an iOS, named SAPGoodsReceipt.iOS specific application project



Create a Login Page

To keep transparent our projects, we are going to organize our files into separate folders. For this, let's create a new folder, named Pages under our PCL project (by right clicking on the project >> Add >> New Folder), where we are going to place the different pages of our app.


Then our task is to create the Login Page itself, by right clicking on the folder, Pages >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Forms Xaml Page, and name it as LoginPage.


Specify the Root Page of the Application

As we have the LoginPage, we can set it as a root page for our app, since we want to start our app with this page. To do this, we have to modify our App.cs file in the PCL project as like this:

namespace SAPGoodsReceipt
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new LoginPage();
        }
        ...
    }
}


Construct the Login Page in XAML

Now comes the magic, namely we are going to build our Login page using XAML. To do this, let's open the file LoginPage.xaml, and modify its generated code as the followings!

First we are going to add a StackLayout to our XAML that is going to be our main container. Then let's align it to center, and give let's say 30 dip padding to it (for ensuring that its content is going to be enough away from the edge of the screen)

Next, we are going to add a sub StackLayout (for holding the title: "SAP Goods Receipt on Mobile") that we align to center, and place 60 dip away from the entry fields below.

Then we place two Entry fields, one for the username, and another for the password at which we set the property IsPassword to true.

At last, we add a Login Button into our main StackLayout.

Now, there is nothing left, then placing two Labels into our sub StackLayout, one for the main title, named "SAP Goods Receipt", with aligned to the end and with bold, 35 font size, and another for the subtitle, named "on Mobile", with aligned to the end and with medium font size.

That's it!


Run Your Android and iOS Apps

Now comes the best part of building native mobile apps, namely let's BUILD and RUN it! :) I attached two screenshots about the running apps, one for the Android, and another for the iOS app.

Yes, I know, it won't be my best design ever, but we are not done yet. Now, we only implemented the wireframe that we planned in the previous post.



What's next?

In the next few posts, we are going to implement the other pages as well with implementing the navigation between them, and then we are going to perform a complete redesign (using consistent primary and accent colors, font sizes, so on ...), in order to get a nice looking app with a nice minimal design!

Stay tuned, keep reading! If you want to get notification about the newest posts, follow us or subscribe to our newsletter!

If you liked it, please share it! Thanks!

Challenges of Mobilizing SAP MM with Xamarin - Mobile Wireframe

Introduction

In our previous post we have introduced our project idea about creating SAP MM on Mobile with Xamarin platform. In this post we go a little bit deeper and analyze the process of the Goods Receipt and create a mobile wireframe for supporting this process. Let's see how a simple Goods Receipt works based on a Purchase Order.

Mobile Workflow

We found 5 important steps in the workflow of creating a Goods Receipt. We want to support this process with our app:

  • 1. Sign In
  • 2. Check Open Purchase Orders
  • 3. Open a Purchase Order for the Current Delivery
  • 4. Check and Confirm the Items
  • 5. Send Goods Receipt

We associated a mobile screen for each step and we created a wireframe that shows our idea how we would like to help the work of the colleagues in the warehouse.

1. Sign In

If we want to work with an app that connects to SAP then we want to secure our data. The most obvious part of the mobile security that we authenticate to SAP with our SAP user and password.

2. Check Open Purchase Orders

If a vendor arrives with the delivery to the warehouse, we need to find the Open Purchase Order for the Vendor that we have expected for today. We need a list of the current purchase orders that we can easily associate with the vendor.

3. Open a Purchase Order for the Current Delivery

After finding the appropriate purchase order we can check it's details. Our task is to check and confirm the quantities of the materials on each line item. We need a simple list of items that we can confirm. We want to enter into each line item and close them. The screen below shows a state where we have already checked and confirmed the items, so they are closed. We want to use green color for showing that the confirmed quantity is the same as the quantity on the purchase order and we want to use yellow color if the confirmed quantity is different.

4. Check and Confirm the Items

The main reason of the Goods Receipt's process that we want to check the quantities of the delivered items and confirm the Purchase Order. We want to register the actual received quantities from the Vendor and to close the confirmation process for the current line item.

5. Send Goods Receipt

After we checked each item and saved the confirmed quantities for them, we can close the process by sending the Goods Receipt Document that we have created based on the open Purchase Order. The screenshot shows the final state: the purchase order is deleted from the list and we receive a message from SAP about the successful creation of the Goods Receipt.

Summary

In this post we went through the Goods Receipt process analysis and we created a wireframe. All of the screen elements have a role. During our analyses we made choices what is important for the process and what is not important. The screens resonate with our intent how we want to support it and what are the crucial pieces of information we need for an efficient Goods Receipt.

In the coming post we are going to work on our development based on the prepared wireframe starting with Xamarin Studio. Stay tuned!

Challenges of Mobilizing SAP MM with Xamarin - Introduction


Introduction

Information Technology is constantly changing and evolving. In this rapid world of change, we can not afford to be idle, and wait for miracles. We must learn and be up-to-date in Information Technologies, and we must keep up-to-date our IT infrastructures as well. What we find effective and modern today, can be obsolete tomorrow, which may lead to miss future opportunities!

For example in the early days, "Warehouse Management" happened in simple checked notebooks, after the Industrial Revolution, storekeepers used check out systems with punch cards to keep up the pace with their competitors, followed by, they started using bar-coding and inventory management systems to make their tasks easier, precise and efficient, today, we use modern ERP systems to automatize and integrate everything with everything, besides this we use RFID to keep track and find our goods in our warehouses.

Moving Forward

To keep up the pace with you competitors, you must move forward and break away from your computers. If you like it or not, mobile apps are integral part of business by now. Today, many companies already use business apps in Field Service, Human Resource, Inventory, IT, and Customer Relationship Management.

Using business mobile apps, we are able to make our processes more transparent, and get real-time feedback from our colleagues that accelerates and improves our processes, and eliminates human errors.

Challenges of Mobilizing SAP MM with Xamarin - Introduction

At Experties Team, Laszlo and me have decided to share our experiences with you about integrating Xamarin mobile apps with SAP. For this, today we have launched a blog post series - Challenges of Mobilizing SAP MM with Xamarin -, where we are going to build a native Android and iOS app that is integrated with the standard SAP MM (Material Management). During this blog post series, we will give you insights into:

  • designing and building native Android & iOS mobile apps
  • providing and consuming SAP OData web services
  • caching and synchronizing data back and forth

If you are interested in this adventure, there is nothing to do, than to subscribe to our newsletter and follow our guides regularly on every weeks.

Stay tuned!