Create an MDK Online App
- 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
You may clone an existing project from GitHub repository and start directly with step 4 in this tutorial.
- Step 1
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.
- Step 2
This step includes creating the mobile development kit project in the editor.
Launch the Dev space in SAP Business Application Studio.
Click Start from template on the
If you do not see the
Get Startedpage, you can access it by typing
>get startedin the center search bar.
Select MDK Project and click Start.
If you do not see the MDK Project option check if your Dev Space has finished loading or reload the page in your browser and try again.
This screen will only show up when your CF login session has expired. Enter your login credentials, click Sign in. After successful signed in to Cloud Foundry, select your Cloud Foundry Organization and Space where you have set up the initial configuration for your MDK app and click Apply.
In Basic Information step, provide the below information and click Next:
MDK Template Type
Basefrom the dropdown
Your Project Name
Provide a name of your choice.
MDKOnlineAppis used for this tutorial
Your Application Name
<default name is same as project name, you can provide any name of your choice>
Target MDK Client Version
Leave the default selection as
MDK 6.0+ (For use with MDK 6.0 or later clients)
Choose a target folder
By default, the target folder uses project root path. However, you can choose a different folder path
Basetemplate 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.
In Service configuration step, provide the below information and click Next:
Mobile Servicesfrom the dropdown
Mobile Services Landscape
standardfrom the dropdown
com.sap.mdk.demofrom the dropdown
SampleServiceV2from the dropdown
Enter a path to the OData service
Leave it as it is
Regardless of whether you are creating an online or offline application, this step is needed for the 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 set up in Mobile Services.
After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the
MDKOnlineAppproject in the project explorer.
- Step 3
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:
InitializeOnline.action: This action initializes the application data service .
InitializeOnline 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 MDK 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
OnWillUpdaterule 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.
Web: In this folder, you can provide web specific app resource files and configurations.
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.
- Step 4
So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy the application definitions to Mobile Services to use in the Mobile client.
Application.appand select MDK: Deploy.
Select deploy target as Mobile Services.
If you want to enable source for debugging the deployed bundle, then choose Yes.
You should see Deploy to Mobile Services successfully! message.
- Step 5
SAP Business Application Studio has a feature to display the QR code for onboarding in the Mobile client.
Click the Application.app to open it in MDK Application Editor and then click the Application QR Code icon.
The On-boarding QR code is now displayed.
Leave the Onboarding dialog box open for the next step.
- Step 6
Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and on-board again, you will be asked either to continue to use current application or to scan new QR code.
Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and on-board again, you will be asked either to continue to use current application or to scan new QR code.
In which file you enable or disable the offline store?