I am happy to announce that a new release of the Mobile Development Kit(MDK) is now available for all Mobile Services customers. It can be downloaded from the SAP Software Center and the community Download page. Additionally, the SAP Mobile Services Clients available on the App Store and Google Play have been updated with this new release.
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. This release includes the following:
- New UI enhancements
- API & Syntax enhancements
- Support Simplified QR Code for Onboarding in Android Client
- MDK editor enhancements
Fiori Toolbar
We have introduced a new SAP Fiori style Toolbar in MDK that allows the developers to do things such as customize the buttons, helper texts, overflow button and enable or disable the toolbar based on their business requirement. For more information, refer to Toolbars.
The buttons in the toolbar are automatically positioned based on the number of buttons defined. For instance:
- One toolbar item:
- On phone: stretches across the toolbar
- On tablet: Item is aligned to the right
- Two toolbar items:
- On phone - Items are placed on either side of the layout, left and right.
- On tablet - Items are aligned to the right. However, on Android tablets, if the HelperText is defined, the items are placed on either side of the layout.
- Three or more toolbar items:
- On phone - Only two items will be displayed, aligned to the right while the rest will be pushed into the overflow button.
- On tablet - If there are three toolbar items, then all three items will be displayed and aligned to the right. In cases where there are more than three items, the excess items will be pushed into the overflow button.
Additionally, we have introduced getFioriToolbar API. This returns the FioriToolbarProxy instance of the associated Fiori toolbar of that page
Context.getPageProxy().getFioriToolbar();
If you have used MDK toolbar in your application, you can migrate your app with new Fiori Toolbar in SAP Business Application Studio. (Right click Application.app>MDK:Migrate).
Support additional Controls above Tabs
MDK now supports additional controls above the Tab Bar in addition to the Header controls. You can now add any controls and extensions above the Tab Bar. The area of the tabs is a fixed size based on the number of the controls rendered on page load. Changing visibility of controls or using controls that expand in place should be avoided at this time.
Note: While users have the flexibility to choose the type and number of controls to be placed above the tab bar, we highly recommend avoiding overcrowding, as it does reduce the tab page's body area on the screen.
Multiple Back Navigation
A new property NavigateBackToPage is added in the ClosePage Action.This property will allow the users to navigate back to the defined page. This property accepts name of the target page as the input (target page name is assigned to the _Name property of the page). If you have multiple pages opened with the same name in the navigation stack, the NavigateBackToPage reference will return to the most recent occurrence of the specified page name.
Note: OnReturning events bound to pages between the current page and the page specified by the NavigateBackToPage property are not triggered.
{
"_Type": "Action.Type.ClosePage",
"ActionResult": {
"_Name": "MultiBack"
},
"NavigateBackToPage": "StartingPage",
"OnFailure": "/MDKApp/Actions/BackNavigation/MultiBack_Failure.action"
}
Enhance List Picker Return Value
When selecting an item in the List Picker Form Cell control, there are times that the return value needed to be a unique value but that there were also other values needed from the selected record. To access the additional values in the entity set, a second read call was needed to be performed which caused extra efforts for developers.
List picker form cell control’s getValue() API and #Value has been enhanced to include the entire bound data object for the returned values. This bound data object is stored in the BindingObject property of the selected items.
Accessing BindingObject property via
- JavaScript property accessor: context.getValue()[0].BindingObject;
- Evaluate Target path: context.evaluateTargetPath(“#Control:ListPicker/#Value#0/BindingObject”);
This will allow you to get additional information about the selected items including the DisplayValue and ReturnValue.
[
{
"BindingObject": {
"@odata.editLink": "ProductCategories('0cfeaf26-4cc0-4a26-b088-9a2b5b444db9')",
"@odata.id": "ProductCategories('0cfeaf26-4cc0-4a26-b088-9a2b5b444db9')",
"@odata.readLink": "ProductCategories('0cfeaf26-4cc0-4a26-b088-9a2b5b444db9')",
"@odata.type": "#ESPM.ProductCategory",
"Category": "0cfeaf26-4cc0-4a26-b088-9a2b5b444db9",
"CategoryName": "Portable Players",
"MainCategory": "TV, Video & HiFi",
"MainCategoryName": "TV, Video & HiFi",
"NumberOfProducts": 5
},
"DisplayValue": "Portable Players",
"ReturnValue": "0cfeaf26-4cc0-4a26-b088-9a2b5b444db9"
}
]
Note: BindingObject property will only be available for list pickers that are data bound via Target.
ClientAPI function to return MDK Application Name
You can now be able to retrieve the _Name property for the MDK application via:
- Target Path: #Application/#AppData/AppName
- Client API: getAppName();
This _Name property is defined in the Application.app in MDK metadata project.
WriteToFilePath property for OData DownloadMedia and DownloadStream actions
A new property WriteToFilePath is introduced in the DownloadOptions property for the DownloadMedia and DownloadStream actions. This property allows you to specify either the full or relative file path of the destination where the downloaded data should be stored. If a relative file path is specified, the file is stored in the path relative to the platform's internal documents folder. On iOS, this property must be defined to download larger files in the background. Please note that this property is supported only on iOS and Android platforms.
{
"_Type": "Action.Type.ODataService.DownloadStream",
"ActionResult": {
"_Name": "Products_DownloadStream"
},
"OnFailure": "/MDKApp/Actions/Products/Products_StreamFailure.action",
"OnSuccess": "/MDKApp/Rules/Products/Products_OpenDocument.js",
"Target": {
"Service": "/MDKApp/Services/SampleServiceV4.service",
"EntitySet": "Products",
"ReadLink": "{@odata.readLink}"
},
"Properties": [
"Picture"
],
"DownloadOptions": [
{
"WriteToFilePath": "/MDKApp/Rules/Products/Products_relativePath.js"
}
]
}
Support Simplified QR Code for Onboarding in Android Client
The Onboarding process in MDK clients support QR codes, including In-App Scanning Code and Apple and Android Launch App Code with URI Scheme, which are available in the Mobile Services admin UI. These QR codes are relatively dense, as they contain extensive configuration details required for onboarding process. Devices with lower camera resolutions frequently encounter challenges when attempting to scan such dense QR codes. To address this issue, MDK client allows the users to scan simplified onboarding QR codes. This feature is currently available for Android only.
A simplified QR code ideally contains a single URL that serves as the gateway to access detailed onboarding configuration information stored on the SAP Mobile Services. Thus, significantly reducing the underlying information in the QR codes.
Generating a simplified QR code feature is currently not available in the Mobile Services admin UI. You can use any QR Code generation tool to manually convert the following JSON object into a simplified QR code:
{
"schema": "2.0",
"mobileServicesHost": "<my-ms-mdk-app.hana.ondemand.com>"
}
Replace <my-ms-mdk-app.hana.ondeomand.com> with your server domain name from the APIs tab in your Mobile Services app in the cockpit (Do not include the https:// prefix). When users scan the resulting onboarding QR code, MDK will retrieve the full onboarding configuration from the specified Mobile Services host and proceed with the user onboarding.
Go to code Toggle
In addition to existing features of switch from graphical editor to text editor and vice versa, we have introduced an additional option to easily toggle between text and graphical files. There is an icon located on the top right of the editor bar.
Connect or sync an SSO based mobile destination
This improvement is applicable when the SAP Business Application Studio and Mobile Services are not in the same subaccount.You can now easily connect to such SSO enabled mobile services destination configured in a different BTP subaccount than your BAS subaccount.
Note: Cross Context SSO setting under Security in your app configuration on mobile services admin UI must be enabled in order to use this feature.
When connecting to an SSO enabled destination while creating a project or syncing an existing destination, you would need to input passcode by clicking on the given link.
Follow these tutorials to get started and learn more about Mobile development kit!
I am looking forward to your feedback/comments.
- SAP Managed Tags:
