Mobile Development Kit: Reusable Components

The mobile development kit (MDK) is a feature of SAP Cloud Platform Mobile Services.  It provides the ability to create and update application components that can be reused in other applications. In this blog, I provide details about reusable components and instructions that help you use this feature in your own environment.  You can also check out my video on YouTube SAP Technology channel about reusable components.

If this is your first introduction to mobile development kit, you may want to review the Learning Journey.  It provides links to overview presentations, videos, and blogs that help you get started.

Developers can create a mobile development kit application that depends on a reusable component.  Components can act as standalone applications, 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.

Reusable Components provide:

• re-use of an MDK component such as pages, actions, global variables, and rules in other MDK applications

Why use this feature?

• Create a component that can be used in multiple applications.
  • You can create a component such as a profile page once, add to one or more application and deploy those application with the component included.
  • Update the component once and redeploy all applications that use that component to get the changes. No need to update metadata or code in multiple 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.
• Extend MDK apps such as SAP Asset Manager.  As a customer or partner, you can extend SAP applications built on top of MDK.
  • Keep customizations separate from the main applications
  • Allows for application upgrades without erasing customizations.

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.

When creating a new CIM file, the wizard asks you for the project name and the application name.  The Application Name is based on a new property in the Application.app file that uniquely identifies the component. This is used in all definition references going forward and is distinct from the application’s project name in the editor.

The deployed application includes the main application, the integrated pieces from the component application, and any dependencies to run the integrated pieces.

Now, I’ll walk you through the steps I went through to use a reusable component in another application.

Summary

In this scenario, I am a developer who has been asked by IT to make sure that every mobile application for the organization uses the same profile page for usability, simplicity and consistency.  I create an application called MyMDKComponent and this application contains a Profile Page and an action to open that Profile Page.

I will add this Profile Page to all 15 of my mobile applications for the org.  I’ll need to create a CIM file in each of my mobile applications and specify that the component’s profile page will replace the existing or stub profile page in the main application.  My component action will also replace the action in my main application so I can verify that the correct page is opened when the user clicks on the Profile button from the Home page.  In this blog, I go through simplistic steps for adding the component to one main application.

My Main MDK Application

I have an application called MyMainMDKApp.  It has a home page that links to a Profile Page. The Profile Page is currently a bare bones or stub page waiting to be replaced.

This application also has an action called NavtoProfile that opens this Profile Stub Page.

My Component Application

I created a component application called MyMDKComponent with the Offline Initialize action so that I could run and test my component application independently.

The application has two main items that are important to me for reusability, a page called ProfilePage and an action called NavtoProfilePage.

The profile page has more information about the user, ability to reset the passcode, sign out option, and the option to edit the profile.

The component application also specifies the Application Name that will be used when integrating the two apps.  I left this as the default.

Integration the Component

Now, to integrate the component into my main application, I create a CIM file and set the integration points.

• Create a CIM file in the MyMainMDKApp application

• The CIM wizards asks for the following:
  • Project Name: MyMDKComponent
  • Application Name: MyMDKComponent
  • CIM File Name: [Defaults to ProjectName_ApplicationName]

• Once the CIM file is created, I can specify integration points between the two applications. First I replace the profile page in MyMainMDKApp with the profile page in MyMDKComponent.
  • Select the type of integration point – Page
  • Select the source

Select the target

Now that this is complete for the page, I do the same for the Action.

• Select the integration type: Action
  • set the source to NavtoProfilePage from MyMDKComponent
  • set the target to NavtoProfile from MyMainMDKApp

Deploy

Now, deploy the main application, MyMainMDKApp.  The bundle process automatically grabs the integrated pieces specified in the CIM file and any dependences.  The Webpack and Deploy process bundles it with the main application and then deploys just like any other application.

When you run the application in the simulator or device, you no longer see the initial stub profile page.

When you click on Profile from the Home page, you see the profile page from the component application.