Technical Articles
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
Mamatha Majji Great blog post, thanks for sharing your experience.
Just wanted to clarify on below points:
Looking forward to more posts.
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 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)
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
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.
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 ?
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.
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.