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.

1. Launch the Dev space in SAP Business Application Studio.
2. Click Start from template on Welcome page.

3. Select MDK Project and click Start.

The screenshot is taken from the link as a reference.

4. 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:

1. InitializeOnline.action: This action initialises the application data service.
2. InitializeOnline Success & Failure Message action: Here are some messages showing up in the app on a successful or failure of application data service initialisation.
3. 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.
4. 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.
5. Web: In this folder, you can provide web specific app resource files and configurations.
6. 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.

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

2. 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.

• Step 6 – Run the App

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:

Customise the second List-picker control as follows:

Customise the third List-picker control as follows:

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.

• Step 11 – Adding Styles

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

	Name      :  LinkedIn :  About     :	Nabsri Subha Sourya linkedin.com/in/nabasree-suvasourya-72409350 Architect (Mobility, SAP BTP)
	Name      :  LinkedIn :  About     :	Anetia Faber linkedin.com/in/anetiafaber Software Engineer (SAP MDK, SAPUI5)