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
  • Support Multi-Select in ObjectTable Lists
  • Support Dark Mode/theme
  • Support Deep Linking into the MDK application
  • Support themes with Multiple LESS files
  • Support Rules for Result Object in Filter Page
  • Style Enhancements
• Mobile only
  • New UI control: KPI Section
  • Multi User Support (Android only)
  • Support Custom Accessory Icons in Object Cell
  • Support Decimal pad in SimpleProperty FormCell control
  • SideDrawer Navigation Page Enhancements
  • Offline OData Enhancements
  • Create client enhancements
• Web (already supported on Mobile)
  • Bottom Navigation Control
  • Enhance loading Indicator – busy indicator at lazy loading time
• BAS editor-Additional enhancements
  • Run your MDK web application in the dev space
  • Connect to the SAP Mobile Services preview (CF) landscape
  • Turn off the platform validation warning

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

• MDK Guides
• API references
• MDK Samples GitHub repositories

I am looking forward to your feedback/comments.

Jitendra