What’s new in Mobile development kit client 6.3

Jitendra_Kansal · ‎09-20-2022

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 will be updated soon 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/ VSCode extension) and run it natively on Mobile (Android & iOS) and as a web application (online) in the browser.

Please note, MDK 6.3 Android clients only support Android 8 and above.

This release includes the following:

- New UI enhancements
- API and Syntax enhancements
- General enhancements

Object Card Collection

The object card is a flexible visual container displaying critical information regarding a single object. It previews the object and serves as the entry point to the full object detail page. The object card is highly customizable to accommodate various content types and use cases.
Object Card supports two layout styles: HorizontalScroll and Vertical. For more information, please see documentation.

Object Card layout in MDK Mobile client

Object Card layout in MDK Web application

Filter Feedback Bar

Filter feedback bar is a horizontal bar that appears (on Sectioned Table) above a list of content. It uses area interactive chips to communicate which filters have been applied to the list, and allows users to quickly apply frequently-used filters.

"FilterFeedbackBar": {

    "ShowAllFilters": "#Page:Products_ObjectTable/#ClientData/ShowAllFilters",

    "FastFilters": [{

            "_Name": "OrderByName",

            "_Type": "Control.Type.FastFilterItem",

            "FilterType": "Sorter",

            "Label": "Order by",

            "DisplayValue": "Name",

            "ReturnValue": "Name"

        },

        {

            "_Name": "OrderByPrice",

            "_Type": "Control.Type.FastFilterItem",

            "FilterType": "Sorter",

            "Label": "Order by",

            "DisplayValue": "Price",

            "ReturnValue": "Price"

        },

        {

            "_Name": "FilterByDimensionDepth",

            "_Type": "Control.Type.FastFilterItem",

            "FilterType": "Filter",

            "FilterProperty": "",

            "Label": "Depth",

            "DisplayValue": "< 25",

            "ReturnValue": "DimensionDepth lt 25",

            "CustomQueryGroup": "Depth"

        },

        {

            "_Name": "FilterByCategoryName",

            "_Type": "Control.Type.FastFilterItem",

            "FilterType": "Filter",

            "FilterProperty": "",

            "Label": "",

            "DisplayValue": "Notebooks",

            "ReturnValue": "Category eq 'Notebooks'",

            "CustomQueryGroup": "Category"

        }

    ],

    "_Name": "FilterFeedback",

    "_Type": "Control.Type.FilterFeedbackBar"

},

For more information, see documentation

Filter Feedback bar in MDK Mobile client

Filter Feedback bar in MDK Web application

SAP Fiori Design Enhancements for Existing Controls

With latest SAP Fiori design changes, below UI controls have been enhanced.

- Object Cell – new design and new UI properties such as Avatar Stack (replacing Detail Image), Avatar Grid, Horizontal Icons, Tags, Display Description in mobile (by setting DisplayDescriptionInMobile to true).
  
  Object Cell control in MDK Mobile Client
  
  Object Cell control in MDK Web application
  
  Note: Metadata using previous ObjectCell properties will still render. You can migrate your metadata to take advantage of the new properties.
- Object Header - new design and new UI properties such as Labels, enhanced Tags (with color options or styling), KPI View, ability to display both status icon and text at the same time, and new positioning option for status and SubStatus.
  
  Object Header control in MDK Mobile client

Object Header control in MDK Web application

- Buttons –
  - new horizontal layout option for Button Table
  - new design and UI properties for FormCell Button and ButtonItem on SectionButtonTable such as more Button Types, Semantic, Image, and the ability to control width of the button (full width or wrap content, only available for Section Button Table).
- Text Inputs – FormCell controls like SimpleProperty, Note, and Title are enhanced with new design and one new UI property, Enabled, to allow app to fully disable a control when it's set to false. Additionally, Simple Property Form Cell also allows user to show or hide entered value when the keyboard type is Password or NumberPassword.

Sorting and Filtering for Additional Collection Types

In addition to sorting and filtering for Object Table, we now support the same functionalities for Object Collection, Grid Table, Data Table, Contact Cell, and Extension Collection (mobile only).

Sorting and Filtering for Object Collection, Data Table in MDK Mobile client

Sorting and Filtering for Contact Cell in MDK Web application

Support NativeScript Views in Extensions

You can now create and return NativeScript views in your extension controls for Section Extension, Form Cell Extension, Object Cell extension and Object Header Extension.
You can do this the same way it is already supported for Control Extension by returning a NativeScript view from the view() method and return false from the viewIsNative().
For more information, check the documentation. Additionally, have a look at this showcase app covering how to use a NS slider view in a Form Cell Extension.

Extending Styling Support for Font Icons

Added support for styling for Font icons when used in the following control properties:

ObjectCell > Icons

ObjectCell > ActionButton > Icon

ChartCard > TrendImage

KPIItem > Image

ObjectHeader > Chart > TrendImage

ObjectHeader > Chart > KPI > Icon

ObjectHeader > KPI > Icon

SideDrawer > DrawerButton

SideDrawer > Header > Icon

SideDrawerItem > Image

TabItem > Image

ToastMessage > Icon

PopoverItems > Icon

Toolbar Enhancement

A new property Visible has been introduced in the metadata to control the visibility of the ToolBar on a page.

Client API enhancement for both the Toolbar and the Toolbar items:
- ToolbarProxy : ToolbarProxy represents the entire toolbar. This proxy will be passed when a rule is assigned to properties of the toolbar e.g. the Visible It contains the following new APIs:
  - getToolbarControls() - legacy API that return array of Toolbar items (NativeScript instance of the items). This API is now deprecated and you should call getParent().getToolbarControls() instead.
  - getToolbarItems() - new API that returns an array of Toolbar items proxy (ToolbarItemProxy) contained within this Toolbar
  - getToolbarItem(itemName) - new API that returns ToolbarItemProxy instance of the item by the name (as defined in the _Name property)
  - getVisible() - get visibility of the entire Toolbar
  - setVisible() - set visibility of the entire Toolbar
```
export default function SetToolbarVisibility(context) {

    var toolbar = context.getToolbar();

      var getToolbarVisible = toolbar.getVisible();

      if (getToolbarVisible === true) {

        return toolbar.setVisible(false);

      } else if (getToolbarVisible === false) {

        return toolbar.setVisible(true);

      }

  }
```
- ToolbarItemProxy: ToolbarItemProxy represents each Toolbar item and will be passed whenever a rule is assigned to Toolbar item's properties or events. e.g. Caption or OnPress event. This proxy introduces these new APIs:
  - getParent()- new API that will return this item's parent ToolbarProxy
  - getVisible()- get visibility of this Toolbar item
  - setVisible()- set visibility of this Toolbar item.
```
export default function AmendToolbarItemVisibilityByName(context) {

    var toolbar = context.getToolbar();

    var getToolbarItem = toolbar.getToolbarItem('Logout');

    var getToolbarVisible = getToolbarItem.getVisible();

    if (getToolbarVisible === true) {

        return getToolbarItem.setVisible(false);

    } else if (getToolbarVisible === false) {

        return getToolbarItem.setVisible(true);

    }

}
```
- PageProxy: There's also a new API introduced in PageProxy as part of this enhancement: getToolbar() in PageProxy that will return the ToolbarProxy instance of the associated Toolbar of that page.

Offline OData: Removing Defining Request

We have added a new Offline OData action to remove a defining request from the specified store. Also, removing a defining request does not necessarily mean that the local data is deleted as well. As long as another defining request is addressing the local data, the data remains intact.

This feature can be quite helpful in case of a multi-user scenario. User A logs on and downloads the data has a filter in the defining request specific to that user, when user B logs in, that defining request needs to be removed and switch it out for new defining requests for the user B.

{

  "_Type": "Action.Type.OfflineOData.RemoveDefiningRequest",

  "Service": "/MDK63/Services/SampleServiceV2.service",

  "DefiningRequest": {

    "Name": "Products"

  }

}

This action requires the parameter allow_defining_query_removal is set to true in the Offline configuration for the given app in the mobile services admin cockpit. This parameter has to be set before the Offline service is first initialized. For more information, check the documentation.

As part of this feature, we have introduced a new ClientAPI getDefiningRequests() to retrieve all the Defining Requests associated for a given Offline OData service.

//Excerpt of a rule

let definingRequests = context.getODataProvider('/MDK63/Services/SampleServiceV2.service').getDefiningRequests();

Enhance Decimal Separator Support

We have modified MDK to accept both period and comma as decimal separators to support both formats in OData operations for Edm.Decimal properties. Comma will be accepted when the detected app locale region supports comma as the decimal separator.

Cross-Context SSO Login Support

The cross-context SSO feature makes onboarding easier for users by transferring OAuth tokens from an established session to their MDK mobile client.

For example, a user opens the SSO onboarding URL on their desktop. The user can open the MDK client, navigate to the QR code scanning screen, and scan the QR code before it expires. If successful, the MDK client will get onboarded automatically. The user does not have to enter their credentials again. For more information, check the documentation.

Override Application.app

Versatility of the CIM file has been enhanced to support overriding of the Application.app as well.
In order to support component project modifying properties in the Application.app metadata, the CIM file now supports specifying the Application.app. In order to do so:

Duplicate the Application.app in the Base project, rename it e.g. OverrideApplication.app

Paste the duplicated file in your component project

In CIM file, add an integration point pointing
- Source: OverrideApplication.app from your component project
- Target : Application.app from your Base project
  For more information, check the documentation.

Dynamically Switch between Multi-user and Single user Modes via QR Code

MDK client will use the multiUser flag contained in the on-boarding QR code from the Mobile Services cockpit and in BAS editor (in the Application.app editor). This flag indicates whether the client should be onboarded in multi-user mode or not.

When the flag Allow Upload of Pending Changes from Previous User for the app in the Mobile Services cockpit is enabled, the generated QR Code will automatically include multiUser=true, otherwise it will include multiUser=false. This flag will overrides the MultiUserEnabled flag in the BrandedSettings.json.

Support NPM Plugins

You can now include NPM Plugins to be installed in your branded client via the “NPMPlugins” option in the MDKProject.json.

Make sure to add the modules from these plugins that you would consume in your application in the “Externals” property. These modules can be accessed in rules via the required API.

For more information, please check the documentation . Additionally, have a look at this showcase app covering how to generate PDF document using open source library pdfmake.

//MDKProject.json



{

  "AppName": "MDK63",

  "AppDisplayName": "MDK 63",

  "AppVersion": "1.1.0",

  "AndroidVersionCode": "Auto",

  "BundleID": "com.sap.mdk.sixthree.jk",

  "NSPlugins": ["nativescript-pdf-view"],

  "UrlScheme": "mdk63",

  "ForceLightUIMode": false,

  "Externals": ["underscore", "ramda", "validator", "pdfmake/build/pdfmake", "nativescript-pdf-view"],

  "NPMPlugins": ["https://github.com/jashkenas/underscore", "ramda@0.28.0", "validator", "pdfmake"]

}

//Excerpt of a rule



import * as pdfMake from "pdfmake/build/pdfmake";

DeviceID for MDK Web Application

In the MDK web runtime, DeviceId property will now return the browser's user agent string.

#Application/#AppData/DeviceId

Additional Languages Supported

Added support for following additional languages:

Estonian (et)

Latvian (lv)

Welsh (cy)

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.

Jitendra