Product Information
What’s new in Mobile development kit client 5.2
Last Updated: 24 Aug2021 (added additional information in Multi user support section)
I am happy to announce that a new release of the Mobile Development Kit is now available for all Mobile Services customers and can be downloaded on the SAP Software Center and community Download page).
SAP Mobile Services Client has also been updated and available in Google Play Store and in Apple app store.
This release adds incremental functionality over the previous MDK Client 5.1 release.
SAP Mobile Development Kit enables developers and technical business users to build multi-channel applications. It allows you to build your application once, in an integrated development environment (SAP Business Application Studio/SAP Web IDE/ VSCode extension) and run it natively on Mobile (Android & iOS) and as a web application (online) in the browser.
This release includes the following:
- Mobile & Web
- Mobile only
- Web (already supported on Mobile)
- BAS editor-Additional enhancements
Support Multi-Select in ObjectTable Lists
- You can now easily enable the multi-selection mode in an Object Table via Selection>Mode in the visual editor or via the setSelectionMode API in Object Table SectionProxy.
let salesOrderSection = context.getPageProxy().getControl('SectionedTable').getSection('SalesOrderList');
salesOrderSection.setSelectionMode("Multiple")
- You can also enable it via long press on any of the object cell item as well, just set the LongPressToEnable property to true. (applicable to Mobile client only)
- You can get all of the selected values via the getSelectedItems API or the last changed item via the getSelectionChangedItem
let salesOrderSection = context.getPageProxy().getControl('SectionedTable').getSection('SalesOrderList');
salesOrderSection.setSelectionMode("Multiple")
let selectedItems = salesOrderSection.getSelectedItems();
MultiSelect in Mobile client
MultiSelect in Web application
- You can get the current selection state using the getSelectionMode API.
- There are two new additional events available on an Object Table that you may want to use:
- OnSelectionChanged – This will be triggered whenever a user selects or deselects an item.
- OnSelectionModeChanged – This is triggered whenever the selection mode changes, for example, from None to Multiple and vice versa, and allows the app to hide or show certain controls when in or out of selection mode.
Support Dark Mode/theme
MDK now supports dark mode in both iOS and Android by default. The UI automatically changes to dark mode when the device setting is changed to dark mode.
Dark mode in Mobile client
Note:
- On Android, there is currently no support to force the app to light mode, so make sure any extensions or custom styling are adapted to support dark mode when you upgrade to MDK 5.2 version.
- If you switch the dark/light mode while the client is running and encounter display issues, please try restarting the client.
To allow your app to maximize the customization, you can also provide light and dark mode versions of LESS. You can also provide light and dark mode versions of images in the Images folder of your project. Check Documentation for more details.
To set the dark theme in your MDK Web app, append ?sap-ui-theme=sap_fiori_3_dark at the end of the URL.
Dark theme in web application
Support Deep Linking into the MDK application
MDK now allows you to do the Deep linking from a web page, email or from another app to launch the target app and then execute certain actions such as
- navigating to a page or
- may be approve a request.
when a link mdk52://product?id=123 is clicked, MDK app with URL scheme mdk52 will be launched and the OnLinkDataReceived event (part of Application.app) will be fired . With-in this event the deep link data can be accessed using context.getAppEventData().
export default function LinkDataReceived(context) {
let pageProxy = context.getPageProxy();
let linkData = JSON.parse(context.getAppEventData());
var message = '';
var productID = '';
/* For example:
** if the deeplink is mdkclient://product?TheProductId=123,
** linkData will be a json object which will contain the data as below
** {
"URL":"product",
"URLScheme":"mdkclient:",
"Parameters":{
"id":"123"
}
}
** This data can be parsed and used as needed
*/
console.log("OnLinkDataReceived Event! " + linkData);
switch (linkData.URL) {
case 'product':
if (linkData.Parameters && linkData.Parameters.id) {
productID = linkData.Parameters.id;
} else {
message = 'No Product ID Specified';
return context.executeAction({
"Name": "/MDK52/Actions/GenericMessageBox.action",
"Properties": {
"Message": message,
"Title": "Link Data Received"
}
});
}
return context.read('/MDK52/Services/sample.service', 'Products', [], `$filter=ProductId eq '${productID}'`).then((results) => {
if (results && results.length > 0) {
let prod = results.getItem(0);
pageProxy.setActionBinding(prod);
return pageProxy.executeAction('/MDK52/Actions/Products/NavToProducts_Detail.action');
} else {
message = `Product with ID (${productID}) not found`;
return context.executeAction({
"Name": "/MDK52/Actions/GenericMessageBox.action",
"Properties": {
"Message": message,
"Title": "Link Data Received"
}
});
}
});
break;
default:
message = JSON.stringify(linkData);
return context.executeAction({
"Name": "/MDK52/Actions/GenericMessageBox.action",
"Properties": {
"Message": message,
"Title": "Link Data Received"
}
});
break;
}
}
Deep linking into MDK mobile application
In case of web application, the when the link https://<APP_URL>/index.html?id=123 is clicked, MDK web app will be launched and following data can be accessed in OnLinkDataReceived using context.getAppEventData()
{
"URL": "<APP_URL>/index.html",
"URLScheme": "https:",
"Parameters": {
"id": "123"
}
}
Deep linking into MDK web application
Support themes with Multiple LESS files
You can now provide multiple LESS files for different kinds of themes and you can switch between them at runtime.
You can easily switch between these themes using either:
- SetTheme Action – Allows you to use action to set the theme in the application
- ClientAPI setTheme – Allows you to use JavaScript function to set the theme in the application.
- ClientAPI getAvailableThemes – Returns an array of available themes (it is based on the file name of the LESS files without the .dark / .light post-fix)
let availableThemes = context.getAvailableThemes();
Theme support (with Multiple LESS files) in Mobile client
Theme support (with Multiple LESS files) in web application
Support Rules for Result Object in Filter Page
Result object in Filter Page now supports rule. You can now further customize the filter and sorter values returned out of user selection. This also expands the current support for Filters and Sorter to unsupported controls such as Date Picker, Segmented Button, Simple Property and others. With-in the rule use the createFilterCriteria
to create FilterCriteria
object and finally return an array of FilterCriteria
objects.
export default function FilterResults(clientAPI) {
let result = clientAPI.evaluateTargetPath('#Page:FormCell/#Control:FormCellSimpleProperty0/#Value');
let filterResults = [];
let simplePropertyFilterResult = clientAPI.createFilterCriteria(clientAPI.filterTypeEnum.Filter, 'Category', 'Category', [result], false);
filterResults.push(simplePropertyFilterResult);
return filterResults;
}
Style Enhancements
Object Cells now supports couple of new styling properties
- BackgroundColor – This can be used to style the background color for Object Cells
- DetailImageText – This can be used to style the DetailImageText
New UI Control: KPI Section
We have had a KPI header (non header control) and we have now introduced KPI as its own section type, so you can provide a header, also a footer for this section and can have one or more items in your section to display different Key Performance Indicators .
Multi User Support (Android only)
MDK now supports multi-user login capability in Android client (iOS will follow). You can now securely share a MDK application across multiple users without needing a full data reset when switching users.
When switching users the device needs to be connected to the network and biometric passcodes are not supported when the client is in multi-user mode.
Please note to consider below settings:
- Enable Multi-user settings in your BrandedSettings.json
"MultiUserSettings": {
"MultiUserEnabled": true
},
- Enable the flag Allow Upload of Pending Changes from Previous User for the app in the Mobile Services cockpit.
- In CF environment, this setting is available under Mobile Settings Exchange feature
- In CF environment, this setting is available under Mobile Settings Exchange feature
-
- in NEO environment, this settings is available under Client Policies feature
- This is required only in Cloud Foundry. In CF, for Multi-user scenario, a user needs to be impersonated. In order to get a token for a different user, XSUAA should trust Mobile Services. This should be done by importing Mobile Services key to trust configuration so that Mobile Services can sign a token and exchange with XSUAA another token for different user.
- download metadata of Mobile Services: Navigate to Settings>Security, click Metadata Download button. If there is no Metadata Download button, please try to create a new app configuration (with Basic / API key authentication type), and then go to Settings->Security
- In BTP cockpit, navigate to Security>Trust Configuration, click New Trust Configuration. On the popup dialog, upload the downloaded metadata, and save it.
Check documentation for more details.
Note: For an existing single user app it is required to rebuild the client with above mentioned settings. Once the client on a device is updated the user will have to reset the client and re-login before multi-user capability can be enabled.
Support Custom Accessory Icons in Object Cell
This feature is currently applicable to Mobile client only.
You can now provide custom accessory icon by setting AccessoryButtonIcon property or AccessoryButtonText (iOS only).
AccessoryButtonIcon would override the values defined on AccessoryButtonText, AccessoryType and ProgressIndicator.
The OnAccessoryButtonPress action will trigger when the user taps on the custom accessory icon
Support Decimal pad in SimpleProperty FormCell control
This feature is applicable to Mobile client only.
KeyboardType Number now supports Decimal Pad in Simple Property FormCell
//excerpt of a page
{
"Caption": "GrossAmount",
"KeyboardType": "Number",
"_Name": "GrossAmount",
"_Type": "Control.Type.FormCell.SimpleProperty"
},
SideDrawer Navigation Page Enhancements
This feature is currently applicable to Mobile client only.
- Support AlwaysShowDrawerButton in the SideDrawer can be used to show DrawerButton on every page. In Android once this property is enabled, the back button would be hidden and instead hardware back button needs to be used.
- SideDrawerItems now support rule, this now allows to generate items array during runtime.
- setSideDrawerButtonAPI can be used to dynamically modify the DrawerButton for SideDrawer.
Offline OData Enhancements
- Undo Local creation: You can now undo the local changes on an entity in your offline application by setting up the EnableUndoLocalCreation to true (.service file >Store Parameters)
e.g. if you create a record locally, update it and then delete it, if EnableUndoLocalCreation property is set to true, all the 3 requests will be removed while uploading and won’t be sent to the back end.
Check documentation for more details.
- Request Queue Optimization: the new property EnableRequestQueueOptimization combines multiple OData operations on an entity into one single operation.
e.g. You create a record locally, update it one/more times , if the EnableRequestQueueOptimization is set to true then these Create and multiple updates on an entity will be uploaded as one single create request.
Note: It is not always possible to combine all changes into a single request based on the sequence of requests made. Enabling this property will let the OData requests be optimized into the fewest number possible.
- New ODataProvider API: You can now get handle to OData provider via the ClientAPI.getODataProvider(serviceName). This class gets information about the OData provider such as whether it’s in offline mode (isOfflineEnabled()), or is initialized (isInitialized()).
For offline enabled OData provider, you can also get its offline parameters (getOfflineParameters()), where you can get or set its custom headers. Check documentation for more details.
Create client enhancements
- BrandedSettings:
- In line with SAP Cloud Platform product name sunset, we have deprecated SapCloudPlatformEndpoint property and have now introduced new property ServerUrl as its replacement, we are keeping backward compatibility though.
- To conform SAP Inclusive Language Guidelines, we have replaced URLWhitelist property with AllowedDomains, we are keeping backward compatibility though.
- New property ObfuscateEmail can be used to obfuscate email address on the sign in screen. The default value of this flag is false. This property is supported on Android only.
"ConnectionSettings": {
"EnableOverrides": true,
"AppId": "com.sap.mdk.demo",
"ClientId": "<>",
"ServerUrl": "<>",
"AuthorizationEndpointUrl": "<>",
"RedirectUrl": "<>",
"TokenUrl": "<>"
},
"ObfuscateEmail": true,
"AllowedDomains": [
"mdk51"
],
Obfuscated Email address in the Android client
- Better Support for App_Resources Files Overrides
Added support to override only a part of resources files in <generated-project>/app/App_Resources. It is done by specifying your overriding files in the .mdkproject/App_Resources_Merge.
Files in the .mdkproject/App_Resources_Merge folder support merge (replace/add) for the following file types, other files will be overwritten.
Check documentation for more details.
Bottom Navigation Control
This feature is already available in the Mobile client and is now supported in the web environment.
You can now use Bottom Navigation control (part of a newly added Bottom Navigation Page) to show the navigation items in the MDK web applications. Each Tab item contains both icon or text or both, the icon could come from the app resources or from fonts (UI5 font icon library ).
This control:
- is for high level navigation where the separate tabs don’t have shared context
- is limited to 5 tabs at maximum
- each tab’s content must reference to a page
Enhance loading Indicator – busy indicator at lazy loading time
This feature is already available in the Mobile client and is now supported in the web environment.
You can now display a busy indicator in the MDK web applications when the lazy loading happens. This indicator is shown below the list while the new set of data is being downloaded.
You need to set DataPaging properties of the controls.
//Excerpt of a page
"DataPaging": {
"LoadingIndicatorText": "Loading more items, please wait...",
"ShowLoadingIndicator": true
},
Run your MDK web application in the dev space
You can now run the MDK web application in your BAS dev space by clicking “Your Dev Space” as the target. (navigate to Application.app>MDK:Deploy)
Once the deployment to dev space is successful, switch to “Run Configurations” view, run the ‘WebApplicationFactory’.
You should see a message popup ‘A Service is listening to port 6004′ on the successful run, click ‘Open in new tab’ to run the application.
Note: If there are previous running thread, stop them before running `WebApplicationFactory`.
Connect to the SAP Mobile Services preview (CF) landscape
SAP Mobile Services preview edition allows our customers to preview/test new Mobile Services features in advance. If you need to connect to the preview landscape for your MDK development, you can now connect to it from the editor.
While deploying your MDK metadata project to the Mobile Services, select the required Mobile services landscape.
Turn off the platform validation warning
While validating the MDK metadata in the editor, you might have seen platform specific information in the Validate task.
You can easily turn them off by setting up in the MDK preferences (File menu> Settings>Open Preferences>mdk>)
OR by clicking the “iOS & Android” at the blue bar at the bottom and select “None” as the target platform to set it for the current workspace. (workspace settings take precedence over MDK preferences)
New to MDK development?
Follow these tutorials to get your hands dirty and learn more about Mobile development kit!
Further Information:
You can learn more in documentation :
I am looking forward to your feedback/comments.
Jitendra
That's great! Jitendra Kansal
Everything is clear for me except the "Support Rules for Result Object in Filter Page".
It would be great if you guys could show this new feature in a more complete sample.
Many thanks
Francisco José Carrasco Valverde
Thanks for the feedback.
We'll share a detailed sample for that feature soon.
Updated: KPI Section UI control in the Mobile client.
Hi Jitendra,
thanks for this new features, these are very useful. The new relase also fix some bugs we had with uploading offline data in our application.
Is there a way or tool for test automation avalible? it's very expensive for us to verify the application after sofware updates or client changes .
Good Job, Thx .)
Robert Hunger
You can use any standard test automation tools.
Hallo Jitendra Kansal ,
Many of us are typical ABAP backend developers and don't have much experience in these topics. Can you recommend a tool for automated testing of the MDK-UI elements on the devices or in the simulator?
Thanks
Robert Hunger
I checked with our QA expert on this, you can use Froglogic Squish (Liensed) and Appium (Free) for the automation test of MDK mobile UI/Function on iOS/Android Device/Simulator.
I hope this helps.
Hi Jitendra,
I was trying out the deep linking on the web version. When I use MyEntitySet$filter=property eq '123' in query options it seems to work. But I want to query MyEntitySet('123').
I have tried this using the readLink property on a read odata service by dynamically setting it to MyEntitySet(Id) but it still returns all the results.
Any help would be very much appreciated.
Thanks,
Matt
Actually trying the filter on the read again, the deep linking in the web just seems to hang after navigating. I am using a blank detail page, the one I want to navigate to, as my main page as the user will only ever only need to see this.
What are you using as your main page and will there be a sample web app including this deep linking added to the git repository; https://github.com/SAP-samples/cloud-mdk-samples.
Matt Moyse
Need more details to understand what you are trying.
Can you post a new question? answers.sap.com
Hi Jtendra,
We are looking at doing a PoC for a client for barcode scanning. Do you have any examples please?
Dharmesh Chovhan
Need more details to understand how you are intending to use scanning in your app.
Hi Jitendra
We looking at doing a PoC using MDK and the barcode functionality - not sure what is provided by the MDK.
An example is to scan a product barcode and retrieve basic information on the mobile device.
We are hoping to use with traditional barcode scanners(symbol, honeywell, panasonic etc) and also mobile devices with iOS and Android operating system.
Any suggestions or ideas if the MDK is an ideal SDK to use???
Appreciate your help with this
Cheers
Dharmesh Chovhan
We looking at doing a PoC using MDK and the barcode functionality - not sure what is provided by the MDK. An example is to scan a product barcode and retrieve basic information on the mobile device. >>
MDK supports barcode scanning in a number of areas out of the box
We are hoping to use with traditional barcode scanners(symbol, honeywell, panasonic etc) and also mobile devices with iOS and Android operating system. Any suggestions or ideas if the MDK is an ideal SDK to use??? >>
How you integrate a hardware scanner into your MDK application is determined by what the hardware exposes. Each scanner manufacturer has their own API and feature set so you will need to investigate the specifics of the device you are planning to use to determine the best approach for this integration. Some scanners are configured as a keyboard wedge where as long as the cursor is in an input field a hardware button scan will "paste" the result into the current field. Others can be setup to emit a broadcast event that you can listen for. Most all have a specific scanning SDK you can use in an extension control to configure and initialize the scanner so that the event will trigger within your MDK application.
If you are looking for using the hardware scanner, you have two options.
Hi Jitendra,
Thanks for you response.
We are looking at creating a plugin which will expose the hardware scanning functionality/APIs. Then with this plugin, we can use the exposed APIs within the MDK applications.
Most of the SDK from Vendors are in Java/C++.
Are you able to provide any examples to achieve this. We just need some guidance with this.
Appreciate your help with this.
Cheers
Dharmesh
Hi Jitendra,
how have you managed to refresh the items in the first example after approving them? Can you please provide a code snippet? A have implemented a similiar scenario, the entities are getting updated, but I can see the changes only after navigating back and forth.
Many thanks and best Regards
Christian
Christian Süß
can you share how you have tried it?
Hi Jitendra,
I have a table with enabled multi select and a button. There I have the following code on OnPress. It's an UpdateEntity-Chaining for the selected items.
Christian Süß
need to understand the bind part you have in your code and also what you have on the page where you are calling this rule?
do you mind creating a ticket with these details?
Hi Jitendra,
you are right, there was a binding issue. On one page I used the entity and there it worked and on another page I used a navigation property. In this case I had to add a data subscription. Everything works fine now.
Hello Jitendra Kansal What's the property "HighligthSelectedItem" for ?
I have an ObjectTable with multiselection and I can't see any difference if I set this property "true" or "false.
Thanks
Regards
HighligthSelectedItem property is applicable for a section on Master page (part of master-detail page) where you tap an item in the list (in Master pane) to see its information (in Detail pane).
If there is one section in the Master page, then when you select an item, it will be highlighted automatically but when you have more than section, and in order to highlight a selected item, you need to explicitly set this property to true in the given section
Jitendra Kansal many thanks for your explanation
Regards
added additional information in Multi user support section
Hello Jitendra Kansal ,
I'm testing the new AccessoryButtonIcon and AccesoryButtonText properties and they aren't calling the event OnAccesoryButtonPress when I tap on them.
I'm using the last version of the sap mobile client.
Thanks
Kiko
Francisco José Carrasco Valverde
Thanks for reporting. This is currently a known issue, will be fixed in upcoming release. (targeting next week)
Francisco José Carrasco Valverde
Public store client is updated with a new version 6.0.1, please try again.
Jitendra Kansal
Great news ! It's working with sap client version 6.0.1
I'm looking forward for your blog "What's new in Mobile development kit client 6.0" in order to know the new features.
When are you planing to release the MDK to build a custom client ? And the cloud build service ?
Thanks
When are you planing to release the MDK to build a custom client ? And the cloud build service ? >> You meant the MDK SDK 6.0? As of today, you can download it from the service marketplace. We are working on updating it on the community download page. Updating Cloud Build to 6.0 is in progress.
I just have seen you have post the blog !
Yes, I meant the MDK SDK 6.0.
Many thanks
Hi Jitendra Kansal ,
I have a scenario here where I need to create dynamic pages based on a entity set. This page will be a form with some rules.
You know if there is a way to have a dynamic page?
Thank you so much in advance.
Guilherme Cardoso
I have a scenario here where I need to create dynamic pages based on a entity set.>> how exactly that flow would look like in the app?
This page will be a form with some rules. >> you meant the generated page would a FormCell page? And you want to bind control's property to rules?
Jitendra Kansal
Hello!
how exactly that flow would look like in the app?
The app will have a Form with N pages (with next, previous actions). And my goal is to create dynamically (with infos from the server via odata) some of these pages, depending on the answer in a field on the very first page.
Is it possible to do that? Or I will need to create all the form pages via metadata?
Thank you!
My colleague has answered it in your post.