Skip to Content

Create an MDK Online App

test
0 %
Create an MDK Online App
Details

Create an MDK Online App

November 3, 2020
Created by
May 23, 2019
Use the mobile development kit editor to create a mobile app for online use case.

You will learn

  • How to create an MDK Online app using an existing template in SAP Business Application Studio
  • How to deploy an MDK app to Mobile Services and run it in a client

Prerequisites

You may clone an existing project from GitHub repository and start directly with step 4 in this tutorial.


Step 1: Get familiar with use case

With Mobile Development Kit, you can also create applications that are online or always connected and make calls to the backend servers for each action you take in the application.

Log on to answer question
Step 2: Create a new MDK project in SAP Business Application Studio

This step includes creating the mobile development kit project in the editor.

  1. Launch the Dev space in SAP Business Application Studio.

  2. Navigate to File menu → click New Project from Template.

    MDK
  3. Select MDK Project and click Next.

    MDK
  4. In Basic Information step, select or provide the below information and click Next:

    Field Value
    MDK template type Select Base from the dropdown
    Your project name MDKOnlineApp
    Your application name <default name is same as project name, you can provide any name of your choice>
    MDK

    The Base template creates the offline or online actions, rules, messages and an empty page (Main.page). After using this template, you can focus on creating your pages, other actions, and rules needed for your application. More details on MDK template is available in help documentation.

    If you see Cloud foundry token expired, continue without mobile services connection? message, then set the Cloud Foundry environment again by clicking at bottom left corner of your status bar to initiate a valid session and repeat above steps.

  5. In Service Configuration step, provide or select the below information and click Next:

    Field Value
    Service File Name <Provide any name of your choice>
    OData Source Select Mobile Services from the dropdown
    Application Id Select com.sap.mdk.demo from the dropdown
    Destination Select com.sap.edm.sampleservice.v2 from the dropdown
    Enter a path to the OData service Leave it as it is
    Language URL Leave it with the default value
    Enable Offline Choose No

    Offline supports only OData V2 while online supports both OData V2 and V4.

    MDK

    In this tutorial, server-side configuration for this MDK app were already done.

    Regardless of whether you are creating an online or offline application, this step is needed app to connect to an OData service. When building an Mobile Development Kit application, it assumes the OData service created and the destination that points to this service is setup in Mobile Services.

  6. After clicking Next, the wizard will generate your MDK Application based on your selections. You should now see the MDKOnlineApp project in the project explorer. As you have already opened the workspace, there is no need to open the generated project in a new workspace. Ignore the pop-up or click the cross icon to hide the window.

    MDK
Log on to answer question
Step 3: Get familiar with generated project structure

This is how the project structure looks like within the workspace.

MDK

These are the metadata definitions available in the editor and the format in which these metadata definitions are stored in the editor. Just to brief on some of these:

  • CreateService.action: This action binds the OData service to your application.

  • OpenService.action: This action allows your application to see the data within the OData service.

  • CreateOpenService Success & Failure Message action: Here are some messages showing up in the app on a successful or failure of application data service initialization.

  • Main.page: This is the first page of your Mobile Development Kit application that is shown. For this application we will use this as a launching page to get to application functionality. We will add the logout action to this page.

  • OnWillUpdate.js: MDK applications automatically download updates and apply them to the client without the end-user needing to take any action. The OnWillUpdate rule empowers the user to run business logic before the new definitions are applied. This allows the application designer to include logic to prompt the user to accept or defer applying the new definitions based on their current activity. For example, if the end-user is currently adding new customer details or in the middle of a transaction, they will be able to defer the update. The application will prompt again the next time it checks for updates.

  • Application.app: this is the main configuration file for your application from within SAP Business Application Studio. Here you set your start page (here in this tutorial, it is main.page), action settings for different stages of the application session lifecycle, push notifications, and more.

You can find more details about metadata definitions.

Open the application settings in the application editor by double clicking on the Application.app.

MDK

In MDK online use case, you need create and open service actions chained together for your online provider.

CreateService.action should be set at OnLaunch and success of this action should call OpenService.action.
MDK

You can find more details about OData actions.

Log on to answer question
Step 4: Deploy and activate the application

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, we deploy this application definition to Mobile Services.

  1. Right-click Application.app and select MDK: Deploy.

    MDK
  2. Select deploy target as Mobile Services.

    MDK

    You should see Deploy succeeded message.

    MDK
Log on to answer question
Step 5: Populate the QR code for app onboarding

SAP Business Application Studio has a feature to generate QR code for app onboarding.

Double-click the Application.app to open it in MDK Application Editor and click Application QR Code icon to populate the QR code.

MDKMDK
Log on to answer question
Step 6: Run the app in MDK client

Make sure you are choosing the right device platform tab above. Once you have scanned and onboarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

Follow these steps to on-board the MDK client.

Once you accept app update, you will see Main page being displayed and application data service is initialized.

MDK

Follow these steps to on-board the MDK client.

Once you accept app update, you will see Main page being displayed and application data service is initialized.

MDK

Once you have scanned and onboarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

Congratulations! You have successfully created an MDK online app and you are now all set to Create a Customer List Page in an MDK App.

Which action is being called at OnLaunch event in application.app file?
×

Next Steps

Back to top