Skip to Content

Implement Deep Linking to Another App from an MDK App

Open a web page or navigate to an installed app from an MDK app.
You will learn
  • How to open SAP standard app like Mobile Cards from MDK public store client
  • How to open a web page
jitendrakansalJitendra KansalAugust 5, 2022
Created by
jitendrakansal
August 30, 2019
Contributors
jitendrakansal
jitendrakansal

Prerequisites

You may clone an existing project from GitHub repository and start directly with step 5 in this tutorial.

Deep links are used to send users directly to an app instead of a website or a store saving users the time and energy locating a particular page themselves – significantly improving the user experience.

If an app is already installed, you can specify a custom URL scheme (iOS Universal Links) or an intent URL (on Android devices) that opens that app. Using deep link, you can also navigate to specific events or pages, which could tie into campaigns that you may want to run.

MDK

This tutorial has been executed using public store MDK client which has out of the box functionality to open the SAP standard app like SAP Mobile Cards.
If you are building a custom version of Mobile development kit client, there you can implement deep links by specifying related custom URL scheme.

  • Step 1
    1. Launch the Dev space in SAP Business Application Studio.

    2. Click Start from template on Welcome page.

      MDK

      If you do not see the Welcome page, you can access it via Help menu or via View menu > Find Command > Welcome.

    3. Select MDK Project and click Start.

      MDK

      If you do not see the MDK Project option check if your Dev Space has finished loading or reload the page in your browser and try again.

    4. In Basic Information step, select or provide the below information and click Finish:

      Field Value
      MDK Template TypeSelect Empty from the dropdown
      Your Project Name Provide a name of your choice. MDKDeepLink is used for this tutorial
      Your Application Name <default name is same as project name, you can provide any name of your choice>
      Target MDK Client Version Leave the default selection as MDK 6.0+ (For use with MDK 6.0 or later clients)
      Choose a target folder By default, the target folder uses project root path. However, you can choose a different folder path
      MDK

      The MDK Empty Project template creates a Logout action, Close page action, rule and an empty page (Main.page). After using this template, you can focus on creating your pages, other actions, and rules needed for your application. More details on MDK template is available in help documentation.

    5. After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the MDKDeepLink project in the project explorer.

  • Step 2

    In the MDK editor, you will first create a message to display a confirmation dialog if user wants to leave the current app and then will create 2 new Rule files:

    • OpenSAPMobileCards.js to open SAP Mobile Cards app
    • OpenSAPcom.js to open SAP.com web page

    >You can find more details about writing a Rule.

    1. Right-click the Actions folder | MDK: New Action | choose MDK Message Actions in Category | click Message Action | Next.

      MDK

      Provide the below information:

      Property Value
      Action NameConfirmation
      Type Select Message from the dropdown
      Message Do you want to leave the current app?
      Title Confirm
      OKCaption OK
      OnOK --None--
      CancelCaption CANCEL
      OnCancel --None--
    2. Right-click the Rules folder | MDK: New Rule File | select Empty JS Rule.

      MDK
    3. Enter the Rule name OpenSAPMobileCards, press Enter.

      MDK

      Replace the generated snippet with below code.

      JavaScript
      Copy
      export default function OpenSAPMobileCards(context) {
          // Get the Nativescript Utils Module
          const utilsModule = context.nativescript.utilsModule;
          return context.executeAction('/MDKDeepLink/Actions/Confirmation.action').then((result) => {
              if (result.data) {
                  //This will open SAP Mobile Cards app
                  return utilsModule.openUrl("com.sap.content2go://");
              } else {
                  return Promise.reject('User Deferred');
              }
          });
      }
      
      MDK

      openUrl is a NativeScript API to open an URL on device. You can find more details about this API.

    4. Save your changes to the OpenSAPMobileCards.js file.

    5. Create one more Rule file and name it to OpenSAPcom.

      Replace the generated snippet with below code.

      JavaScript
      Copy
      export default function OpenSAPcom(context) {
          // Get the Nativescript Utils Module
          const utilsModule = context.nativescript.utilsModule;
          return context.executeAction('/MDKDeepLink/Actions/Confirmation.action').then((result) => {
              if (result.data) {
                  //This will open SAP.com website
                  return utilsModule.openUrl("https://www.sap.com");
              } else {
                  return Promise.reject('User Deferred');
              }
          });
      }
      
      MDK
    6. Save your changes to the OpenSAPcom.js file.

  • Step 3
    1. Next, on Main.page, drag and drop the Button Table Static Container control onto the Page.

      MDK

      The controls available in Container section includes controls that act as containers for other controls, such as container items. A container is constant for all pages. The size of a container depends on the controls and contents included inside.
      You can find more details about Containers.

    2. Now, you will add items to this Container control.

      Drag and drop the Button Static Item control onto the page.

      MDK
    3. Repeat the above step, and drag and drop one more such Button Static Item control.

      MDK
    4. Select the first control and change its title to Open SAP Mobile Cards.

      MDK
    5. Change the title for the second button as below:

      MDK

    Can you drag & drop a container item control without adding related container control on the page area?

  • Step 4
    1. In this step, you will bind the JavaScript files to the OnPress of each button.

      In Main.page, select Open SAP Mobile Cards button. In the Properties pane, click the Events tab, click the link icon for the Handler property to open the object browser.

      Double-click the OpenSAPMobileCards.js and click OK to set it as the OnPress action.

      MDK
    2. Repeat the same and set the handler for Open sap.com page button to OpenSAPcom.js.

  • Step 5

    So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy the application definitions to Mobile Services to use in the Mobile client.

    1. Right-click Application.app and select MDK: Deploy.

      MDK
    2. Select deploy target as Mobile Services.

      MDK
    3. Select Mobile Services Landscape.

      MDK
    4. Select application from Mobile Services.

      MDK
    5. If you want to enable source for debugging the deployed bundle, then choose Yes.

      MDK

      You should see Deploy to Mobile Services successfully! message.

      MDK
  • Step 6

    SAP Business Application Studio has a feature to display the QR code for onboarding in the Mobile client.

    Click the Application.app to open it in MDK Application Editor and then click the Application QR Code icon.

    MDK

    The On-boarding QR code is now displayed.

    MDK

    Leave the Onboarding dialog box open for the next step.

  • Step 7

    Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

    What is the NativeScript API used to open an URL?

Back to top