How to create an MDK Application
Mobile applications have become the primary way that people interact with online services today. This makes the mobile app a high-value target for teams to reach their users, market their firm, and offer online services. As an app developer, we always look to make mobile applications that run on multiple operating systems by using a single framework and sharing the same code base.
The SAP Mobile Development Kit enables development of multi-channel applications from low-code to pro-code. The framework enables businesses to create native-like experiences by reducing the development effort and costs while speeding up the time-to-market.
So, I want to use this blog post to help you to achieve that with SAP Mobile Development Kit app.
Introduction
The SAP Mobile Development Kit (MDK) enables developers and technical business users to build multi-channel applications. It allows you to build your application once, in an integrated development environment, and run it natively on mobile devices (Android and iOS) and as a web application (online) in the browser. 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.
With this showcase app, you will learn to do the following different scenarios:
- How to create an MDK Online app using an empty template in SAP Business Application Studio.
- How to create Pages, Rules, Actions and Services in the project.
- How to integrate a Rest Api Service with the Mobile Application.
- How to deploy an MDK app to Mobile Services and run it in a client.
Prerequisites
- Download and install:SAP Mobile Services Client on your iOS or Android device (If you are connecting to AliCloud accounts then you will need to brand your custom MDK client by allowing custom domains.)
- Configure initial setup for MDK Mobile and Web applications in the Mobile Services Cockpit.
- Destinations should be configured in both BTP and Mobile Services Cockpit for the services utilised.
Steps to create a MDK Online App
- Step 1 – Create a New Dev Space
Create a Dev space by giving a name and select the type of application as
SAP Mobile Application.
- Step 2 - Create a new MDK project in SAP Business Application Studio
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 Welcome page.
- Select MDK Project and click Start.
The screenshot is taken from the
link as a reference.
- After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the DFT_Incture project in the project explorer.
These are the metadata definitions available in the editor and the format in which these metadata definitions are stored in the editor. Some of these are as follows:
- InitializeOnline.action: This action initialises 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 initialisation.
- 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 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.
- 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.Also, on right of application.app the project can be deployed using the MDK:Deploy option.
- Step 3 – Login to Cloud Foundry
Go to View > Find Command
Search for cloud foundry and select Login to Cloud Foundry.
Login with the BTP credentials.
Set the organisation and space in Cloud Foundry.
- Step 4 – Deploy the Application
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.
- Right-click app and select MDK: Deploy.
- Select deploy target as Mobile Services.
Select
Yes to enable source for debugging the deployed bundle.
You should see
Deploy to Mobile Services successfully! message.
- Step 5 – Display the QR code for onboarding the Mobile App
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.
After you accept app update, you will see
Main page being displayed and application data service is initialized.
IOS
ANDROID
- Step 7 – Creation of Tabs and Pages
TabsPage can be created using the
Tabs page template available during the MDK page creation.
Set the page name as
TabsPage.
Add Page Caption as follows.
Customize the tabs control:
In the Data sections of Tabs control, select
Object Collection. Tab items can be added using the
Add button in Object collection inside Data property.
Enter the Caption for Tabs 0 and 1 as
Header Details and
Attachments respectively.
Now, we need to create the individual pages for these tabs.
Create
HeaderDetailsPage using
Form Cell Page template.
Once the page is created, we need to add different elements to it.
Drag and drop
3 List pickers, 1 Simple Property, 4 Date pickers and a Note control into the
HeaderDetailsPage.
Moving onto the customisations -
Customise the
first List picker control as follows:
Vender -
ReturnValue |
DisplayValue |
4000123 |
RocketMan Inc |
4000124 |
WestingHouse Inc |
4000128 |
AMA Inc |
Customise the
second List-picker control as follows:
Department -
ReturnValue |
DisplayValue |
Drilling |
Drilling |
Assembly |
Assembly |
Welding |
Welding |
Customise the
third List-picker control as follows:
Location -
ReturnValue |
DisplayValue |
US |
USA |
CA |
Canada |
MX |
Gulf of Mexico |
Customize the
Simple property control as follows:
Customize the
first Date Picker control as follows:
Customize the
second date Picker control as follows:
Customize the
third date Picker control as follows:
Customize the
fourth date Picker control as follows:
Customize the
Note control as follows:
The
HeaderDetails View after customization:
Similarly, create the
AttachmentsPage using
Section Page Template.
Add
a
Form Cell Container and drag and drop the
Attachments control into the container.
Add a
Submit button to the page by dragging and dropping a
ToolbarItem into the page footer and customizing it as follows:
AttachmentsPage after customization:
Attach these individual pages to the Tabs by adding the respective paths to the
PageToOpen property of each tab in the
TabsPage.
- Step 8 – Set TabsPage as Main Page
Go to
Application.app file, and set the main page as
TabsPage.
- Step 9 – Creation of Rules
Create a new rule for the
Submit button.
Set the name as
onSubmit.
Change ClientAPI to context in the
onSubmit rule.
Copy the code for onSubmit.js file.
let clientData = context.evaluateTargetPath('#Application/#ClientData');
let vender_id = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellListPicker0/#Value')[0].ReturnValue;
let dept = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellListPicker1/#Value')[0].ReturnValue;
let loc = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellListPicker2/#Value')[0].ReturnValue;
let wono = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellSimpleProperty0/#Value');
let start_date = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellDatePicker0/#Value');
let start_time = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellDatePicker1/#Value');
let end_date = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellDatePicker2/#Value');
let end_time = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellDatePicker3/#Value');
let remarks = context.evaluateTargetPath('#Page:HeaderDetailsPage/#Control:FormCellNote0/#Value');
let startday = start_date.getDate();
if (startday < 10) { startday = '0' + startday; }
let startmonth = start_date.getMonth() + 1;
if (startmonth < 10) { startmonth = '0' + startmonth; }
let startyear = start_date.getFullYear();
let endday = end_date.getDate();
if (endday < 10) { endday = '0' + endday; }
let endmonth = end_date.getMonth() + 1;
if (endmonth < 10) { endmonth = '0' + endmonth; }
let endyear = end_date.getFullYear();
let startD = startyear + "-" + startmonth + "-" + startday;
let endD = endyear + "-" + endmonth + "-" + endday;
var starthours = start_time.getHours();
var startminutes = start_time.getMinutes();
var endhours = end_time.getHours();
var endminutes = end_time.getMinutes();
let startT = starthours + ":" + startminutes;
let endT = endhours + ":" + endminutes;
let HeaderDetails = { "vender_id": vender_id, "dept": dept, "loc": loc, "wono": wono, "start_date": startD, "start_time": startT, "end_date": endD, "end_time": endT, "remarks": remarks };
clientData.HeaderDetails = HeaderDetails;
context.executeAction("/DFT_Incture/Actions/PostTickets.action");
Link this file to the
Submit button in
Attachments page.
- Step 10 – Creation & Integration of Services
Create a new service with the name ‘
CAPMService’
Select Data Source as
Mobile Services and choose the
Destination name corresponding to the service created in Mobile Services Cockpit.
Enable the
REST Service option for REST API services.
Fetch the service metadata.
Now, create
POST call for creation of DFT Tickets using
Actions.
Create a new Action of type
RestService SendRequest Action.
Customise it as follows:
Action Name - PostTickets
Service - CAPMServices
Path - /tickets
Method - POST
Open the
PostTickets.action in Code Editor to add the body for the POST call.
BODY -
{
"TicketNo": "",
"VendorId": "{#Application/#ClientData/HeaderDetails/vender_id}",
"WONo": "{#Application/#ClientData/HeaderDetails/wono}",
"Department": "{#Application/#ClientData/HeaderDetails/dept}",
"Location": "{#Application/#ClientData/HeaderDetails/loc}",
"StartDate": "{#Application/#ClientData/HeaderDetails/start_date}",
"EndDate": "{#Application/#ClientData/HeaderDetails/end_date}",
"StartTime": "{#Application/#ClientData/HeaderDetails/start_time}",
"EndTime": "{#Application/#ClientData/HeaderDetails/end_time}",
"Status": "New",
"Remarks": "{#Application/#ClientData/HeaderDetails/remarks}",
"Approver1Name": "",
"Approver1Comments": "",
"Approver2Name": "",
"Approver2Comments": "",
"InvoiceNo": ""
}
Customize the PostTickets.action by adding properties, as required.
Create a new rule (
PostTickets.js) for the success of PostTickets.action.
Copy the code for the
PostTickets.js file
let result = context.getActionBinding();
let clientData = context.evaluateTargetPath('#Application/#ClientData');
clientData.postTicket = result;
context.executeAction("/DFT_Incture/Actions/SubmitSucess.action");
Create a new
Message action to show the success message(
SubmitSuccess.action)
Message- {#Application/#ClientData/postTicket/TicketNo} Created Successfully!
OKCaption - OK
Similarly, create a message action (
PostFailed.action) to show the failure message.
Link the above file to the
Failure action of PostTickets.action.
Add the given style class to the
Styles.less file in Styles folder
ActionBar {
color: white;
background-color: #0087d5;
}
- Step 12 – Deploy the Application
Here is what the app looks like :
Conclusion
If you have any questions related to the same, feel free to post a question
here
Further, you can read more on the SAP Application Business Studio
here
Please make sure to follow my profile to know more about my upcoming blog where I will write on how to design a complex MDK application with multiple screens and APIs
If you have any further queries feel free to comment.
References
https://developers.sap.com/tutorials/cp-mobile-dev-kit-online-app.html
Authors