What’s new in Mobile development kit client 24.11

Jitendra_Kansal · ‎2024 Dec 04

I am happy to announce that a new release of the Mobile Development Kit(MDK) is available for all Mobile Services customers and can be downloaded on the SAP Software Center and also available on community Download page.

The SAP Mobile Services Client 24.11.0 has already been updated both in the Google Play Store and in Apple App Store.

SAP Mobile Development Kit enables developers and technical business users to build cross-platform mobile 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).

Below enhancements are available only on iOS and Android platforms:

New UI enhancements

API and Syntax enhancements

Fiori ActionBar

We have enhanced the existing MDK ActionBar to support additional functionalities. The new changes include the following:

Logo
- The logo always appears on the left side of the ActionBar.
- On iOS, the logo displays only if there is no back navigation available.
- On Android, the logo displays when there is no SideDrawer menu and no back navigation available.
Search
- When section search is enabled, a search button will automatically appear as the first right-positioned item. The search bar will be displayed when the search button is pressed.
- On iOS, the search bar's position varies based on the device type:
  - Phone: below the ActionBar
  - Tablet: on the right side of the ActionBar (after the right-positioned items), and in tablet partial modal: below the ActionBar.
- On Android, the search bar will always be displayed by replacing the ActionBar.
Enabled Property for ActionBar items
DataSubscriptions is now supported on the ActionBar definition.
New proxy classes ActionBarProxy and ActionBarItemProxy , have been introduced.

For more information, refer to th ActionBar documentation.

Note: If you have used MDK ActionBar in your application, you can migrate your app to the new Fiori ActionBar in SAP Business Application Studio. To do this, right-click the Application.app file and select MDK:Migrate.

Fiori ActionBar in an MDK App

FormCell Label Control

We have introduced a new FormCell control called Label, which allows users to display multiple lines of free text while supporting various styling and display properties.

{

"_Type" : "Control.Type.FormCell.Label" ,

"_Name" : "FormCellControl" ,

"Text" : "The Mobile Development Kit for SAP Mobile Services is a metadata-based application development platform." ,

"TextWrap" : true ,

"MaxLines" : 10 ,

"Style" : "/DemoApp/Rules/Label/GetStyle.js"

}

Note: This control is display-only, non-editable, a nd does not accept user input. The control displays a single body of text, and its associated properties are applied to the entire body of text. This control is supported in both FormCell Container and FormCell Section and works in both single and multi-column layouts. For more information, see this documentation .

FormCell Label Control in an MDK App

FormCell MultiSorter Control

We have introduced a new FormCell control called MultiSorter. Compared to the existing control, this new control allows users to

Define Sort Order on multiple sort items
Change the sort sequence of the item by dragging various items
Change the Sort direction for each sort items (ascending or descending order)
Customize the ascending/descending labels
{
"_Type" : "Control.Type.FormCell.MultiSorter" ,
"_Name" : "FormCellMultiSorter0" ,
"Caption" : "Multi by" ,
"Items" : [{
"AscendingLabel" : "Lowest" ,
"DescendingLabel" : "Highest" ,
"DisplayValue" : "No of Products" ,
"ReturnValue" : "NumberOfProducts"
},
{
"AscendingLabel" : "Asc" ,
"DescendingLabel" : "Desc" ,
"DisplayValue" : "Category" ,
"ReturnValue" : "CategoryName"
}
]
}

For more information, see this documentation.

FormCell MultiSorter control in an MDK App

Built-in Search Enhancements

Until now, the built-in search functionality in MDK applied only to OData properties directly bound to the properties of the UI control, such as Object Cell. We have enhanced the built-in search to support:

Additional Properties: Expands search functionality to include properties that are not directly bound.
Case Sensitivity: Enable case-sensitive search support in Offline OData.
Contains Search: Supports the use of the contains function in Offline OData V4.
Numeric Search: Enhances the MDK Search feature to accommodate numeric properties.

"Search" : {

"Enabled" : true ,

"Placeholder" : "Item Search" ,

"BarcodeScanner" : true ,

"Delay" : 500 ,

"MinimumCharacterThreshold" : 3 ,

"AdditionalProperties" : [ "City" , "Street" , "PostalCode" , "Country" , "PhoneNumber" , "Gender" ],

"Options" : {

"CaseSensitive" : false ,

"NumberSearch" : {

"Enabled" : true ,

"ConversionMethod" : "NoConversion" // “UseConCat” or “UseCast”

}

},

For more information, see this documentation.

Note: Online Searches support contains or convert numeric values to strings using concat or cast, then apply contains. Offline Searches convert numeric values to strings using cast, then apply contains. (applies to OData V4 only).

Enhancements to DatePicker in Time Mode (iOS Only)

Previously, an additional tap was required to select the time in the FormCell DatePicker control on iOS platform. With this release, you now need only one tap to display the time values.

Built-in File Viewer for PDFs, Text, Images, and Media files (Android Only)

A common scenario on Android devices is that users often need to choose third-party apps to open different file types after downloading them. With this release, however, it is now possible to open files such as PDFs, text documents, images, videos, audio files, and ZIP archives directly within a native file viewer on Android, without leaving the current application. For comparison, iOS has already has built-in support for these file types.

A new metadata property, UseExternalViewer, applicable to Android only has been introduced in the OpenDocument action. This property allows users to open a file from a specified location using a third-party application. By default, it is set to false, meaning the app will use the built-in file viewer on Android. For more information, see this documentation.

// OpenDocument.action

{

"Path" : "res://document.pdf" ,

"_Type" : "Action.Type.OpenDocument" ,

"UseExternalViewer" : false

}

Built-in file viewer in MDK App on Android Platform

Support for Linethrough and Underline Styling in Object Cell

You can apply Linethrough and Underline styling properties in the Object Cells (Object Table and Object Collection controls). For more information, see this documentation.

.objectcelltitle {

text-decoration : underline ;

}

.objectcellsubhead {

text-decoration : line-through ;

}

Styling support in Object Cell in an MDK App

Styling Support for Message Box

With this release, the Message Box action now supports customized styling. This style overrides semantic-based styling. The following are the properties of the custom style:

Dialog: Applies background and text alignment styles (iOS only) to the message.
Title: Applies color and font styles to the title text of the message.
Message: Applies color and font styles to the message text.
OK Button: Applies font color to the OK button text.
Cancel Button: Applies font color to the Cancel button text.

For more information, see this documentation.

Message Box Styling in an MDK App

Styling Support for Popover and Items Menu

For the Popover menu, users can set the whole menu's background color and adjust text alignment, font size, and other styles for title and message on both iOS and Android platforms. On the Android, users can also set the font color for the title and message. For more information, see this documentation.

For Popover menu items, users can set text alignment, font color, and icon's background color on both iOS and Android platforms. Additionally, on Android, user can also set the icon position(Leading or Trailing).

Popover Menu Styling in an MDK App

Visible Property Support for Key-Value Items in a Targeted Section

Key-value items’ visibility is now supported on both targeted and non-targeted sections.

HelperText Support for ListPicker, Segmented, DatePicker Sorter and DurationPicker FormCell Controls on Android

Support for HelperText has been added to the following FormCell controls on the Android platform: DatePicker, ListPicker, Sorter, DurationPicker, and Segmented. When the HelperText property is set for these form cells, the helper text will be displayed if there is no validation view.

HelperText in an MDK App

Enhanced and Simplified Validation Properties in FormCell Controls

The validationProperties for FormCell controls have been replaced with the Validation property. The validationProperties are now deprecated but still supported at runtime to maintain backward compatibility.

Support for .svg Image Type

With this release, we are extending support for the .svg image type in the Actionbar and Fiori Toolbar on both iOS and Android platforms. The enhancement includes:

Direct support for .svg image files: Since third-party libraries (for iOS and Android) are used to support the .svg image type, not all svg files may be compatible. In metadata , you can use :
"Icon": "https://raw .githubusercontent .com/SVGKit/SVGKit/master/Demo-Samples/SVG/Lion.svg",
"Icon": "/DemoApp/Images/ShareButton.svg",
Support for vector resources provided by iOS and Android platforms
- iOS: Symbol Image Set and Image Set (add .svg files). If an image set and a symbol image set have the same name, then use the symbol image set first.
  "Icon": "$(PLT, 'res://test.walk.arrival', 'res://test_rectangle')",
  "Icon": "res://test_rectangle",
- Android: Vector Asset

Leverage SAP AI Core’s Chat Completions API in Mobile Applications

We are introducing a new MDK Action called Chat Completions, which connects to SAP AI Core and supports the /chat/completions endpoint.
Instead of calling an LLM API provided directly by an LLM service provider, SAP AI Core offers a unified way to access LLM APIs from the most popular LLM service platforms. SAP AI Core manages the AI model and ensures scalable deployment in enterprise applications, maintaining compliance and security. For more details on the available Generative AI models in SAP AI Core, See the documentation here.

The Chat Completion LLM API can address various scenarios, including:

Text Generation
Summarization
Customer Support
Conversations and Dialogues
Translation
Personal Assistants
Code Completion
Creative Writing
Sentiment Analysis
Image Processing

Note: You should evaluate if the selected LLM provides suitable response for a given scenario.

In order to use the MDK AI action, follow these steps:

Create an instance of SAP AI Core and then generate a Service Key.
Create an instance of SAP AI Launchpad.
Assign the required role to access the SAP AI Launchpad.
Set up an AI API Connection.
Create a configuration by selecting a supported model from an LLM service provider.
Create a deployment for the configuration created in the previous step.
Configure a destination in your Mobile Services application, pointing to the deployment endpoint and using the Service Key of SAP AI Core instance.
For detailed guidance on setting up SAP AI Core, please refer to the SAP AI Core Service Guide.

Overriding Default Scanning Capabilities in MDK Client

You can now override the default scanning capabilities in the MDK Client with any third-party scanner, such as a Laser Scanner, RFID Scanner, etc., providing specialized scanning functionalities. This feature is particularly useful in the following scenarios:

Replacing the in-built camera scanner with a third-party scanner. You will be required to add the appropriate scanner library to your MDK client and override the default camera scanning calling the scanner library function.
Triggering a hardware scanner instead of the camera scanner to capture data.

A new event, OnScanPress , is now available for controls such as SimpleProperty FormCell, Search Field in Collection Controls (Object Table, etc.), and Search Field in ListPicker. This event is triggered when the barcode scan button is pressed. It allows the app to implement custom scanning capabilities via a rule. When the rule is executed, the default barcode scan using on-device camera will not be triggered and the rule is expected to return a promise. If the promise is resolved with a string result, the search will carried out using that result string. If the promise is rejected, then it will fall back to use the default barcode scan using on-device camera.

Add getName() Method to Page Proxy Class to Return Page Name

The getName () method is now available for PageProxy to return the specified page name.
clientAPI.getPageProxy().getName();

Data Subscription Support for Fiori Toolbar

Data Subscription is now supported for the FioriToolbar . When OData entities defined in the new DataSubscriptions property are updated, the FioriToolbar will automatically be redrawn. This property can be set via metadata.

"FioriToolbar" : {

"_Type" : "Control.Type.FioriToolbar" ,

"_Name" : "NewFioriToolbar" ,

"DataSubscriptions" : [

"ProductCategories"

],

"Items" : [{

//Fiori Toolbar item

}, ]

}

The associated FioriToolbarProxy has been enhanced with two new methods:

getDataSubscriptions : Returns the DataSubscriptions property of the FioriToolbar.
let datasubs = context.getFioriToolbar().getDataSubscriptions();
setDataSubscriptions : Sets the DataSubscriptions property of the FioriToolbar.
const SO = ["SalesOrderHeaders"];
const fioriToolbar = context.getFioriToolbar();
fioriToolbar.setDataSubscriptions(SO)

Proxy Classes for Key-Value Collection, Simple Property Collection, Data Table, Object Table, Object Collection and Object Card Collection

To allow better access of specific controls when executing rules, we are introducing below new Proxy Classes:

KeyValueCollectionProxy, KeyValueItemProxy
SimplePropertyCollectionProxy,SimplePropertyCellProxy
DataTableProxy (Earlier called as DataTableSectionProxy, consider to rename it as DataTableProxy), DataTableRowProxy, DataTableCellProxy (represent each cell in a DataTableColumn)
ObjectTableProxyand ObjectCollectionProxy,ObjectCellProxy, ObjectCellContextMenuProxy, ObjectCellContextMenuItemProxy, ObjectCardCollectionProxy , ObjectCardProxy, ObjectCardActionItemProxy, ObjectCardOverflowButtonProxy

The new and enhanced classes support these methods, with enhanced classes also retaining their existing methods:

getName
getType
getParent
getPageProxy

getParent should return the parent proxy e.g. ObjectCellProxy's getParent should return ObjectTableProxy if it's contained in an Object Table.

Enhance setStyle() API to Support Nested Controls

In this release, we have enhanced the setStyle() client API to support nested controls. Previously, the setStyle() API only supported a single-level control view. For example, the MultiSortercontrol has the following style format:
Styles: {
"Caption": "CaptionStyle",
"MultiSorter": "MultiSorterStyle",
"Items": {
"DisplayValue": "DisplayValueStyle",
"DirectionLabel": "DirectionLabelStyle"
}
}

The setStyle()API could be used to set styles for Caption property in MultiSorter, but it would fail if you attempted to set a style for DisplayValue. With this enhancement, nested controls can now be specified using a slash (/) to combine the control names. For example, you can now use below to set the style for DisplayValue setStyle("<StyleName>", "Items/DisplayValue").

New to MDK development?
Follow these tutorials to get started and learn more about Mobile development kit!
I am looking forward to your feedback/comments.