Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
miltonc
Product and Topic Expert
Product and Topic Expert

Note:  The code for the sample application is now published.

It’s been a while since my last blog on SAP Mobile Platform 3.0 SDK (hereinafter referred to as “SMP SDK” or “SDK”).  A lot of new features have been added to the Windows SMP SDK in a short period of time. Chief among them is offline support for Windows.  I will be writing a series of 6 blogs talking about the various new features that have been included in the Windows SMP SDK.  Sample applications that illustrate the various new features will also be included along with the blogs…

This series of 6 blogs will cover the following topics.

On-boarding process

A key requirement in the use of SAP Mobile Platform runtime (hereinafter referred to as “SMP Server”) is registering the device with the SMP Server.  This process of registering a device with the SMP Server is known as on-boarding the device.  Without the on-boarding process, the backend data source is agnostic of devices that are connected to it.  So important features like push notification, usage collection, device logging etc. cannot be implemented.  With SMP Server, it is mandatory for new devices to register with the SMP Server before any CRUD operations can be performed.  SMP Server therefore can tie every CRUD operation to a single device. From an administrative standpoint, this is extremely valuable.  Key features like push notification, usage collection, device logging etc. can now be implemented.

So, how do I on-board a new device?

On-boarding a new device is accomplished by sending an HTTP POST request with the device information.

URL: http://<hostname>:<port>/odata/applications/v1/<application id>/Connections

Method: POST

Body:

<?xml version='1.0' encoding='UTF-8'?>

<entry xml:base="http://127.0.0.1:8080/odata/applications/v1/com.sap.windows/" xmlns='http://www.w3.org/2005/Atom' xmlns:m='http://schemas.microsoft.com/ado/2007/08/dataservices/metadata' xmlns:d='http://schemas.microsoft.com/ado/2007/08/dataservices'>

  <category term='applications.Connection' scheme='http://schemas.microsoft.com/ado/2007/08/dataservices/scheme'/>

  <content type='application/xml'>

    <m:properties />

  </content>

</entry>

In the first installment of Windows SMP SDK, the on-boarding process required the developer to create their own UI, understand the process flow and implement the logic behind the process flow.  While this is not hard, it can get quite time consuming (especially the UI part of the process flow).  With that in mind, the SAP developers created the LogonFlow control.  The LogonFlow control is a new user control (a user control is essentially a component with visual representation) that greatly simplifies the on-boarding process.  In the simplest of use cases, the developer can drag the LogonFlow control from the Toolbox in Visual Studio and assign a few required default values.  And on-boarding is complete!!

Adding the LogonFlow user control to the Toolbox

The LogonFlow control is packaged as a NuGet package and shipped with the SMP SDK.  Install the LogonFlow control NuGet package as a reference in your application from within Visual Studio.  NuGet Package Manager installs all dependent packages for you automatically.  In addition, the proper package for your platform is installed.

  • Rebuild the solution.
  • Right click on the Toolbox (View -> Toolbox if it’s not displayed) and select ‘Choose Items…’.

  • Click Browse to select the library from the bin\debug folder.  Note that you must have already added reference to the NuGet packages.

  • The LogonFlow control should now show up in your Toolbox.

  • Drag and drop the LogonFlow control into your .xaml file.  The properties for the user control can be from the properties page just like any other user control.

Using the LogonFlow control

In order to use the LogonFlow control, set the Name and ApplicationId property of the LogonFlow control.

In the code behind .xaml.cs file, assign a few required default values and you are done.

logonFlow.DefaultValues = new SAP.Logon.Core.RegistrationContext()

{

   ApplicationId = "com.sap.windows.flight",

   ServerHost = "54.80.15.207",

   IsHttps = false,

   ServerPort = 8080,

   CommunicatorId = "REST"

};

Further customizations…

The LogonFlow control can be highly customized.  Let us look at some of the ways we can customize the LogonFlow control.

Adding a background image – This can be done by selecting the Background property either using the properties page or setting the value directly in the .xaml page. 

<FlowEngine:LogonUI Name="logonFlow" ApplicationId="com.sap.windows.flight" Background="{StaticResource BackgroundImage}"></FlowEngine:LogonUI>

Adding a demo mode


<FlowEngine:LogonUI Name="logonFlow" ApplicationId="com.sap.windows.flight" HasDemoMode="True"></FlowEngine:LogonUI>

Option for end user to edit ApplicationId


<FlowEngine:LogonUI Name="logonFlow" ApplicationId="com.sap.windows.flight" CanEditApplicationId="True"></FlowEngine:LogonUI>

Enable Mobile Place


<FlowEngine:LogonUI Name="logonFlow" ApplicationId="flightbasic" MobilePlaceEnabled="True" ApplicationVersion="1.0" Email="demo@sap.com">

</FlowEngine:LogonUI>

You can also set the values directly in the Properties page as well…

In addition, the properties of the LogonFlow control can be modified in the code behind file.

logonFlow.CanEditApplicationId = true;

Adding a splash screen

<FlowEngine:LogonUI ApplicationId="com.sap.windows.flight" Name="logonFlow"

                           Background="{StaticResource BackgroundImage}">

   <FlowEngine:LogonUI.Splash>

      <DataTemplate>

         <Grid Background="{StaticResource SplashBackgroundBrush}">

            <Viewbox StretchDirection="DownOnly" Margin="12">

               <StackPanel VerticalAlignment="Center">

                  <Image Source="/Assets/SAP_Logo.png" Stretch="None" HorizontalAlignment="Center"/>

                  <StackPanel HorizontalAlignment="Center">

                     <TextBlock Text="SAP Sample Application Using FlowEngine" HorizontalAlignment="Right" Foreground="#666666" FontSize="24 Margin="0,24,0,12"/>

                     <TextBlock Text="© 2014 SAP SE. All rights reserved." HorizontalAlignment="Right" Foreground="#666666" FontSize="12" />

                    </StackPanel>

               </StackPanel>

            </Viewbox>

         </Grid>

      </DataTemplate>

   </FlowEngine:LogonUI.Splash>

</FlowEngine:LogonUI>

LogonFlow control events

The LogonFlow control has 2 events that a developer can handle.  One of them is LogonCompleted.  The other is DemoModeSelected (applicable only if HasDemoModeProperty is set to true).

The event handler for the LogonCompleted event has 2 parameters.  The first parameter is the sender object.  In this case, it is the LogonFlow control itself.  The second parameter is the LogonCompletedEventArgs object.  The LogonCompletedEventArgs object has a LogonCore property.  Typically in the event handler you will save the LogonCore object for later user and navigate to the main page of the application.

logonFlow.LogonCompleted += (sender, e) =>

{

   Globals.LogonCore = e.LogonCore;

   this.Frame.Navigate(typeof(MainPage));

};

LogonFlow control screen flow

As you can see, the LogonFlow control greatly simplifies the on-boarding process and at the same time introduces quite a few functionality without the developer having to spend any effort.

See you all in the next blog where I will be talking about push notification.

4 Comments