Skip to Content
Technical Articles
Author's profile photo Mamatha Majji

How to configure and create Mobile service Application with Mobile Development kit(MDK) in BAS

Hello Everyone,

Hope you are all doing good!

In this blog post, I am going to explain how to configure and create Mobile service Application with Mobile Development kit(MDK).

Introduction:

The Mobile Development Kit enhances and enables the developers and technical business users to build cross-platform mobile applications with a native look-and-feel. It allows you to build your application once, in an integrated development environment(IDE), and the MDK lets you customize, deploy, and manage your customized iOS and Android apps.

The MDK for SAP Cloud Platform Mobile Services is a metadata-based  and application development platform.

In current scenario Mobile Application development is a challenging task. The tasks are as follows:

  • Projects have high demand on user experience.
  • Fast delivery cycles and device platform diversity.

While Considering the time-to-market and requirements such as offline data support and push notifications are common complexity drivers in the case of mobile apps. In businesses the major demand in not only the traditional desktop environment but also the mobile environment, the maintenance of code and applications becomes a real factor in the cost of operations.

Benefits of Mobile Development Kit Apps:

  • Native look and Feel
  • Use of Ui5 libraries
  • Consistent user experience
  • Simple wallet-style user experience(Mobile-cards)
  • Simplified app development lifecycle
  • Built cross-platform Native  App
  • Deploy updates easily

Let’s get Started creating the MDK App in SAP Cloud platform Mobile Services Cockpit.

Step 1:  Logon to SAP Cloud Platform Cockpit.

Follow the link to access the Mobile Services:

https://developers.sap.com/tutorials/fiori-ios-hcpms-setup.html

Step 2:

Now we are setting up an initial Configuration for an MDK App. On the home screen, select Create new app.

  • Provide the required information and click Next. Here Id name has to given with com separated by a period.
  • In Assigned features > select(Mobile Development Kit Application) from the dropdown and Click Finish.
  •  After clicking on “Finish” App will be created and default Assigned features are enabled.

 

     Step 3:  To connect Destination to the MDK App. Click on “Mobile Connectivity Icon”.

    Step 4: 

Click on “Edit” Icon a dialog will be opened enable Access to the cloud destination and save it.

 

  •  Click on “Create Icon” in Mobile Destinations to create the destination.

   

    Step 5: 

Here Destination Name will be appeared by default with App id Name if we want we can edit the Destination name with Appropriate destination. Provide the OData Service URL and Enable the Cloud Connector and make sure your system is Reachable in on-premise to cloud in SCC.

   

 

  • Click on Next and Next Provide SSO Mechanism> Basic Authentication(Service URL Credentials). Authentication is optional you can provide based on your purpose.

    Step 6:

After clicking on Finish, destination will be created. Now we have to ping the destination.

   

  • In Left Pane, Go to Native/Hybrid Apps there you will have created Apps.
  • In Actions column, there are options for OData Destination Test(Here you can see Service data in JSON or XML format), ping, Launch in Browser(To see the metadata in Browser),Edit, Delete.

     

    Step 7: 

Now we have to create an MDK App in Business Application Studio (BAS) to access the service data and to develop the Application. Have to Create a new Dev Space for Mobile Services.

        Click on “Mobile” Dev space to open the Workspace.

Step 8:

Configure Cloud Foundry environment, In the bottom left corner of your status bar, click the message “The Organization and space in cloud Foundry have not been set” to  and login with your Cloud Platform credentials. On Successful setup on organization and Dev Space.

  •   Select File menu → click New Project from Template
  •   Select MDK Project and click Next.
  •  In Basic Information Select Base Template type or we may select List Detail, Crud etc..,
  •  Select the desired template type based on your requirements and the actions supported by     each template, as described in the following table:
Template Type Logout/ Update Online/Offline List Detail Pages Editable
Empty Yes No No No
Base Yes Yes Yes No
List Detail Yes Yes Yes Yes
CRUD Yes Yes Yes Yes

   

  • In Service Configuration Select OData Source > Mobile Services and Application Id, Destination will be Automatically consumed from Mobile Service Cockpit. Just select them from Drop Down List.

 

  • In OData Collections step, Select the Appropriate(Entity Set). Click Finish to complete the project.

      Step 9:  Application structure will be Appeared like as below

For detailed information for App Structure go through this link :

https://developers.sap.com/tutorials/cp-mobile-dev-kit-offline-app.html

 

  • Main.page  is the First page of your Mobile Development Kit application you will use  this   as a launching page to get to application functionality. You can create other pages in Pages> new MDK page.
  • Now Open the Main.page then Code Editor will be opened there List of UI5 Controls in compound, container will be Appeared Drag and Drop the controls according to your Requirement.

 

  • In Right Side of the Page you will see Entity Set Target
  • Select service  and Entity set in drop down which was Appeared. If you scroll down you can bind the Page header Details in Properties from Entity Set Details and in Events tab we can perform functionalities.

Step 10: 

Now Right click on Application.app this is the main configuration file for your application from within SAP Business Application Studio.

   

     

        App will be Activated and deployed.

     

       Step 11:

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

   Step 12:

Run the app in MDK client by Installing Mobile SVCS App  by scanning the QR Code and by providing cloud credentials.

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.

After scanning the QR code, Application will be displayed.

 

             

Conclusion:

By following the above process  we have successfully created the MDK App.

Hope you have understood the process of Configuring and creating the MDK App in BAS.

Happy Learning and Have a great day!

 

Regards,

Mamatha

 

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Mamatha Majji  Great blog post, thanks for sharing your experience.

      Just wanted to clarify on below points:

      • In "Benefits of Mobile Development Kit Apps" section, you mentioned these points
        • Use of Ui5 libraries>>MDK Mobile client is built on top of Native SDKs so the controls in mobile client are native controls. We recently expanded MDK to Web environment which allows you to build and maintain a single app that runs natively on Mobile (Android & iOS) and web app (online) in browser. Controls in MDK Web applications are based on UI5 Web components.
        • Simple wallet-style user experience(Mobile-cards)>> This is not true,  MDK is not Mobile cards. There is Mobile card kit development option allows you to create mobile cards based (wallet-style) applications.
      • Now Open the Main.page then Code Editor will be opened there List of UI5 Controls in compound, container will be Appeared Drag and Drop the controls according to your Requirement.>>Those UI5 controls are mainly for page Layout editor to generate MDK metadata (page definitions), this metadata gets converted to Native UI controls in Mobile and UI5 Web components in Web environment at runtime.

      Looking forward to more posts.

      Author's profile photo Siddhesh Dingankar
      Siddhesh Dingankar

      Hi Mamatha Majji & Jitendra Kansal,

      I have been following all your MDK realted blogs and tutorials. Great work!!! Thank you for the amazing info.

      I have been given a task to convert an Android app to MDK native app. There is Diary function section where we have to display in Tabs: Day, Week, Month

      Day View: I have taken Datepicker & Object Table view (to display date specific tasks). I have added the Datepicker control value as filter value of Object table. But it does not filter, shows complete list instead.
      Day%20ViewDay View

       

      Week, Month View : Can you please help me with how to display tasks in week & month view as I cant find a control like sap.m.PlanningCalendar in UI5. Is there any other control which would be appropriate to create such a view. (Please do check the attached screenshots)

      Month%20ViewMonth View

      Week%20ViewWeek View

       

       

       

      Can you please suggest me any alternative or ateast confirm if this possible in MDK. I am new to this, but its fun developing using MDK.

      Thank youin advance!!! 🙂

      Best Regards,
      Siddhesh Dingankar

       

       

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Siddhesh Dingankar

      As your question is not directly related to the original post, i would suggest you to post it on Q&A forum so that others can find it too.

      Author's profile photo Siddhesh Dingankar
      Siddhesh Dingankar

      Thank you Jitendra Kansal for the quick response. Let me know if you want me to delete this from here.

      This Question has been posted on Q&A forum: How to design a calendar view (Day, Week, Month) in SAP MDK like "sap.m.PlanningCalendar" in UI5 ?

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Siddhesh Dingankar i think it's fine, you can leave it here, you may want to add reference to your question post in your last comment though.

      Author's profile photo Rohan Dhamale
      Rohan Dhamale

      While creating the mobile destination, do we have to provide the on premise oData URL? I did so but it didn't work. My FIORI apps are able to access the oData. The URL there is not on premise though.