You may clone an existing metadata project from GitHub repository and start directly with step 4 in this tutorial.
To extend the functionality, or customize the look and feel, and behavior of your client app, you can use the existing NativeScript plugins like nativescript-geolocation, nativescript-nfc etc. , add this to the client and reference it from a rule.
In this tutorial, you will use the existing NativeScript plugin nativescript-geolocation to capture the device location: latitude & longitude.

Step 1: Create a new MDK project in SAP Business Application Studio
-
Launch the Dev space in SAP Business Application Studio.
-
Click Start from template on Welcome page.
If you do not see Welcome page, you can access it via Help menu.
-
Select MDK Project and click Next.
-
In Basic Information step, select or provide the below information and click Next:
Field |
Value |
MDK template type |
Select Empty from the dropdown |
Your project name |
MDK_Geolocation |
Your application name |
<default name is same as project name, you can provide any name of your choice> |
The MDK Empty Project template creates a Logout action, Close page action, rule 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.
-
After clicking Next, the wizard will generate your MDK Application based on your selections. You should now see the MDK_Geolocation
project in the project explorer.
Step 2: Create a new rule to capture the device location
In the MDK editor, you will create a new JavaScript file called GetCoordinates.js
to capture the device location: latitude & longitude.
You can find more details about writing a Rule.
-
Right-click the Rules folder | MDK: New Rule File | select Empty JS Rule.
-
Enter the Rule name GetCoordinates
, click Next and then Finish on the confirmation step.
-
Replace the generated snippet with below code.
import * as geolocation from "nativescript-geolocation";
import { Accuracy } from "tns-core-modules/ui/enums";
export default function GetCoordinates(context) {
var logger = context.getLogger();
console.log("Current Log Level: " + logger.getLevel());
// check if geolocation is not enabled
if (!geolocation.isEnabled()) {
// request for the user to enable it
geolocation.enableLocationRequest();
}
// Get current location with high accuracy
return geolocation.getCurrentLocation({
desiredAccuracy: Accuracy.high, //This will return the finest location available
updateDistance: 5, //Update distance filter in meters.
timeout: 11000 //How long to wait for a location in ms.
}).then(function (loc) {
if (loc) {
console.log(loc);
console.log('\nCurrent Location: (' + loc.latitude + ',' + loc.longitude + ')');
logger.log(loc.toString());
var locMessage = '(' + "Latitude:" + loc.latitude + ',' + "Longitude:" + loc.longitude + ')';
logger.log('Current Location: ' + locMessage, 'INFO');
return locMessage;
}
}, function (e) {
logger.log(e.message, 'ERROR');
});
}
-
Save your changes to the GetCoordinates.js
file.
Step 3: Display the coordinates on a page
You will add this registered control in a Form Cell page.
-
Double-click the Main.page
, drag & drop Static Key Value container control to the page area.
-
In Properties | Layout, change NumberOfColumns
to 1.
-
Drag & drop Key Value Item to the container.
-
Provide the following information:
Property |
Value |
KeyName |
Coordinates |
Value |
Bind it to rule GetCoordinates.js |
Step 4: List the NPM modules as external reference
In GetCoordinates.js
file, you referred nativescript-geolocation
and tns-core-modules/ui/enums
. You now need to list these modules as external references in BAS configuration so when bundling, MDK editor knows not to worry about these references.
-
Navigate File menu | Settings | Open Preferences.
-
Search with mdk
, click Edit in settings.json.
-
Include below references in MDK.bundlerExternals
and save the changes.
"nativescript-geolocation",
"tns-core-modules/ui/enums"
Step 5: 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 this application definition to Mobile Services.
-
Right-click Application.app
and select MDK: Deploy.
-
Select deploy target as Mobile Services.
-
Select the application from Mobile Services.
You should see Deploy succeeded message.
Step 6: Add NativeScript plugin and External dependencies in your local .mdkproject
In order to use the existing NativeScript plugin in MDK client, you will need to first add it in .mdkproject
and then create your branded MDK client.
-
Make sure that you have already completed steps 1 to 3 from this tutorial.
-
Open MDKProject.json
file and replace existing content with below:
{
"AppName": "DemoSampleApp",
"AppVersion": "1.0.0",
"BundleID": "com.sap.mdk.demo",
"Externals": ["nativescript-geolocation","ui/enums"],
"NSPlugins": ["nativescript-geolocation"],
"UrlScheme": "mdkclient"
}
Step 7: Add googlePlayServicesVersion in Android App Resources (Required only for Android client)
With Google Play services, your app can take advantage of the latest, Google-powered features such as Maps, Google+, and more.
-
Navigate to /DemoSampleApp.mdkproject/App_Resources/Android
and create a new file before-plugins.gradle
.
-
Provide the below information:
android {
project.ext {
googlePlayServicesVersion = "16+"
}
}
Step 8: Create & Run the MDK client
-
Follow steps 4 & 5 from this tutorial to create your branded MDK client and run it in your device.
-
Once you have accepted the app update, allow your app to access your location.
In Main page, you will see device’s current location.
-
Follow steps 4 & 5 from this tutorial to create your branded MDK client and run it in your device.
-
Once you have accepted the app update, allow your app to access your location.
In Main page, you will see device’s current location.
Congratulations, you have learned how to capture device’s current location in your MDK app and you can continue with the remaining tutorials in this mission.