Skip to Content

Quick Start with the Mobile Development Kit (MDK)

test
0 %
Quick Start with the Mobile Development Kit (MDK)
Details

Quick Start with the Mobile Development Kit (MDK)

August 27, 2020
Created by
February 8, 2020
Create and examine your first offline CRUD mobile app using the Mobile development kit template connecting against a sample service.

You will learn

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

Prerequisites


Step 1: 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. If you do not see the Welcome page, navigate to View menu → Find Command → search with Welcome to launch the Welcome page.

    MDK
  3. In Welcome page, click New project from template .

    MDK
  4. Select MDK Project and click Next.

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

    Field Value
    MDK Template Type Select CRUD from the dropdown
    Your Project Name MDKApp
    Your Project Name <default name is same as Project name, you can provide any name of your choice>
    MDK

    The CRUD template creates the offline or online actions, rules, messages, List Detail Pages with editable options.

    More details on MDK template is available in help documentation.

  6. In SAP Cloud Platform Connection step, you will see your Cloud Foundry Organization and Space information. If you are not logged on yet, provide required credentials to retrieve your details. Click Next.

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

    Field Value
    Service File Name <You can continue with default name or 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
    Enable Offline Choose Yes

    For Offline OData capability only OData V2 is supported. OData V2 and V4 are supported for Online OData.

    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.

    Since you will create an offline based app, hence Enable Offline option is selected.

  8. In OData Collections step, select Customers, Products, SalesOrderHeaders and SalesOrderItems. Click Next to finish the project creation.

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

    MDK
Log on to answer question
Step 2: 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:

  • InitializeOffline.action: For offline applications, this action binds the application to the Offline OData server and downloads the required data to the offline store on the mobile device.

  • DownloadOffline.action and UploadOffline.action: Using app initialization, data is downloaded to the offline store. If you want to have the application download any updated data from the backend server or upload changed data to the backend server, these actions will be needed.

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

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

  • 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 app 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 app 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
Which of the following Mobile Development Kit (MDK) app service project templates provides a full offline application out of the box?
×
Step 3: 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.

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

MDK

You should see Deploy Succeeded message.

MDK
Log on to answer question
Step 4: 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 5: 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 the list of entities on the Main page, LOGOUT and SYNC options at bottom of the page and Offline store is being initialized. click either entity, it navigates to detail page, you can create, update, delete a record. This record gets saved to offline request queue database, navigate back to main page and press SYNC to upload local changes to the backend. Once the upload is successful, it will also download the data from the backend to the offline store to have same dataset on both ends.

MDK

Follow these steps to on-board the MDK client.

Once you accept app update, you will see the list of entities on the Main page, Logout and Sync options at bottom of the page and Offline store is being initialized. click either entity, it navigates to detail page, you can create, update, delete a record. This record gets saved to offline request queue database, navigate back to main page and press Sync to upload local changes to the backend. Once the upload is successful, it will also download the data from the backend to the offline store to have same dataset on both ends.

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 created an MDK app with just couple of clicks. You may now follow these tutorials to create an MDK app from scratch.

Which is main configuration file in an MDK project?
×

Next Steps

Back to top