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 soon to be available on the community Download page).

SAP Mobile Services Client has also been updated and available in Google Play Store and in Apple app store.

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
  • Tabs control enhancements
    • Support preloading Tabs
    • Support Tabs in a Modal page
    • Support binding rules for Tab Items
  • New API to return page metadata in JSON format
  • New Target path – #Page:-Current
  • New API to reset FormCell controls
  • Support Helper Text in FormCell controls
• Mobile Only
  • Multi User Support (iOS)
  • Support force light mode setting
  • Access MDK client logs from an external storage (Android)
  • Additional Languages supported
  • New API for OfflineODataProviderProxy
  • Create client enhancements
• Web (already supported on Mobile)
  • Support activity indicator when loading and rendering a page
  • FormCell control enhancements
• BAS editor-Additional enhancements
  • New MDK i18n Editor
  • Preview your MDK web app in the dev space
  • List down unused files in your MDK metadata project
  • MDK metadata migration functionality

Support preloading Tabs in a Tabs control

You can now preload all or a predefined number of tabs in a Tabs control so that you can access data from the tabs even if the user hasn’t selected the tab.

This enhancement can be useful in following use cases:

• App developer may want to pre-populate some of the fields on next tab while providing the information in one tab
• Providing a better user experience in preloading tabs next/previous to currently clicked tab
• Allows the developer to get the value from controls on other tab pages before being selected by the user

          Check documentation for details.

Support Tabs in a Modal page

You can now display modal page’s content in multiple tabs instead of a single long scrolling page.

Note: there is currently a known issue in the Android client for this feature that we will be fixing in upcoming patch.

Support binding rules for Tab Items

You can now bind the Items property for Tabs control to a rule that allow you to return dynamic number of tabs on load.

In below example, if there is a SalesOrders for a given Customers, then end user will see the SalesOrders tab.

export default function TabItems(context) {
    let items = [
        {
            "_Type": "Control.Type.TabItem",
            "Caption": "Details",
            "Image": "sap-icon://detail-view",
            "PageToOpen": "/MDK60/Pages/Tabs/Customers_Detail.page",
            "_Name": "TabItem1"
        },
        {
            "_Type": "Control.Type.TabItem",
            "Caption": "Address",
            "Image": "sap-icon://addresses",
            "PageToOpen": "/MDK60/Pages/Tabs/Customers_Address.page",
            "_Name": "TabItem2"
        }
    ];
    if (context.binding.SalesOrders && context.binding.SalesOrders.length > 0) {
    items.push({
      "_Name": "TabItem3",
      "Caption": "SalesOrders",
      "Image": "sap-icon://my-sales-order",
      "PageToOpen": "/MDK60/Pages/Tabs/CustomerOrders_List.page"
    });
  }
    return items;
}

New API to return page metadata in JSON format

As we introduced PageMetadata support for Navigation action to dynamically build a page definition in previous release, we now adding a new API getPageDefinition that returns the specified page definition in JSON format, this will simplify the dynamic page creation by reusing an existing page edition and then adding additional modifications on top of it.

In below example, I am adding an action bar dynamically to a page which currently doesn’t have any action bar item.

export default function getPageMetadata(clientAPI) {
    //pageRef has complete page definition of the mentioned page
    let pageRef = clientAPI.getPageDefinition('/MDK60/Pages/Tabs/Customers_List_Preload.page');
    console.log(pageRef);
    //adding a new action bar dynamically
    let newActionBar = {
        "Items": [{
            "_Name": "ActionBarItem0",
            "Caption": "Item",
            "SystemItem": "Add",
            "Position": "Right",
            "IsIconCircular": false,
            "Visible": true,
            "OnPress": {
                "Name": "/MDK60/Actions/GenericNavigation.action",
                "Properties": {
                    "PageToOpen": "/MDK60/Pages/FormCell_Mobile_Web/Customers_Create.page",
                    "ModalPage": true
                }
            }
        }],
        "_Name": "ActionBar0"
    };
    pageRef.ActionBar = newActionBar;
    clientAPI.executeAction({
        "Name": "/MDK60/Actions/GenericNavigation.action",
        "Properties": {
            "PageMetadata": pageRef
        }
    });
}

New Target path – #Page:-Current

You can use#Page:-Current a new Target Path key to retrieve the current page’s Page Proxy, this allows you to reference the current page similar to #Page:-Previous reference the previous page.

New API to reset FormCell controls

• The reset API allows you to reset the form cell controls back to its initial state and any binding or rules assigned to its properties will also be re-resolved.
• Any user entered values will be discarded when the control is reset back to the initial state.
• When resetting, OnValueChange on the control doesn’t trigger.
  

These APIs are available for all Form Cell Controls, FormCellContainer and FormCellSection.

• To reset a Form Cell control in a Form Cell page:

context.getPageProxy().evaluateTargetPathForAPI('#Page:-Current/#Control:FCCreateDOB').reset();

• To reset a Form Cell container in a Form Cell page:

context.getPageProxy().evaluateTargetPathForAPI('#Page:-Current/#Control:FormCellContainer0').reset();

• To reset a Form Cell control in a Section page:

context.getControl('SectionedTable0').getSection('SectionFormCell0').getControl('FCCreateDOB').reset();

• To reset a Form Cell container in a Section page:

context.getControl('SectionedTable0').getSection('SectionFormCell0').reset();

Support Helper Text in FormCell control

Form Cell Controls now support HelperText property that is a label below the control to serve as helper information text to guide user.

On Android, helper text is currently only supported for the following Form Cell controls:

• Title Form Cell
• Simple Property Form Cell
• Switch Form Cell
• Signature Capture Form Cell
• Note Form Cell
• Filter Form Cell

{
    "Value": "Enter Date",
    "_Type": "Control.Type.FormCell.DatePicker",
    "_Name": "FCCreateDOB",
    "IsEditable": true,
    "IsVisible": true,
    "Caption": "DOB",
    "Mode": "date",
    "HelperText": "@ should be present in Email value"
}

Multi User Support (iOS)

MDK now extends supporting multi-user login capability to iOS client (Android support is already available). 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 applicable to Cloud Foundry only. 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 basic mobile application firstly, 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.

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 force light mode setting

You can now force your MDK application UI to always be in a light mode in despite of device’s Dark mode is enabled or not by setting below property in the MDKProject.json

"ForceLightUIMode": true

Note:

• This setting can’t be changed at runtime. To enable or disable this mode, you must build a new client.
• You can use getAppearanceMode()ClientAPI to display the current appearance mode in your app

Access MDK client logs from an external storage (Android)

Due to security reasons, we have kept MDK client logs inside the internal storage in Android devices and these logs are not accessible outside the app (e.g., via Device File Explorer) once the app is signed and in production mode. Only way to troubleshoot the client logs (during development) is to upload it to the Mobile Services and download it from there.

A new option was added to the Application Settings which allows you to copy the client logs to external storage where they can be downloaded from the device for review and troubleshooting.

Additional Languages supported

MDK additionally supports below languages/dialect:

• Catalan (ca)
• Finnish (fi)
• Greek (el)
• Mexican Spanish (es_MX)
• Swiss German (de_CH)
• Swiss Italian (it_CH)
• Thai (th)
• Vietnamese (vi)

New API for OfflineODataProviderProxy

We have introduced the following APIs:

• hasPendingDownload– Whether or not there is a pending download (a download that was canceled either explicitly or because the provider was closed). It may be possible to continue the download by triggering a new download.
• hasPendingUpload -Whether or not there is a pending upload (an upload that was canceled either explicitly or because the provider was closed). It may be possible to continue the upload by triggering a new upload.
• isRequestQueueEmpty- Checks whether or not, there are any pending requests stored in the request queue that have not yet been uploaded.
  Use case – Inform the user about uploading the local changes first before logout/resetting the app.

export default function Logout(context) {
let provider = context.getODataProvider('/MDK60/Services/sample.service');
if(provider.isRequestQueueEmpty() == false)
{
    alert("It seems you have not uploaded the local changes to the server, please upload it before logging out");
}
else{
    context.executeAction("/MDK60/Actions/Logout.action");
}
}

Support activity indicator when loading and rendering a page

This feature is already available in the Mobile client and is now supported in the web environment.  

You can now display an activity indicator when page is being loaded and will be dismissed when its content is rendered.

//Excerpt of a page

"LoadingIndicator": {
    "Enabled": true,
    "Text": "Page is loading.."
},

FormCell control enhancements

• Support MinNumberOfLines in FormCell Note control: This feature is already available in the Mobile client and is now supported in the web environment.  

Apps can now set minimum lines for Note Form Cell to allow better distinguish when you input multiple lines with texts.

For example, in below metadata, MinNumberOfLines are set to 4 and MaxNumberOfLines are set to 6, so when page is opened, Note Form Cell displays 4 lines by default and cell height grows to maximum 6 lines while entering inputs. At any point of time, it will display only 6 lines however there is no limit to have number of lines.

{
"_Type": "Control.Type.FormCell.Note",
"_Name": "Description1",
"MaxNumberOfLines": 6,
"MinNumberOfLines": 4,
"PlaceHolder": "MaxNoOfLines 6 & MinNoOfLines 4"
},

Check the documentation for details.

• Password input type in Simple Property control: This feature is already available in the Mobile client and is now supported in the web environment.  
  You can use Keyboard type as Password for simple Property control, value input in Simple Property fields with these keyboard types will automatically mask the input values.

Check the documentation for details.

• Support Custom Accessory Icons In Object Cell: This feature is already available in the Mobile client and is now supported in the web environment.You can now provide custom accessory icon by setting AccessoryButtonIcon property or AccessoryButtonText (iOS and Web 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.

Create client enhancements

• Metadata Migration – In this release, MDK is now upgraded to support NativeScript 8.0 which introduces some changes, please follow these guide to see if you need to update your MDK project in order to run it with 6.0.
• You will no longer be asked to create iOS client whether for device or simulator as all MDK frameworks now updated to using xcframeworks. Same iOS client can be run in device and simulator as well.
• Support Android Version Code in MDKProject.json: You can now set VersionCode in the json. It allow you to set version number of your app. This version code is the same one that’s used by Google Play Store to dictate your version of your app. For more details please see Android Application Version.

You can set the VersionCode to Auto where we will automatically generate the version code based on the AppVersion value or you can set your own value to have better control of your version code.

For more details please see Android Application Version Code.

//MDKProject.json
{
  "AppName": "MDK60",
  "AppVersion": "1.0.0",
  "AndroidVersionCode": "Auto",
  "BundleID": "com.sap.mdk.mdk60",
  "Externals": [],
  "NSPlugins": [],
  "UrlScheme": "mdk60",
  "ForceLightUIMode": true
}

New MDK i18n Editor

You can now directly display and compare all the keys and values of i18n files in i18n editor (Right click any i18n.properties > Open with MDK i18n Editor)

• You can select i18n files from the dropdown and display & compare all the related keys and values
• If there is any missing key/value missing in any language file, it will be highlighted and showed as warning.
• You can sort the keys in ascending/descending order
• You can filter the key by searching

Preview your MDK web app in the dev space

You can now preview your MDK web application in the dev space itself, so once you have deployed your MDK metadata project to your Dev space, execute MDK: Build command (View menu > Find Command> MDK: Build) and Preview will appear right there in the dev space.

If you make any changes in the metadata, executing MDK: Build will reload the preview with changes.

List down unused files in your MDK metadata project

You can find out what all the files in your MDK metatdata project are not used by simply executing MDK: Check unused files command (View menu>Find Command), results can be seen in Output panel> MDK Extension. See documentation for the steps to open the output panel to view the result.

MDK metadata migration functionality

As part of MDK 6.0 release, changes to your metadata imports are required. To facilitate this process, we are introducing MDK metadata migration functionality, this functionality will migrate your existing MDK metadata project to latest schema version.

Execute the MDK: Migrate command (right click Application.app> MDK: Migrate) to

• leverage new features from new schema, this includes:
  • a new required property has been added
  • Existing property’s name/value has been updated
  • Unused property has been removed
• Migrate to new import syntax
  • If your project has .ts files (in Extensions folder)
  • Any rules with import statement(s)

The affected files will be listed in the MDK migration perspective that allow users to view the changes before they choose to update their project.

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 Sample apps GitHub repositories

I am looking forward to your feedback/comments.