Skip to Content

Create an MDK Online App

0 %
Create an MDK Online App
// Explore More Tutorials

Create an MDK Online App

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 Web IDE
  • How to deploy an MDK app to Mobile Services and run it in a client

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: Set up the application foundation

This includes creating the Mobile Development Kit project in the Editor.

Launch the SAP Web IDE and select the MDK perspective by clicking on the icon in the left panel.

Right-click on Workspace folder and select New | MDK Base Project.


Enter the Project Name as MDKOnlineApp and click Next.


Leave the default values in Application Creation step as it is, click Next.

In Service Creation step, provide and select the below information:

Field Value
Name SampleServiceV2
Service URL /destinations/mobileservices
Application ID
Service URL

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


Server-side configuration for this MDK app were already done in this tutorial.

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 and SAP Cloud Platform.

Since you will create an online only based app, hence Enable Offline Store option is unchecked.

Click Check Service to validate the service properties. If all the details are fine, you will see a success message. Click Next.


Wondering how Service URL, Application ID & Destination Name were populated? Well, when you enabled Mobile Services, a destination mobileservices was created under Destinations in Cloud Platform Cockpit.

With help of mobileservices destination, SAP Web IDE fetches and populates all the MDK apps (of configuration template type as Mobile Development Kit) and their respective destinations.

You can look in SAP Cloud Platform Mobile Services Cockpit for the destination belongs to the MDK app by clicking on Connectivity feature.

More details on Sample Back End is available in
help documentation.

Leave the default configuration as it is and click Next and then click Finish.

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

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


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.

  • 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.

  • this is the main configuration file for your application from within SAP Web IDE. Here you set your start page (here in this tutorial, it is, 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 in the project explorer pane.


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.

You can find more details about OData actions.

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

So far, you have learnt how to build an MDK application in the SAP Web IDE editor. Now, we deploy this application definition to Mobile Services.

Right-click on the MDK Application in the project explorer pane and select MDK Deploy and Activate.


Let the default configuration as it is and click Next.


Filter Files will be filtered and ignored in web packing process.

Externals is a list of NPM modules to be excluded from the bundle.

Based on the mobileservices destination, you will find list of existing MDK application IDs , select the one you have chosen while creating the project in step 1


By default, automatically deploy option is selected, In other words, the application is automatically deployed from Mobile Services to your MDK client.

Click on QR code icon to populate QR code for app on-boarding.


On iPhone, open your camera app and start scanning the QR code, as shown below.


Click the toast message to launch SAP Mobile Services Client.

On Android, camera app does not support scanning the QR code. You can use Lightning QR Scanner app to scan it.


Click Open link


It will open SAP Mobile Services Client app.

Before you click on Start in client app, first finish the deployment from SAP Web IDE. Click Next.


You should see Application deployed successfully message in console log.

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

Below steps & screenshots were captured with iOS device. You will have similar on-boarding experience with Android as well.

The MDK client receives deployed metadata definitions as a bundle.

Click Start to connect MDK client to SAP Cloud Platform.


Enter your SAP Cloud Platform credentials and click Log On to authenticate.


Agree on End User License Agreement.


Choose a passcode with at least 8 characters for unlocking the app and click Next.


Confirm the passcode and click Done.


Optionally, you can enable Touch ID to get faster access to the app data, click Enable.


Click OK.


Now, you will see Main page being displayed and application data service is initialized.


You can now continue creating your first page to show customers list.

What is the authentication option for mobileservices destination in SAP Cloud Platform cockpit?

Next Steps


Back to top