What’s new in Mobile development kit client 24.7

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.7.0 will soon be available in the Apple App Store and Google Play 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 enhancementsCards Collection ControlSupport Column Specific Editing in Data Table ControlSupport Multiple Columns in a Form Cell SectionCaption Functionality for Note FormCell ControlEnable Multiple Attachments Selection in Attachment controlStyling Support for Banner Message and Progress Banner ActionsAdditional Styling Support for Images and IconsAPI and Syntax enhancementsAccess OData Service Metadata Document ($metadata)Streamlined Filter Criteria to OData ConversionAccess the Instance of an Extension ControlRefresh MetadataAccess Section Header and its itemsProxy class for Button Table, Section Header and Section Footer

Cards Collection Control
With this release, we are introducing a new UI control: Cards collection. A card collection provides brief, related pieces of information and serves as an entry point, teaser, or preview to more detailed content. By tapping on a card, users can select it and navigate to a dedicated page with comprehensive information.
The contents of a card are categorized into several areas:

Media: is an optional decorative element that allows you to include an image that matches the card context. Header: allows for a quick overview of key information, such as a title, subtitle, or status of the card. When using the card header, only include essential information about the card’s content. An action button within the card header can be used for action that directly impacts the card, for example, to favorite, bookmark, filter the card, or display a pop-up menu displaying additional options.Extended Header: allows up to three additional rows below the Header. Each row can contain one of the followingLabelsTextRatingTagsFooter: is the bottom of a card that can contain two buttons (Primary and Secondary).

The card system offers enhanced customization and flexibility, including adaptable sizing options to fit various form factors and card layouts such as:

Vertical: display the cards in vertical list.Horizontal Scroll: display the cards in horizontally scrollable list. Optionally, you can indicate that all cards should display with same height using the UseSameHeight property.Masonry: display cards in grid-like structure with flexible arrangement with each card adapting to the available space.
For more information, refer to Card Collection.

Cards Collection on iOS and Android

Support Column Specific Editing in Data Table control
The MDK Data Table control now supports column specific editing in Data Table control. You can now set the EditType property to None for a column. That particular column will not be editable while other columns are editable. You can also use a rule to programmatically set cell-specific editing in the table.

Editable Data Table on iOS and Android

Support Multiple Columns in a Form Cell Section
You can now define a multi-column layout in a FormCell Section displaying more FormCell controls in defined columns on the page.

“Layout”: {
“NumberOfColumns”: 3,
“MinimumInteritemSpacing”: 20
}

Please note below behavior of the NumberOfColumns property

On iOS, this setting is only valid in regular mode (iPad or large iPhone Landscape). In compact mode it will always be set to 1 column.On Android, this setting is only valid when current screen width is larger than 600dp. When the current screen width (e.g. in phone portrait mode) is less than 600dp, it will always be set to 1 column.
Multi Column FormCell on iOS and Android

Caption Functionality for Note FormCell Control
Note FormCell control has been enhanced to support Caption and its associated styling options. For more information, refer to this document.

{
“Caption”: “Note’s Caption”,
“_Type”: “Control.Type.FormCell.Note”,
“_Name”: “FormCellControl”,
“IsVisible”: true,
“Separator”: true,
“PlaceHolder”: “Description”,
“HelperText”: “Please enter description”,
“MaxNumberOfLines”: 8,
“MinNumberOfLines”: 2,
“Enabled”: true,
}

Enable Multiple Attachments selection in Attachment Control
Attachment FormCell has been enhanced to allow users to select multiple files at once. This enhancement applies to both iOS and Android platforms.
Adding multiple attachments on iOS and Android

Styling support for Banner Message and Progess Banner actions
You can now style the BannerMessage and Progress Banner actions with newly introduced styling properties:.

Semantic: can be used to apply semantic colors to the banner such as Normal (default), Tint, Positive, Negative and warning. Styles: can be used to customize the banner end-to-end.

You can also style the different states (Progress/Completion) of the ProgressBanner individually.

Banner Styling on iOS and Android

Progress Banner Styling on iOS and Android

Please note that the default style for BannerMessage has been updated: text and stripe color are now grey on iOS, and text color is grey on Android. Find more information, refer to the styling section for Banner Message and Progress Banner actions.

Additional Styling support for Icons and Images
With this release, we support background-color styling option for images and icons in the following MDK controls:

ObjectCellObjectCollectionCellGridTableObjectHeaderKPIHeaderProfileHeaderContactCellObjectCardCardCollection (iOS)Button (iOS)Image sectionImageCollection

Accessing OData Service Metadata Document ($metadata)
We have added new methods to access the OData service metadata document file (.xml).  This file can be used in the application to augment the business logic such as:

Dynamically show or hide OData properties based on an attribute value.Dynamically show or hide OData properties based on an annotation value.Checking max length of field

The getMetadata() API will return a new CSDLDocumentProxy, through which you can access the $metadata of both Offline and Online services.  Once you have this proxy, you can execute the following methods via the proxy:

getOriginalText(): returns the original $metadata content as XML string. You will need to first define the retainOriginalText CSDL option in the. Service file.

Export default function getOriginalText(context) {
//get OData service provider
let provider = context.getODataProvider(‘/MDK2407/Services/SampleServiceV4.service’);
let csdlProxy = provider.getMetadata();
if (csdlProxy) {
alert(‘OriginalText for OData Service is: ‘ + csdlProxy.getOriginalText());
} else {
alert(‘Service is not initialised!’);
}
}​

To enable this, you need to define the following CSDLOptions:

//Offline
{
“DestinationName”: “SampleServiceV4”,
“OfflineEnabled”: true,
“OfflineOptions”: {
“CSDLOptions”: [
“retainOriginalText”,
“retainResolvedText”
]
}
}​

//Online
{
“DestinationName”: “SampleServiceV4Online”,
“OfflineEnabled”: false,
“OnlineOptions”: {
“CSDLOptions”: [
“retainOriginalText”,
“retainResolvedText”
]
}

getCompactXML():  returns the $metadata content as compact XML string.getResolvedText(): returns the resolved $metadata content as XML string with inline references and expanded aliases. You will need to first define the retainResolvedText CSDL option in the. service file.getVersionCode(): returns code for the OData version. If the OData version is considered as a decimal number (e.g. 4.0), then multiplying by 100 will give the code (e.g. 400)getVersionText(): returns text for the OData service version, e.g. “4.0”

Update Cached Metadata
We have added a new API refreshMetadata() that checks the compatibility between the current and the $metadata from the backend server, then updates the $metadata if there is no conflict.

This API returns a promise with a boolean result indicating whether the $metadata was updated successfully. Any $metadata changes happening on the backend server after initializing the data service for the first time will not be reflected unless the users call the refreshMetadata API.

Streamlined Filter Criteria to OData Conversion

When working with Filters on a Section Table, you can now easily convert an array of filter criteria to the OData filter and sorter string representations via below APIs. getFilterActionResult(): returns the content of _filter which should be the resolved OData $filter query string. (null if there’s no filter)getSorterActionResult(): that return the content of _sorter which should be the resolved OData $orderby query string (null if there’s no sorter)

Access the instance of an Extension Control

Expose a new API to allow users to access the extension control instance of the ExtensionFormCell. This instance allows the MDK application developer to call the extension methods if needed to adjust the behavior of the extension control at runtime.
Previously, the users could only access the extension control instance of the ExtensionFormCell through internal properties. Now, this access is officially supported by MDK through the new getExtension() API in the new ExtensionFormCellProxy class.Enhance the existing getExtensions() API of SectionProxy to make it clearer to usersIntroduced three other new proxy classes: ExtensionSectionProxy, ObjectCollectionSectionProxy, ObjectHeaderSectionProxy. They are all subclasses of the existing SectionProxyExtensionSectionProxy will have the getExtension() API, as there can be only 1 extension based on the metadata definitionObjectCollectionSectionProxy & ObjectHeaderSectionProxy will have the getExtensions() API, as the extensions are defined as an array in the metadata definitionExisting getExtensions() API from the SectionProxy will now be marked as deprecated and always return an empty array.

Proxy Class for Button Table, Section Header and Section Footer
To allow better access of specific controls when executing rules, we are introducing below new Proxy Classes:

ButtonTableProxyButtonTableButtonProxySectionHeaderProxySectionHeaderButtonProxySectionHeaderIconProxySectionHeaderLabelProxySectionFooterProxy

These classes support the following methods:

getNamegetTyperedraw

Additionally, all control and section proxy classes support the getParent method.

const className = context.constructor.name;
const name = context.getName();
const type = context.getType();
const parent = context.getParent();

Access to Section Header Items
Enhanced access to the Section Header items. This includes methods to enable/disable and hide/show items in a section header with new API functions:

SectionProxygetHeader()SectionHeaderItemProxygetVisible()setVisible()SectionHeaderButtonItemProxy (Inherits SectionHeaderItemProxy methods) getEnabled()setEnabled()

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.

​ 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.7.0 will soon be available in the Apple App Store and Google Play 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 enhancementsCards Collection ControlSupport Column Specific Editing in Data Table ControlSupport Multiple Columns in a Form Cell SectionCaption Functionality for Note FormCell ControlEnable Multiple Attachments Selection in Attachment controlStyling Support for Banner Message and Progress Banner ActionsAdditional Styling Support for Images and IconsAPI and Syntax enhancementsAccess OData Service Metadata Document ($metadata)Streamlined Filter Criteria to OData ConversionAccess the Instance of an Extension ControlRefresh MetadataAccess Section Header and its itemsProxy class for Button Table, Section Header and Section FooterCards Collection ControlWith this release, we are introducing a new UI control: Cards collection. A card collection provides brief, related pieces of information and serves as an entry point, teaser, or preview to more detailed content. By tapping on a card, users can select it and navigate to a dedicated page with comprehensive information.The contents of a card are categorized into several areas:Media: is an optional decorative element that allows you to include an image that matches the card context. Header: allows for a quick overview of key information, such as a title, subtitle, or status of the card. When using the card header, only include essential information about the card’s content. An action button within the card header can be used for action that directly impacts the card, for example, to favorite, bookmark, filter the card, or display a pop-up menu displaying additional options.Extended Header: allows up to three additional rows below the Header. Each row can contain one of the followingLabelsTextRatingTagsFooter: is the bottom of a card that can contain two buttons (Primary and Secondary).The card system offers enhanced customization and flexibility, including adaptable sizing options to fit various form factors and card layouts such as:Vertical: display the cards in vertical list.Horizontal Scroll: display the cards in horizontally scrollable list. Optionally, you can indicate that all cards should display with same height using the UseSameHeight property.Masonry: display cards in grid-like structure with flexible arrangement with each card adapting to the available space.For more information, refer to Card Collection.Cards Collection on iOS and AndroidSupport Column Specific Editing in Data Table controlThe MDK Data Table control now supports column specific editing in Data Table control. You can now set the EditType property to None for a column. That particular column will not be editable while other columns are editable. You can also use a rule to programmatically set cell-specific editing in the table.Editable Data Table on iOS and AndroidSupport Multiple Columns in a Form Cell SectionYou can now define a multi-column layout in a FormCell Section displaying more FormCell controls in defined columns on the page. “Layout”: {
“NumberOfColumns”: 3,
“MinimumInteritemSpacing”: 20
} Please note below behavior of the NumberOfColumns propertyOn iOS, this setting is only valid in regular mode (iPad or large iPhone Landscape). In compact mode it will always be set to 1 column.On Android, this setting is only valid when current screen width is larger than 600dp. When the current screen width (e.g. in phone portrait mode) is less than 600dp, it will always be set to 1 column.Multi Column FormCell on iOS and AndroidCaption Functionality for Note FormCell ControlNote FormCell control has been enhanced to support Caption and its associated styling options. For more information, refer to this document. {
“Caption”: “Note’s Caption”,
“_Type”: “Control.Type.FormCell.Note”,
“_Name”: “FormCellControl”,
“IsVisible”: true,
“Separator”: true,
“PlaceHolder”: “Description”,
“HelperText”: “Please enter description”,
“MaxNumberOfLines”: 8,
“MinNumberOfLines”: 2,
“Enabled”: true,
} Enable Multiple Attachments selection in Attachment ControlAttachment FormCell has been enhanced to allow users to select multiple files at once. This enhancement applies to both iOS and Android platforms.Adding multiple attachments on iOS and AndroidStyling support for Banner Message and Progess Banner actionsYou can now style the BannerMessage and Progress Banner actions with newly introduced styling properties:.Semantic: can be used to apply semantic colors to the banner such as Normal (default), Tint, Positive, Negative and warning. Styles: can be used to customize the banner end-to-end.You can also style the different states (Progress/Completion) of the ProgressBanner individually.Banner Styling on iOS and Android Progress Banner Styling on iOS and AndroidPlease note that the default style for BannerMessage has been updated: text and stripe color are now grey on iOS, and text color is grey on Android. Find more information, refer to the styling section for Banner Message and Progress Banner actions.Additional Styling support for Icons and ImagesWith this release, we support background-color styling option for images and icons in the following MDK controls:ObjectCellObjectCollectionCellGridTableObjectHeaderKPIHeaderProfileHeaderContactCellObjectCardCardCollection (iOS)Button (iOS)Image sectionImageCollectionAccessing OData Service Metadata Document ($metadata)We have added new methods to access the OData service metadata document file (.xml).  This file can be used in the application to augment the business logic such as:Dynamically show or hide OData properties based on an attribute value.Dynamically show or hide OData properties based on an annotation value.Checking max length of fieldThe getMetadata() API will return a new CSDLDocumentProxy, through which you can access the $metadata of both Offline and Online services.  Once you have this proxy, you can execute the following methods via the proxy:getOriginalText(): returns the original $metadata content as XML string. You will need to first define the retainOriginalText CSDL option in the. Service file. Export default function getOriginalText(context) {
//get OData service provider
let provider = context.getODataProvider(‘/MDK2407/Services/SampleServiceV4.service’);
let csdlProxy = provider.getMetadata();
if (csdlProxy) {
alert(‘OriginalText for OData Service is: ‘ + csdlProxy.getOriginalText());
} else {
alert(‘Service is not initialised!’);
}
}​ To enable this, you need to define the following CSDLOptions: //Offline
{
“DestinationName”: “SampleServiceV4”,
“OfflineEnabled”: true,
“OfflineOptions”: {
“CSDLOptions”: [
“retainOriginalText”,
“retainResolvedText”
]
}
}​

//Online
{
“DestinationName”: “SampleServiceV4Online”,
“OfflineEnabled”: false,
“OnlineOptions”: {
“CSDLOptions”: [
“retainOriginalText”,
“retainResolvedText”
]
} getCompactXML():  returns the $metadata content as compact XML string.getResolvedText(): returns the resolved $metadata content as XML string with inline references and expanded aliases. You will need to first define the retainResolvedText CSDL option in the. service file.getVersionCode(): returns code for the OData version. If the OData version is considered as a decimal number (e.g. 4.0), then multiplying by 100 will give the code (e.g. 400)getVersionText(): returns text for the OData service version, e.g. “4.0”Update Cached MetadataWe have added a new API refreshMetadata() that checks the compatibility between the current and the $metadata from the backend server, then updates the $metadata if there is no conflict.This API returns a promise with a boolean result indicating whether the $metadata was updated successfully. Any $metadata changes happening on the backend server after initializing the data service for the first time will not be reflected unless the users call the refreshMetadata API.Streamlined Filter Criteria to OData Conversion When working with Filters on a Section Table, you can now easily convert an array of filter criteria to the OData filter and sorter string representations via below APIs. getFilterActionResult(): returns the content of _filter which should be the resolved OData $filter query string. (null if there’s no filter)getSorterActionResult(): that return the content of _sorter which should be the resolved OData $orderby query string (null if there’s no sorter)Access the instance of an Extension ControlExpose a new API to allow users to access the extension control instance of the ExtensionFormCell. This instance allows the MDK application developer to call the extension methods if needed to adjust the behavior of the extension control at runtime.Previously, the users could only access the extension control instance of the ExtensionFormCell through internal properties. Now, this access is officially supported by MDK through the new getExtension() API in the new ExtensionFormCellProxy class.Enhance the existing getExtensions() API of SectionProxy to make it clearer to usersIntroduced three other new proxy classes: ExtensionSectionProxy, ObjectCollectionSectionProxy, ObjectHeaderSectionProxy. They are all subclasses of the existing SectionProxyExtensionSectionProxy will have the getExtension() API, as there can be only 1 extension based on the metadata definitionObjectCollectionSectionProxy & ObjectHeaderSectionProxy will have the getExtensions() API, as the extensions are defined as an array in the metadata definitionExisting getExtensions() API from the SectionProxy will now be marked as deprecated and always return an empty array.Proxy Class for Button Table, Section Header and Section FooterTo allow better access of specific controls when executing rules, we are introducing below new Proxy Classes:ButtonTableProxyButtonTableButtonProxySectionHeaderProxySectionHeaderButtonProxySectionHeaderIconProxySectionHeaderLabelProxySectionFooterProxyThese classes support the following methods:getNamegetTyperedrawAdditionally, all control and section proxy classes support the getParent method. const className = context.constructor.name;
const name = context.getName();
const type = context.getType();
const parent = context.getParent(); Access to Section Header ItemsEnhanced access to the Section Header items. This includes methods to enable/disable and hide/show items in a section header with new API functions:SectionProxygetHeader()SectionHeaderItemProxygetVisible()setVisible()SectionHeaderButtonItemProxy (Inherits SectionHeaderItemProxy methods) getEnabled()setEnabled()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.    Read More Technology Blogs by SAP articles 

#SAP

#SAPTechnologyblog