Skip to Content

I am happy to announce that a new release of the mobile development kit is available for download (client) and already available in SAP Web IDE (editor). Mobile development kit (MDK) is a feature of SAP Cloud Platform Mobile Services.

 

There are a bunch of new features in 2.0 SP01 for me to share with you in this blog.  You can also watch the video covering the new features. I’ll cover each new feature at a high level, and later I will have additional blogs that drill into more details and examples for the features that need it.

 

If this is your first introduction to the mobile development kit, I suggest you first review the Learning Map which provides overview topics, blogs, videos, and tutorials.

 

Features in 2.0 SP01

 

 

Push Notifications

Developers now have the ability to add push notifications to the application.  Mobile development kit uses SAP Cloud Platform Mobile Services to send push notifications to the device.  In addition, you typically need a separate backend system that connects to SAP Cloud Platform Mobile Services to send the message to the device where the MDK application will receive the message and the developer can decide how the application will handle the message.

 

There are two new actions for push notifications:  Push Notification Register Action and Push Notification Unregister Action.

These two actions are called from the client to talk to SAP Cloud Platform Mobile Services. The client needs to be connected to a network to make these calls.  The Register Action tells Mobile Services that the application wants to receive push notifications.  A confirmation request will appear on the device for the end-user to accept.

 

When the backend sends a notification and it is received at the device, there are 3 new event level options in the Application.app to handle the notification.

 

  • OnReceiveForegroundNotification – This event option means that the app is running and the end-user is in application. The developer can associate a rule or action with this event that determines what to do with this notification.

 

  • OnReceiveNotificationResponse – This event option means that the app is running in the background and when the end-user taps on the notification they are sent back into the application. Again the developer associates a rule or action with this event that determines what to do with this notification.

 

  • OnReceiveFetchCompletion – This event is used less often. When additional content is sent as a special type of push, it will trigger this event.

 

Barcode Scanner

Mobile development kit now provides support for barcode scanning.  There are two new actions in the Action Editor.

 

  • Check Barcode Scanner Prerequisite
    • Checks to see if the app already has permission to use the camera as a barcode scanner and prompts for permission if it needs to.
  • Open Barcode Scanner Action
    • Launches a dialog that allows the user to scan a barcode.
    • Action allows the developer to add a rule for success or failure of the scan and to take action on the scan result.

 

For example, I add a button called Scan to my Landing page. The button is mapped to my Open Barcode Scanner Action.

 

Looking at my action, the Action Result is passed to my rules.  I have two rules that are called based on a success or failure of the scan.

 

My ShowBarcodeScanningResult.js rule takes the result of the scan and calls another action.  It calls a navigation action, NavToBarcodeResult.action, that opens a page to display the result of the scan.

 

 

The Barcode Scanner page displays one field which is just the result value of the scan.

 

There is no workflow tied to barcode scanning.  With the use of rules, I can do anything with the scan I receive.

 

 

Internationalization and Localization

Developers can now provide translations and localization for their custom application.  This allows end-users to view the mobile application in their own language and regional settings.  MDK supports the same languages as SAP Cloud Platform SDK for iOS:

  • English (en_US)
  • German (de_DE)
  • French(fr_FR)
  • Portuguese (pt_BR)
  • Spanish (es_ES)

Client features

  • The client automatically detects the correct language, region, and script from the user’s device and displays that language in the application, if available.
  • Language files can be added/updated/removed via App Update

 

Editor features

The editor enables developers to test the translations and localization at design-time. Language and Region menu options are available at design-time to view application results in the layout editor.

 

In the screenshot below, the editor is set to the default language – English.

 

 

In the screenshot below, I have switched the language to German in the editor and you can see that my Landing page has switched to German translations.

 

 

 

The editor allows developers to translate their content (i.e. text) in different languages and/or regions by creating a i18n.properties file for each language.

When adding text to a page, rather than typing Home for my Landing Page, I use the Object Browser to display translatable variables from the properties file.  In the screenshot below, you can see that my selection matches what I put into the i18n.properties file above.  I select overview_page_title which will display as Home on my Landing page when I view it in English.

The MDK Client and Editor also support localization.  Localized data can be displayed as follows:

  • Display right-to-left UI element
  • Display & process unicode characters correctly
  • Localizable strings include
    • Number
    • Currency
    • Percentage
    • Scientific Notation
    • DateTime
    • Date
    • Time

 

In the screenshot below, you can see all the localizable strings available in the Object Browser.

The default language for the application can be set in the Application.app.

 

 

A few other important facts about this feature.

  • Custom extension controls can also be localized
  • The localized text must be accessible in metadata (shown above) or via an API for translating rules. I hope to provide more information about retrieving localized text and regional formatting from a rule in a more detailed blog soon.
  • Developers can combine multiple localized text into single value in the Object Browser. An example of value is “L(cost_label){{price}}L(per_item_label)”

 

 

Support for Versioning Info

Mobile development kit provides support for versioning information that shows up in the iOS Settings screen.  This allows the developer to provide a version that is visible to the end-user even if the application is not running.

 

There are two versions that are customizable for the application.

  • Application Version
    • Major application version that is only changed each time you build a new MDK client
    • Set in the MDKProject.json file when building the client
  • Definitions Version
    • This version can be manually updated each time you update the application and deploy to the end-user.
    • Set in the Application.app file

 

There are seven other versions displayed in the iOS settings to help with supporting issues with MDK applications.  These versions are for different components within MDK.  This version data is automatically set and not updateable by the developer or administrator.

 

When I first built the MDK client, I set the Application Version in the MDKProject.json file.

In the screenshot below, I created a global variable called AppVersion.global.  In that global variable, I created a place to store a version number. I used a global variable because I also want to display the same version information in main Landing page for end-user visibility while the app is running.

 

In the screenshot below, you can specify the definitions version in the Version field by either providing a global variable or typing the version number directly in the field. As you can see, I selected the global variable, AppVersion.global.

 

 

Reusable Components

The mobile development kit provides the ability to create and update application components that can be reused in other applications. This is another feature where we will provide a more detailed blog and video to really cover the breadth of this feature.  For now, I will go through all the high level details.

 

Components can act as standalone application, which makes them easy to test and they can include dependencies of their own. Therefore, no distinction really exists between applications and components. The terms are interchangeable, but an application may be called a component to emphasize that it’s included as a dependency to another application.

 

You enable the use of components in your application by creating a component integration metadata (CIM) file.  This file can be found in the base of a mobile development kit project and is used to declare a component dependency.

 

Integration between the application and component is accomplished by replacing definitions from one project with those of another using Integration Points.  Integration Points are found in the CIM file.  The Integration Points allow you to replace an action, global variable, page, or rule from the base application with the same from the child component.

Why use this feature?

  • Create a component that can be used in multiple applications.
    • You can update that component once and redeploy main applications that they will get the updated component without having to make the change in all your applications.
  • Create add-on components for your applications.
    • SAP Asset Manager will provide add-on components for its product. The application will ship with the main application and provide the ability to enable additional components depending on the customer’s needs.

Here are the high level steps

  • Create main application – MDKDemo
  • Create component application – Sue2
  • Create CIM file in the main application – Sue2_Sue2.cim

  • Map Integration Points. In the image below, I replace Main.page from MDKDemo with the Main.page from Sue2.
  • Deploy the base application. The component application, Sue2, will be deployed with the main application, MDKDemo.

 

New iOS SDK Controls

With each new release, mobile development kit visualizes new controls in Web IDE and supports viewing these controls in the mobile development kit client.

Section Grid Table Control

This control displays a grid in a row, column format.  Developers can add any number of columns (Grid Row Item), and a header row (Grid Header).  The Grid Row Items can be sized by percentage or pixel. For each Grid Row, you can set a target so that when the item is clicked, the end-user to is taken somewhere to view additional details.

Design-time view

Completed view in iPad

 

Contact Cell Table Control
The Contact Cell Table control provides more contact specific information over using the Object Cell Table.  You can set a target just like the Object Cell Table, but it has phone, email, and message icons that activate device functions which is an enhancement over the generic Object Cell Table.

 

 

Object Cell List Picker
The Object Cell List Picker displays an object cell instead of a single row.  You can dynamically target it to a collection so you can grab and display lots of different types of information in a pick list.

 

Image Collection
Developers can add an image collection that can be circular or square.  This is a great option for product images or a catalog of items. You can define the height and whether you want it to display as horizontal scroll, horizontal fit, or vertical. You can set a target so that when an image is clicked on, it navigates to more details about that image.

Design-time view

 

iPad View

 

Custom Extension Control Enhancements

 

Building Custom Extension Controls
Previously, the only way to build a custom extension was by building a NativeScript plugin with JavaScript and hooking it up to Objective-C and Swift. With 2.1, we have improved the development process by allowing an extension to be defined as a single Swift class. Developers can define 2-way communication between the Swift module and the metadata app, allowing the extension to be easily integrated.

 

Registering Custom Extension Controls in the Editor

Starting with MDK 2.1, we have given you the ability to treat custom controls more like out of the box controls within the editor. While we still have the generic Extension control section in the Editor for backward compatibility, we now also have a new section called Registered Extension Control.

 

Here, you drag and drop them into this section to register the control and define it with a class.  You can also define a schema for it so that when you drag the control onto the page, it uses a custom image.  On the right hand side, you will also be able to specify properties for it just like other controls.

 

This allows you to use the Object Browser to map backend data to your custom extension control from within the property editor rather than write code in the text editor.

 

 

Enhanced Online Support

In the previous release of mobile development kit, online support was already available, but the features were limited.  Now, developers have more options when it comes to online vs. offline apps.

  • Offline Apps: apps that are completely offline and only sync when needed
  • Online-Only Apps: apps that are completely online with no offline capabilities
  • Both: Apps that runs online, but can run offline when the network connection is not available

 

This section focuses on Online-Only.  In an online only mode, there is no stored Offline OData, the application is operating with an online service and the app does not need to sync to the backend since every interaction is updating the backend in real-time.  In an online only mode, if the network connection is severed, the user has limited functionality with the application.

 

Creating an online application in mobile development kit is very similar to creating an offline application.  Instead of starting with the Initialize Offline OData action, you will start with a Create action, then an Open action.  The other actions, CreateEntity, UpdateEntity, DeleteEntity behave very similarly to the Offline OData actions you are familiar with.

 

The product also supports OData CallFunction imports.  You can create actions that call OData function and use them within the application.

 

 

For example, I create an action for the Confirm CallFunction.  From the editor, I see that the function has two parameters and I can map the parameters to other actions, rules, or backend objects and use within my application.  Once created, I can use similarly to other actions.

 

Developer Productivity Enhancements

We have also added enhancements to the product that make it easier to develop applications.

Ignore Files
In the deploy screen, you can use the Filter Files option to specify things that are part of your project structure that you don’t want to include in your deployed application.

Externals
Also in the deploy screen, you can specify external references for your deployed application.

Enhanced Metadata Validation
The Metadata Validate option in the menu has been enhanced to validate more objects and code in your application to find potential issues that should be addressed. Validation is run automatically when you import an application into the editor or you can run Metadata Validate manually from the context menu when you right-click on your project.

 

Usability Enhancements

We have incorporated a few new usability enhancements to make working from within Web IDE easier.

MDK Perspective
We are introducing a new perspective dedicated to MDK development.

 

When you click the MDK Development icon on the left, the color of the folder icons change and the projects are filtered to only display mobile development kit projects. This includes projects that are coming from a repository.  The context menus are also filtered to only display mobile dev kit related menu options.  One example is that if you click on New Project in the menu, it automatically creates a mobile development kit project and skips the screen to choose the application type.

Deploy directly to client / Drop Down List for MDK CPms apps
While developing applications, we all deploy our application often to view the changes in our simulator or device app. When you select Webpack and Deploy to Mobile Services, two enhancements have been added in the process.

First, we have added a checkbox called Automatically deploy after uploading.  When selected, you no longer need to login to Mobile Services to click on deploy.  The editor will automatically deploy from Mobile Services too so that when the Editor has completed the process, you can go directly to the client to view the changes in your application.

The second enhancement is that you no longer need to remember your Application Id from Mobile Service to type it into a text field.  We have added a drop down list to display MDK Mobile Services applications based on the selected Destination Name.

 

 

Quick Navigation Jump
Throughout the editor, you will now see a quick navigation jump icon  that allows you to jump directly to the action, rule, page, or object that is referenced.  This helps you investigate what something is doing or drill into something that is being called.  So, if you use the Object Browser to map a screen element to a rule, you can use the quick navigation jump to quickly take a look at that rule without having to hunt it down in the navigation tree.

 

Naming
Even through the feature name was changed from SAP Enterprise App Modeler to mobile development kit late last year, we still had references to SEAM, App Modeler, or SAP Enterprise App Modeler throughout the Client, Mobile Services, and the Editor in Web IDE.

Mobile Services and the Editor should now all be completely updated and replaced with Mobile Development Kit, MDK, and Mobile Dev Kit.  The client still references the old name and hopefully that will be changed in the next release.

 

Updated MDK SDK Client on SAP Store

The mobile development kit has an updated version that is available for download from the SAP Store and SAP Service Marketplace.

You can then keep your .mdkproject folder external to the MDK client folder structure so it doesn’t get lost in a specific version of MDK.

 

The installation and setup of the client has also been simplified.  The MDK client includes a Dependencies Installer.  Run the dependencies installer to see which dependencies need to be installed or updated for MDK.  The dependencies installer will then install anything you select.

 

Next run the install.command, duplicate and create your own version of template.mdkproject, and then run create-client.command and point to your .mdkproject.

We will be updating the MDK Client Setup tutorial video on SAP HANA Academy to provide step by step instructions, so check it out.

 

Suspend and Resume Events

In the Application.app file, developers can now specify events that happen when the application is suspended and resumed.  The application is suspended when it is sent to the background.  The application is resumed when the end-user goes back into an application that was running in the background.  This enables actions to be taken to stop processes that consume battery when the application is running in the background.

These events options can be found in the Application.app file.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Doyle

    Thanks for the update Sue, it’s good to see this exciting product maturing.  I’m looking forward to seeing Android support at some point because I think that will make it much more attractive e.g. for B2C scenarios.

     

    (0) 
    1. Sue Berry
      Post author

      Hi Pavlo,

       

      Perfect timing on your question.  We are currently taking nominations for MDK 3.0 early adopter care program.  This version includes both an iOS and Android client.

      Don Coop will be releasing a blog with more details soon, but you can also sign up if you’re interested here.

       

      The Early Adopter Care program for MDK 3.0 is now accepting nominations. Here is the link – https://influence.sap.com/sap/ino/#campaign/1710

       

      Please do not hesitate to let me know if you have any questions or need anything else.

      Sue

      (0) 
    1. Sue Berry
      Post author

      Hi Tenzin,

      I just emailed you as well, but sharing here for others’ info.

      We do not have a charts UI control in MDK already, but you can create a custom UI control for MDK. SAP Asset Manager did that to add charts and a map to their application. Lucas’ blog can show you how.

      https://blogs.sap.com/2018/09/26/build-extension-controls-in-mobile-development-kit-2.0-sp1/

      You may also try downloading the SAP Asset Manager app from the App Store. It can show you the type of app you can build with MDK. Their maps and charts are all custom UI extension controls. Use demo mode to view a nice demo of the application. 

      (0) 

Leave a Reply