Skip to Content

Start Your MDK Application in the Editor

Use the MDK editor to create a multi-channel (mobile and web) application.
You will learn
  • How to create an MDK app using a template in SAP Business Application Studio
  • How to deploy an MDK app to Mobile Services and run it offline enabled in a mobile client
  • How to deploy an MDK app to Cloud Foundry and run it as a web application
jitendrakansalJitendra KansalAugust 5, 2022
Created by
jitendrakansal
April 23, 2019
Contributors
jitendrakansal
jitendrakansal
jitendrakansal

Prerequisites

  • Step 1

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

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

    2. Click Start from template on Welcome page.

      MDK

      If you do not see the Welcome page, you can access it via Help menu or via View menu > Find Command > Welcome.

    3. Select MDK Project and click Start.

      MDK

      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.

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

      Field Value
      MDK Template TypeSelect Base from the dropdown
      Your Project Name Provide a name of your choice. DemoSampleApp is 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
      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.

      This screen will only show up when your CF login session has expired. Enter your login credentials, click Login icon and select the org & space where you have set up the initial configuration for your MDK app.

      MDK
    5. In Service configuration step, provide the below information and click Next:

      Field Value
      Data Source Select Mobile Services from the dropdown
      Mobile Services Landscape Select standard from the dropdown
      Application Id Select com.sap.mdk.demo from the dropdown
      Destination Select SampleServiceV2 from the dropdown
      Enter a path to the OData service Leave it as it is
      Enable Offline It’s enabled by default
      MDK

      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 MDK application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services (for Mobile consumption) and in Cloud Foundry cockpit (for Web consumption).

      Enable Offline option allows MDK mobile app to be offline enabled. This configuration will be ignored on Web environment and the MDK web application will be treated as online only.

    6. In Data Collections step, select Customers, Products, SalesOrderHeaders and SalesOrderItems data collections. Click Finish.

      MDK

      After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the DemoSampleApp project in the project explorer.

  • Step 2

    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 Mobile applications, this action binds the application to the Mobile Services Offline OData server and downloads the required data to the offline store on the mobile device. For Web applications, it will initialize the service to be consumed in online mode.

    • DownloadOffline.action and UploadOffline.action: These actions are applicable to Mobile client only. Using Mobile 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 MDK application that is shown. For this application you will use this as a launching page to get to application functionality.

    • OnWillUpdate.js: This rule is applicable to Mobile client only. 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.

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

  • Step 3

    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 and Cloud Foundry to use it in the Mobile client and Web application respectively.

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

      MDK
    2. Select deploy target as Mobile & Cloud.

    MDK editor will deploy the metadata to Mobile Services (for Mobile application) followed by to Cloud Foundry (for Web application).

    MDK

    First web deployment takes 2-3 minutes as it creates five service instances for the application, you can find these details in space cockpit.

    • XSUAA

    • destination

    • connectivity

    • HTML Repo host

    • HTML repo runtime

    You should see successful messages for both deployments.

    MDK
  • Step 4

    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.

    MDK

    The On-boarding QR code is now displayed.

    MDK

    Leave the Onboarding dialog box open for the next step.

  • Step 5

    What is the relation between the metadata of the MDK app and the MDK mobile client?

Back to top