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.
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.
Mobile development kit now provides support for barcode scanning. There are two new actions in the Action Editor.
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.
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:
Client features
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:
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.
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.
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.
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?
Here are the high level steps
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
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.
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.
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.
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.
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.
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.
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.
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
- Barcode Scanner Action
- Internationalization and Localization
- Show application, definitions and framework versions in iOS Settings app
- Reusable Components
- Additional iOS SDK controls
- Section Grid Table Control
- Contact Cell Table Control
- Object Cell List Picker
- Image Collection
- Enhanced Extension Controls
- Simpler method of building custom extension controls
- Custom extension controls act like regular controls in Editor
- Enhanced Online Support
- Developer Productivity Enhancements
- Usability Enhancements
- MDK perspective
- Deployment Enhancements
- Quick Navigation Jump
- Name Changes
- Updated MDK SDK Client
- Simpler MDK client setup
- Simplify application packaging / branding
- Suspend and Resume Application Events
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.
- SAP Managed Tags:
7 Comments
