What’s new in Mobile development kit client 4.0 SP02 (4.2)

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

This release adds incremental functionality over the previous MDK Client 4.0 SP01 (4.1) release.

SAP Mobile Services Client 4.2.1 is also available in Apple AppStore and Google Play Store.

SAP Mobile development kit (MDK) extends SAP Cloud Platform Mobile Services and Editor (SAP Web IDE/Business Application Studio/VSCode extension) to provide you with a complete set of mobile application development and management tools, onboarding, offline support, and central lifecycle management. It offers a metadata-driven approach to create native supported applications so no experience of creating iOS or Android apps is required.

The main focus of this release are:

• • New UI controls
    • Bottom Navigation
    • Tabs
    • KPI Header
    • Chart Content section
    • Analytics Card Collection
  • Enhancement
    • Support In-App Onboarding QR Code Scanning
    • List Picker in Filter page
    • Support Append Path to Service Destination
    • Support styles in Object Header
    • Object Collection Search
    • Detail Image Text (avatar image) for Object Cell
    • Customizing Transition in Navigation
    • Support HTTPS URL Images for Action Bar and Tool Bar
    • Server Side Paging Support
    • Extensions-Support creating Extension as UITableViewCell

Bottom Navigation Control

You can now use Bottom Navigation control (part of a newly added Bottom Navigation Page) to show the navigation items.  Each Tab item contains both icon or text or both, the icon could come from the app resources or from fonts (UI5 font icon library ).

This control:

• is for high level navigation where the separate tabs don’t have shared context
• is limited to 5 tabs at maximum
• each tab’s content must reference to a page

Check the guide & metadata reference for more details.

Tabs Control

You can now use Tabs control (part of a newly added Tabs Page) to show the navigation items.

This control allows you to have any number of items either in Top or Bottom position.

Check the guide & metadata reference for more details.

KPI Header Control

You can now add a KPI Header section to a section table in your MDK app to display the different Key Performance Indicators (KPI).

You can also style the KPI Header, KPI View, KPI progress view.

Check the documentation for more details.

Chart Content section Control

You can visualize 2D data in chart form (line, column) using new control – Chart Content Section.

• This control displays chart in a non-full screen context
• It will primarily have 3 sections: title section, summary section and chart section
  1. Title section – is supposed to have Title, Subtitle and status
  2. Summary Section – provides high-level details about the chart data
  3. Chart section – details the chart data with category-axis and value-axis

Check the guide & metadata reference for more details.

Analytics Card Collection Control

Analytic Card Collection is a container that manages and displays a set of Chart Cards. Chart Cards display a thumbnail view of a chart, with key information shown.

Check the guide & metadata reference for more details.

Support In-App Onboarding QR Code Scanning

We have enhanced the on-boarding experience in MDK Client. We now support onboarding via in-app QR scan.

• Scan in App QR code from the SAP Cloud Platform Mobile Services (NEO) cockpit
• Scan the QR code generated from SAP WebIDE
• Scanning the QR code image saved in the phone

When you scan the QR Code, you will be shown a success/failure toast message if QR Code is parsed and loaded.

Check the documentation for more details.

List Picker in Filter page

You can now have a selection list in a filter pop-over. Both single select and multi-select should be possible.

{
   "Caption":"FilterPage",
   "Controls":[
      {
         "Sections":[
            {
               "Controls":[
                  {
                     "AllowEmptySelection":true,
                     "AllowMultipleSelection":true,
                     "Caption":"By LastName (Dynamically)",
                     "FilterProperty":"LastName",
                     "IsEditable":true,
                     "IsSelectedSectionEnabled":false,
                     "IsVisible":true,
                     "PickerItems":{
                        "DisplayValue":"{LastName}",
                        "ReturnValue":"{LastName}",
                        "Target":{
                           "EntitySet":"Customers",
                           "Service":"/MDK42/Services/serv.service"
                        }
                     },
                     "_Name":"FormCellListPicker",
                     "_Type":"Control.Type.FormCell.ListPicker"
                  }
               ],
               "Visible":true
            }
         ],
         "_Name":"FormCellContainer0",
         "_Type":"Control.Type.FormCellContainer"
      }
   ],
   "Result":[
      "#Page:FilterPage/#Control:FormCellListPicker/#FilterValue"
   ],
   "_Name":"FilterPage",
   "_Type":"Page"
}

Check the documentation for more details.

Support Append Path to Service Destination

You can now append path to your service’s destination. E.g., below are two services:

https://services.odata.org/V2/Northwind/Northwind.svc/

https://services.odata.org/V2/OData/OData.svc/

You can setup one destination in Mobile Services cockpit pointing to the root path: https://services.odata.org

and in MDK metadata service file, you can use this destination to call both the services. You need to provide the respective path suffix while creating a service file.

In Offline OData Service, if PathSuffix is set, you must also set the Offline Store Name.

Check the documentation for more details.

Support styles in Object Header

You can now style ObjectHeader control. Below properties are supported for styling.

• “ObjectHeader” (represent the whole object cell itself) – background color (for iOS & Android)
• “BodyText” – font (color, style) – iOS only
• “Description” – font (color, style) – iOS only
• “Footnote” – font (color, style) – iOS only
• “HeadlineText” – font (color, style) – iOS only
• “StatusText” – font (color, style) – iOS only
• “Subhead” – font (color, style) – iOS only
• “SubstatusText” – font (color, style) – iOS only

Due to limitation in Android, we support only ObjectHeader background color for Android.

Check the documentation for more details.

Object Collection Search

You can now enable search on Object collection sections just like Object Tables.

"Search": {
"BarcodeScanner": true,
"Delay": 300,
"Enabled": true,
"MinimumCharacterThreshold": 3,
"Placeholder": "Item Search"
},

Check the documentation for more details.

Detail Image Text (avatar image) for Object Cell

A new property DetailImageText allow you to put a placeholder text that will be rendered in place of the Detail Image. This can be useful for displaying initials of a person name if they do not have a profile image.

"ObjectCell":{
   "DetailImageIsCircular":true,
   "DetailImageText":"CI",
   "Title":"Circular Avatar Image"
}

Check the documentation for more details.

Customizing Transition in Navigation

There is now a new property called Transition in Navigation action that allows you to customize the default transition and animation.

{
    "OnFailure": "/DemoApp/Actions/FailureMessage.action",
    "PageToOpen" : "/ DemoApp /Pages/CustomerOrders.page",
    "_Type" : "Action.Type.Navigation",
    "Transition": {
        "Curve": "Linear",
        "Duration": 1,
        "Name": "Fade"
    }
}

Note: This property is applicable only page-to-page navigation (including within a modal dialog). It doesn’t apply to opening and closing of modal dialog and also to tab switching in BottomNavigation page.

Check the documentation for more details.

Support HTTPS URL Images for Action Bar and Tool Bar

We now extend the support for rendering the images via https URL for values in image properties for image in action bar or icon in tool bar.

Check the documentation for more details.

Server Side Paging Support

We introduce a new property ServerSidePaging that specifies if the Target service supports pagination via skipToken.

Note: If this property is set to true, then QueryOptions should not contain ‘skip’ and ‘top’ for pagination to work.

This feature is useful for scenarios where OData service supports only server pagination (no client pagination). It loads data in one server paging by default, loads next page data when scroll down to bottom.

"_Type":"Section.Type.ObjectTable",
"Target":{
   "Service":"/MDK42/Services/sample.service",
   "EntitySet":"/SalesOrders",
   "QueryOptions":"$expand=Items",
   "ServerSidePaging":true
},

Check the documentation for more details.

Support creating Extension as UITableViewCell

In order to allow better control of the extension sizing, it is now possible to implement extension for iOS platform as UITableViewCell, for more details visit UITableView Based Extension for iOS.

New to MDK development?

Follow these tutorials to learn more about Mobile development kit

• Create your Mobile Development Kit (MDK) app in SAP Business Application Studio
• MDK documentation:
  • Guides
  • API references

Regards,

Jitendra Kansal

Product Management, SAP Cloud Platform Mobile Services
SAP SE