Skip to Content

Implement Deep Linking to Another App from an MDK App

test
0 %
Implement Deep Linking to Another App from an MDK App
Details

Implement Deep Linking to Another App from an MDK App

Jitendra Kansal
Jitendra Kansal
November 3, 2020
Created by
jitendrakansal
August 30, 2019
Intermediate
25 min.
mobile development kit client, SAP Cloud Platform, Mobile, Tutorial, iOS, SAP Business Application Studio, Intermediate, Android, SAP Cloud Platform Mobile Services
Open a web page or navigate to an installed app from an MDK app.

You will learn

  • How to open SAP standard apps like Mobile Cards, Fiori Client from MDK public store client
  • How to open an UI5 app running in a Fiori Client from an MDK public store client
  • How to open a web page

Prerequisites

  • Tutorial group: Set Up for the Mobile Development Kit (MDK)
  • Download and install: SAP Mobile Services Client on your iOS or Android device (If you are connecting to AliCloud accounts then you will need to brand your custom MDK client by whitelisting custom domains as allowed domains restrictions that exist by default in App store clients.)
  • Download and install SAP Mobile Cards on your iOS or Android device
  • Download and install SAP Fiori Client on your iOS or Android device

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 apps like SAP Mobile Cards and SAP Fiori Client.
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: Create a new MDK project in SAP Business Application Studio

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

  2. Navigate to File menu → click New Project from Template.

    MDK

  3. Select MDK Project and click Next.

    MDK

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

    Field Value
    MDK template type Select Empty from the dropdown
    Your project name MDKDeepLink
    Your application name <default name is same as project name, you can provide any name of your choice>
    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.

    If you see Cloud foundry token expired, continue without mobile services connection? message, then set the Cloud Foundry environment again by clicking at bottom left corner of your status bar to initiate a valid session and repeat above steps.

  5. After clicking Next, the wizard will generate your MDK Application based on your selections. You should now see the MDKDeepLink project in the project explorer. As you have already opened the workspace, there is no need to open the generated project in a new workspace. Ignore the pop-up or click the cross icon to hide the window.

    MDK
Done
Log on to answer question
Step 2: Create a new rule
View Full Instructions

In the MDK editor, you will create 4 new JavaScript files:

  • OpenSAPMobileCards.js to open SAP Mobile Cards app
  • OpenSAPFioriClient.js to open SAP Fiori Client app
  • OpenUI5.js to open an UI5 app running in SAP Fiori Client app
  • OpenSAPcom.js to open SAP.com web page

    You can find more details about writing a Rule.

  1. Right-click the Rules folder | click MDK: New Rule.

  2. Enter the file name OpenSAPMobileCards.js, press Enter.

    MDK

    Replace the generated snippet with below code.

    export default function OpenSAPMobileCards(context) {
    // Get the Nativescript UI Dialogs Module
    const dialogs = context.nativescript.uiDialogsModule;
    // Get the Nativescript Utils Module
    const utilsModule = context.nativescript.utilsModule;
    return dialogs.confirm("Do you want to leave the current app?").then((result) => {
        if (result === true) {
            //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.

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

  4. Repeat the above step and create another new Rule:

    Enter the file name OpenSAPFioriClient.js, click OK.

    Replace the generated snippet with below code.

    export default function OpenSAPFioriClient(context) {
    // Get the Nativescript UI Dialogs Module
    const dialogs = context.nativescript.uiDialogsModule;
    // Get the Nativescript Utils Module
    const utilsModule = context.nativescript.utilsModule;
    return dialogs.confirm("Do you want to leave the current app?").then((result) => {
        if (result === true) {
            //This will open SAP Fiori Client App
            return utilsModule.openUrl("com.sap.fiori.client.xcallbackurl://x-callback-url");
        } else {
            return Promise.reject('User Deferred');
        }
    });
}
    MDK

  5. Save your changes to the OpenSAPFioriClient.js file.

  6. Repeat the above step and create another new file:

    Enter the file name OpenUI5.js, click OK.

    Replace the generated snippet with below code.

    export default function OpenUI5(context) {
    // Get the Nativescript UI Dialogs Module
    const dialogs = context.nativescript.uiDialogsModule;
    // Get the Nativescript Utils Module
    const utilsModule = context.nativescript.utilsModule;
    return dialogs.confirm("Do you want to leave the current app?").then((result) => {
        if (result === true) {
            //This will open Software Downloads app running in SAP Fiori Client
            return utilsModule.openUrl("com.sap.fiori.client.xcallbackurl://x-callback-url/openFioriUrl?url=https://launchpad.support.sap.com/#/softwarecenter");
        } else {
            return Promise.reject('User Deferred');
        }
    });
}
    MDK

  7. Save your changes to the OpenUI5.js file.

  8. Create one more file and name it to OpenSAPcom.js.

    Copy and paste the following code.

    export default function OpenSAPcom(context) {
    // Get the Nativescript UI Dialogs Module
    const dialogs = context.nativescript.uiDialogsModule;
    // Get the Nativescript Utils Module
    const utilsModule = context.nativescript.utilsModule;
    return dialogs.confirm("Do you want to leave the current app?").then((result) => {
        if (result === true) {
            //This will open SAP.com website
            return utilsModule.openUrl("https://www.sap.com");
        } else {
            return Promise.reject('User Deferred');
        }
    });
}
    MDK

  9. Save your changes to the OpenSAPcom.js file.

Done
Log on to answer question
Step 3: Add buttons on main page to open other apps or web pages

  1. Next, on Main.page, drag and drop the Section Button Table 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 Section Button Container Item control onto the page.

    MDK

  3. Repeat the above step, and drag and drop 3 more such Section Button Container Item controls.

    MDK

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

    MDK

  5. Repeat the above step and change the title for other controls as below:

    MDK
Can you drag & drop a container item control without adding related container control on the page area?
×
Step 4: Set onPress handler to the buttons

  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 do the following:

    Set the handler for Open SAP Fiori Client button to OpenSAPFioriClient.js.

    Set the handler for Open UI5 App button to OpenUI5.js.

    Set the handler for Open SAP.com page button to OpenSAPcom.js.

Done
Log on to answer question
Step 5: Deploy and activate the application

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, we deploy this application definition to Mobile Services.

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

    MDK

  2. Select deploy target as Mobile Services.

    MDK

  3. Select the application from Mobile Services.

    MDK

    You should see Deploy succeeded message.

    MDK
Done
Log on to answer question
Step 6: Populate the QR code for app onboarding

SAP Business Application Studio has a feature to generate QR code for app onboarding.

Double-click the Application.app to open it in MDK Application Editor and click Application QR Code icon to populate the QR code.

MDKMDK
Done
Log on to answer question
Step 7: Run the app in MDK client

Make sure you are choosing the right device platform tab above. Once you have scanned and onboarded 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.

  1. Follow these steps to on-board the MDK client.

    Once you accept app update, you will see Main page with the buttons you added in previous step 3.

    MDK

  2. Tap OPEN SAP MOBILE CARDS and then tap OK.

    MDK

    If you have already installed SAP Mobile Cards app, then MDK app will open it.

    MDK

  3. Tapping OPEN SAP FIORI CLIENT will open SAP Fiori Client app.

    If you have access to any Fiori app or Fiori Launchpad page for example SAP Support Launchpad, then enter that URL in your Fiori Client app.

    MDK

  4. Tapping on OPEN UI5 APP will open a specific app running in SAP Fiori Client as per OpenUI5.js file.

    In below screenshot, there is one Software Downloads UI5 app part of SAP Support Launchpad.

    MDK

  5. Tapping on OPEN SAP.COM PAGE will open SAP website.

    MDK

  1. Follow these steps to on-board the MDK client.

    Once you accept app update, you will see Main page with the buttons you added in previous step 3.

    MDK

  2. Tap Open SAP Mobile Cards and then tap OK.

    MDK

    If you already installed SAP Mobile Cards app, then MDK app will open it.

    MDK

  3. Tapping Open SAP Fiori Client will open SAP Fiori Client app.

    If you have access to any Fiori app or Fiori Launchpad page for example SAP Support Launchpad, then enter that URL in your Fiori Client app.

    MDK

  4. Tapping on Open UI5 App will open a specific app running in SAP Fiori Client as per OpenUI5.js file.

    In below screenshot, there is one Software Downloads UI5 app part of SAP Support Launchpad.

    MDK

  5. Tapping on Open SAP.com page will open SAP website.

    MDK

Once you have scanned and onboarded 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.

Congratulations! You have successfully implemented Deep Linking to Another App from your MDK App and you are now all set to Use OData Annotations to Add CRUD Functionality to an MDK App.

Done
Log on to answer question

Next Steps

Navigate tutorial steps

QR Code

QR code
Back to top