Dear Community,
I’m happy to announce that a new release of the Mobile Development Kit (MDK) is now available for all SAP Build and Mobile Services customers. You can download it from the SAP Software Center, and it will soon be available on the community download page.
The SAP Mobile Services Client has been updated to version 26.3.0 on the Apple App Store and the Google Play Store.
SAP MDK 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 / Visual Studio Code) and run it natively on Mobile (iOS & Android).
Below UI enhancements are available only on iOS and Android platforms:
Support Styling of Key Value Item Control
MDK now supports styling Key Value item control. A new object property Styles has been introduced with following sub-properties:
KeyValueItem: supports only background color to style entire item.KeyName: supports to style key name.Value: supports to style a value property.
//excerpt of an MDK page
“KeyAndValues”: [{
“Value”: “{City}”,
“_Type”: “KeyValue.Type.Item”,
“_Name”: “KeyValue0”,
“KeyName”: “City”,
“Visible”: true,
“OnPress”: “/MDK263/Actions/UpdateEntitySuccessMessage.action”,
“LinkColor”: “#0000FF”,
“Styles”: {
“KeyValueItem”: “KeyValueItemBackground”,
“KeyName”: “KeyNameStyle”,
“Value”: “KeyValueStyle”
}
},
//excerpt of a .less file
.KeyValueItemBackground {
background-color: #FFA500;
}
.KeyNameStyle {
font-color: #ADD8E6;
text-decoration: underline;
}
.KeyValueStyle {
font-color: green;
}
Note: : Value style will take priority over LinkColor, regardless of whether OnPress is defined or not.
Key Value Styling on iOS and Andrid devices
For more information, refer to the Key Value Item documentation.
Contact Cell Control Enhancements
Support for Initials: The ContactCell component now supports displaying user initials, providing a more personalized and recognizable visual experience when profile pictures are unavailable. This enhancement makes it easier to scan and identify contacts by replacing generic placeholder icons with meaningful initials. Three new properties have been introduced to support this feature:DetailImageText: A string property that displays text in the image container when no DetailImage is present. It supports a maximum of 2–4 characters, allowing you to manually specify custom text such as initials.DetailImageIsCircular: A boolean property with a default value of true that controls the shape of the image container. When set to true, the image is displayed in a circular shape; when set to false, it is displayed in a rounded rectangular shape.UseHeadlineForDetailImage: A boolean property with a default value of false. When set to true and no DetailImage is provided, the control automatically extracts and displays the first two initials from the Headline property in the image container. This property takes precedence over DetailImageText.Support for BadgeImage Property: A new property, BadgeImage, is now available on ContactCell. This property allows you to attach an additional indicator icon or image to the existing DetailImage or DetailImageText for each contact. For example, it can be used to highlight and identify primary contacts in a contact list. Additionally, the existing Styles property for ContactCellItem now supports a new subproperty named BadgeImage, which enables CSS styling for the indicator icon or image defined in the BadgeImage property.//excerpt of .page
{
“ContactCell”: {
“_Name”: “ContactCellItem6”,
“BadgeImage”: “sap-icon://bell”,
“DetailImageText”: “SB”,
“DetailImageIsCircular”: true,
“Headline”: “Sue Bay”,
“Subheadline”: “Antioch, Illinois”,
“UseHeadlineForDetailImage”: false,
“Visible”: true,
“ActivityItems”: [{
“_Name”: “ContactCellItem4ActivityItems0”,
“ActivityType”: “Phone”
}
],
“Styles”: {
“DetailImage”: “DetailImage”,
“BadgeImage”: “BadgeImage”
}
}
},
//excerpt of Styles.less
.BadgeImage {
color: #068831;
background-color: #ffae00;
}
.DetailImage {
color: #AD00FF;
background-color: #ADD8E6;
}
Contact Cell Control on iOS and Android devices
For more information, refer to the Contact Cell documentation.
Support In-App Camera in FormCell Attachment Control (Android Only)
We have received feedback from customers about the MDK app restarting after taking a photo using the Attachment control, especially when the app is running on Android devices with lower RAM. This may be due to memory pressure on the device, which can cause the OS to kill the MDK app running on background after launching the camera.
To address this problem, we are providing support for using an in-app camera option. This option consumes less memory, and the camera opens directly inside the MDK app instead of switching to a separate camera application.
A new UseInAppCamera property is available in the Application.app file under the Settings object. It determines whether the in-app camera or the device’s default camera will be used for the AttachmentFormCell control’s “Take Photo” option.When set to true, the in-app camera will be used instead of launching the device’s native camera application.//excerpt of Application.app
{
“MainPage”: “/MDK263/Pages/Main.page”,
“OnLaunch”: [
“/MDK263/Rules/Service/Initialize.js”
],
“Settings”: {
“UseInAppCamera”: true
},
“_Name”: “MDK263”
}
In addition, we are introducing two new APIs to manage the in-app camera settings programmatically:
getUseInAppCamera Retrieves the current state of the in-app camera usage flag.Returns the current value determining whether the in-app camera is enabled for FormCell Attachment controls.setUseInAppCamera Enables or disables the in-app camera for FormCell Attachment controlsChanges take effect immediately for new AttachmentFormCell instancesFor AttachmentFormCell controls that are already rendered on the current page, the new setting will only take effect after calling the control’s reset() API. Calling the reset() API will discard any existing attachments in the control.export default function ChangeUseInAppCamera(context) {
let currentValue = context.getUseInAppCamera();
context.setUseInAppCamera(!currentValue);
alert(‘UseInAppCamera set to ‘ + !currentValue);
let currentPageProxy = context.getPageProxy();
if (currentPageProxy) {
if (currentPageProxy.getName() === ‘FCMain’) {
let attachmentControlProxy = context.evaluateTargetPathForAPI(‘#Page:FCMain/#Control:FormCellAttachment0’);
if (attachmentControlProxy) {
attachmentControlProxy.reset();
}
}
}
}
New ActionBar Caption Size Options
The ActionBar now supports flexible caption sizing through the new PreferredCaptionSize property, which replaces the existing PrefersLargeCaption property.
Enhanced size control: Choose from small, medium, or large caption sizes instead of toggling between only two options.iOS supports small and large caption sizeAndroid supports small, medium, and large caption size.
Behavior Notes:
When PreferredCaptionSize is set to “large”, any defined Subhead will be ignored.When setting CaptionAlignment (Android only) to “center”, the PreferCaptionSize automatically set to small. On iOS, large caption mode is not supported on pages with BottomNavigation, Tabs, SideDrawer, FormCellContainer, or FlexibleColumn controls.If both PreferredCaptionSize and the deprecated PrefersLargeCaption property are specified, PreferredCaptionSize takes precedence.//excerpt of an MDK page
“ActionBar”: {
“Items”: [
{
“_Type”: “Control.Type.ActionBarItem”,
“_Name”: “ActionBarItem0”,
“Caption”: “User Menu”,
“OnPress”: “/MDK263/Actions/Application/UserMenuPopover.action”
}
],
“_Name”: “ActionBar1”,
“_Type”: “Control.Type.ActionBar”,
“Caption”: “MDK 26.3”,
“PreferredCaptionSize”: “Medium”
}
}
Support Required Field Indicator for Segmented FormCell Control
In MDK 25.9 release, we introduced support for required field indicators for some FormCell controls. In this release, we are extending this support to the Segmented FormCell, indicating that the field must be filled out.
Note: This feature does not enforce users to fill out the form cell; it only provides a visual indicator that the field is required.
//Excerpt from a .page
{
“RequiredIndicator”: true,
“_Type”: “Control.Type.FormCell.SegmentedControl”,
“_Name”: “PrioritySegmented”,
“Caption”: “Priority”,
“ApportionsSegmentWidthsByContent”: false,
“Segments”: [
“Low”,
“Medium”,
“High”
]
}
Form Cell Segmented control on iOS and Android devices
Support Uploading Offline Store to Mobile Services
MDK now provides the ability for applications to upload the offline store (Both the main offline database (UDB) and the Request Queue database) to Mobile Services to assist with troubleshooting. This capability helps developers and support teams more effectively investigate and diagnose issues related to the offline store, reducing the time required to identify the root cause of problems reported by business users.
To facilitate this capability, a new MDK action has been introduced: Action.Type.OfflineOData.UploadStore.
{
“_Type”: “Action.Type.OfflineOData.UploadStore”,
“ActionResult”: {
“_Name”: “UploadOfflineDB”
},
“Service”: “/MDK263/Services/SampleServiceV4.service”,
“EncryptionKey”: “MDK123”, // encryption key used during the upload process
“Note”: “My Test App” // Optional note attached to the uploaded database file
}
In order to use this feature, you will need to first enable offline store upload policy in SAP Mobile Services Admin UI for a given MDK app. Developers can download the uploaded files on their local machine and use ILODATA tool (link to doc) to analyze them. (link how to use this tool). For more information, see this documentation.
Onboarding via MDM App Config (Managed Configuration)
MDK now supports onboarding via MDM App Config (Managed Configuration). Company administrators can push onboarding settings directly to managed devices through their MDM solution.
The MDK client retrieves MDK-defined configurations from a reserved root property named MDKSettings within the Managed Configuration. Currently, this root property only accepts the ConnectionSettings object. The supported properties, their functionality, and the required structure for ConnectionSettings remain the same as in the existing implementation.
While the iOS and Android versions differ syntactically due to their file formats, they share the same structural hierarchy. Note that the actual syntax may vary depending on the requirements of the specific MDM solution being used.
iOS: MDM solutions for iOS commonly use an XML format for complex configurations.Android: MDM solutions for Android commonly use a JSON format for complex configurations.
Become an SAP MDK Explorer!
Do you have a requirement to build a mobile solution for your enterprise? Take your first steps today by following these tutorials to get started and learn more about the SAP Mobile development kit. We’re excited to see what you build—your feedback and ideas are invaluable!
Submit Improvement Requests
You can submit your improvement request (link) for Mobile development kit to the SAP Customer Influence site, a central place for all product improvement requests. You can browse all improvement requests, submit improvement requests, comment, vote, receive updates, and see who has voted at the SAP Customer Influence site.
Dear Community,I’m happy to announce that a new release of the Mobile Development Kit (MDK) is now available for all SAP Build and Mobile Services customers. You can download it from the SAP Software Center, and it will soon be available on the community download page.The SAP Mobile Services Client has been updated to version 26.3.0 on the Apple App Store and the Google Play Store.SAP MDK 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 / Visual Studio Code) and run it natively on Mobile (iOS & Android). Below UI enhancements are available only on iOS and Android platforms:Support Styling of Key Value Item ControlMDK now supports styling Key Value item control. A new object property Styles has been introduced with following sub-properties:KeyValueItem: supports only background color to style entire item.KeyName: supports to style key name.Value: supports to style a value property.//excerpt of an MDK page
“KeyAndValues”: [{
“Value”: “{City}”,
“_Type”: “KeyValue.Type.Item”,
“_Name”: “KeyValue0”,
“KeyName”: “City”,
“Visible”: true,
“OnPress”: “/MDK263/Actions/UpdateEntitySuccessMessage.action”,
“LinkColor”: “#0000FF”,
“Styles”: {
“KeyValueItem”: “KeyValueItemBackground”,
“KeyName”: “KeyNameStyle”,
“Value”: “KeyValueStyle”
}
},
//excerpt of a .less file
.KeyValueItemBackground {
background-color: #FFA500;
}
.KeyNameStyle {
font-color: #ADD8E6;
text-decoration: underline;
}
.KeyValueStyle {
font-color: green;
}Note: : Value style will take priority over LinkColor, regardless of whether OnPress is defined or not. Key Value Styling on iOS and Andrid devices For more information, refer to the Key Value Item documentation.Contact Cell Control EnhancementsSupport for Initials: The ContactCell component now supports displaying user initials, providing a more personalized and recognizable visual experience when profile pictures are unavailable. This enhancement makes it easier to scan and identify contacts by replacing generic placeholder icons with meaningful initials. Three new properties have been introduced to support this feature:DetailImageText: A string property that displays text in the image container when no DetailImage is present. It supports a maximum of 2–4 characters, allowing you to manually specify custom text such as initials.DetailImageIsCircular: A boolean property with a default value of true that controls the shape of the image container. When set to true, the image is displayed in a circular shape; when set to false, it is displayed in a rounded rectangular shape.UseHeadlineForDetailImage: A boolean property with a default value of false. When set to true and no DetailImage is provided, the control automatically extracts and displays the first two initials from the Headline property in the image container. This property takes precedence over DetailImageText.Support for BadgeImage Property: A new property, BadgeImage, is now available on ContactCell. This property allows you to attach an additional indicator icon or image to the existing DetailImage or DetailImageText for each contact. For example, it can be used to highlight and identify primary contacts in a contact list. Additionally, the existing Styles property for ContactCellItem now supports a new subproperty named BadgeImage, which enables CSS styling for the indicator icon or image defined in the BadgeImage property.//excerpt of .page
{
“ContactCell”: {
“_Name”: “ContactCellItem6”,
“BadgeImage”: “sap-icon://bell”,
“DetailImageText”: “SB”,
“DetailImageIsCircular”: true,
“Headline”: “Sue Bay”,
“Subheadline”: “Antioch, Illinois”,
“UseHeadlineForDetailImage”: false,
“Visible”: true,
“ActivityItems”: [{
“_Name”: “ContactCellItem4ActivityItems0”,
“ActivityType”: “Phone”
}
],
“Styles”: {
“DetailImage”: “DetailImage”,
“BadgeImage”: “BadgeImage”
}
}
},
//excerpt of Styles.less
.BadgeImage {
color: #068831;
background-color: #ffae00;
}
.DetailImage {
color: #AD00FF;
background-color: #ADD8E6;
}Contact Cell Control on iOS and Android devicesFor more information, refer to the Contact Cell documentation.Support In-App Camera in FormCell Attachment Control (Android Only)We have received feedback from customers about the MDK app restarting after taking a photo using the Attachment control, especially when the app is running on Android devices with lower RAM. This may be due to memory pressure on the device, which can cause the OS to kill the MDK app running on background after launching the camera.To address this problem, we are providing support for using an in-app camera option. This option consumes less memory, and the camera opens directly inside the MDK app instead of switching to a separate camera application.A new UseInAppCamera property is available in the Application.app file under the Settings object. It determines whether the in-app camera or the device’s default camera will be used for the AttachmentFormCell control’s “Take Photo” option.When set to true, the in-app camera will be used instead of launching the device’s native camera application.//excerpt of Application.app
{
“MainPage”: “/MDK263/Pages/Main.page”,
“OnLaunch”: [
“/MDK263/Rules/Service/Initialize.js”
],
“Settings”: {
“UseInAppCamera”: true
},
“_Name”: “MDK263”
}In addition, we are introducing two new APIs to manage the in-app camera settings programmatically:getUseInAppCamera Retrieves the current state of the in-app camera usage flag.Returns the current value determining whether the in-app camera is enabled for FormCell Attachment controls.setUseInAppCamera Enables or disables the in-app camera for FormCell Attachment controlsChanges take effect immediately for new AttachmentFormCell instancesFor AttachmentFormCell controls that are already rendered on the current page, the new setting will only take effect after calling the control’s reset() API. Calling the reset() API will discard any existing attachments in the control.export default function ChangeUseInAppCamera(context) {
let currentValue = context.getUseInAppCamera();
context.setUseInAppCamera(!currentValue);
alert(‘UseInAppCamera set to ‘ + !currentValue);
let currentPageProxy = context.getPageProxy();
if (currentPageProxy) {
if (currentPageProxy.getName() === ‘FCMain’) {
let attachmentControlProxy = context.evaluateTargetPathForAPI(‘#Page:FCMain/#Control:FormCellAttachment0’);
if (attachmentControlProxy) {
attachmentControlProxy.reset();
}
}
}
}New ActionBar Caption Size OptionsThe ActionBar now supports flexible caption sizing through the new PreferredCaptionSize property, which replaces the existing PrefersLargeCaption property.Enhanced size control: Choose from small, medium, or large caption sizes instead of toggling between only two options.iOS supports small and large caption sizeAndroid supports small, medium, and large caption size.Behavior Notes: When PreferredCaptionSize is set to “large”, any defined Subhead will be ignored.When setting CaptionAlignment (Android only) to “center”, the PreferCaptionSize automatically set to small. On iOS, large caption mode is not supported on pages with BottomNavigation, Tabs, SideDrawer, FormCellContainer, or FlexibleColumn controls.If both PreferredCaptionSize and the deprecated PrefersLargeCaption property are specified, PreferredCaptionSize takes precedence.//excerpt of an MDK page
“ActionBar”: {
“Items”: [
{
“_Type”: “Control.Type.ActionBarItem”,
“_Name”: “ActionBarItem0”,
“Caption”: “User Menu”,
“OnPress”: “/MDK263/Actions/Application/UserMenuPopover.action”
}
],
“_Name”: “ActionBar1”,
“_Type”: “Control.Type.ActionBar”,
“Caption”: “MDK 26.3”,
“PreferredCaptionSize”: “Medium”
}
} Support Required Field Indicator for Segmented FormCell Control In MDK 25.9 release, we introduced support for required field indicators for some FormCell controls. In this release, we are extending this support to the Segmented FormCell, indicating that the field must be filled out.Note: This feature does not enforce users to fill out the form cell; it only provides a visual indicator that the field is required.//Excerpt from a .page
{
“RequiredIndicator”: true,
“_Type”: “Control.Type.FormCell.SegmentedControl”,
“_Name”: “PrioritySegmented”,
“Caption”: “Priority”,
“ApportionsSegmentWidthsByContent”: false,
“Segments”: [
“Low”,
“Medium”,
“High”
]
}Form Cell Segmented control on iOS and Android devices Support Uploading Offline Store to Mobile Services MDK now provides the ability for applications to upload the offline store (Both the main offline database (UDB) and the Request Queue database) to Mobile Services to assist with troubleshooting. This capability helps developers and support teams more effectively investigate and diagnose issues related to the offline store, reducing the time required to identify the root cause of problems reported by business users.To facilitate this capability, a new MDK action has been introduced: Action.Type.OfflineOData.UploadStore.{
“_Type”: “Action.Type.OfflineOData.UploadStore”,
“ActionResult”: {
“_Name”: “UploadOfflineDB”
},
“Service”: “/MDK263/Services/SampleServiceV4.service”,
“EncryptionKey”: “MDK123”, // encryption key used during the upload process
“Note”: “My Test App” // Optional note attached to the uploaded database file
}In order to use this feature, you will need to first enable offline store upload policy in SAP Mobile Services Admin UI for a given MDK app. Developers can download the uploaded files on their local machine and use ILODATA tool (link to doc) to analyze them. (link how to use this tool). For more information, see this documentation.Onboarding via MDM App Config (Managed Configuration)MDK now supports onboarding via MDM App Config (Managed Configuration). Company administrators can push onboarding settings directly to managed devices through their MDM solution.The MDK client retrieves MDK-defined configurations from a reserved root property named MDKSettings within the Managed Configuration. Currently, this root property only accepts the ConnectionSettings object. The supported properties, their functionality, and the required structure for ConnectionSettings remain the same as in the existing implementation.While the iOS and Android versions differ syntactically due to their file formats, they share the same structural hierarchy. Note that the actual syntax may vary depending on the requirements of the specific MDM solution being used.iOS: MDM solutions for iOS commonly use an XML format for complex configurations.Android: MDM solutions for Android commonly use a JSON format for complex configurations.Become an SAP MDK Explorer!Do you have a requirement to build a mobile solution for your enterprise? Take your first steps today by following these tutorials to get started and learn more about the SAP Mobile development kit. We’re excited to see what you build—your feedback and ideas are invaluable!Submit Improvement RequestsYou can submit your improvement request (link) for Mobile development kit to the SAP Customer Influence site, a central place for all product improvement requests. You can browse all improvement requests, submit improvement requests, comment, vote, receive updates, and see who has voted at the SAP Customer Influence site. Read More Technology Blog Posts by SAP articles
#SAP
#SAPTechnologyblog
