Implement Deep Linking to Another App from an MDK App

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

2. Click Start from template on the Get Started page.

   

   If you do not see the Get Started page, you can access it by typing >get started in the center search bar.

   

3. Select MDK Project and click Start.

   

   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.

   This screen will only show up when your CF login session has expired. Enter your login credentials, click Sign in. After successful signed in to Cloud Foundry, select your Cloud Foundry Organization and Space where you have set up the initial configuration for your MDK app and click Apply.

   

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

   Field	Value
   MDK Template Type	Select 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

   

   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.

1. On the Main.page, drag and drop the Button Table Static Container control onto the Page.

   

   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.

   

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

   

4. Select the first control, remove the default value for the Image property and update its title to Open SAP Mobile Cards.

   

5. Repeat the same for the second button and update its title to Open sap.com page:

   

1. In this step, you will bind a rule to the OnPress event of each button.

   In Main.page, select Open SAP Mobile Cards button. In the Properties pane, click the Events tab, click the 3 dots icon for the OnPress Handler property and select Create a rule/action to create a new rule.

   

2. Choose the Rule in Object Type, keep the default path for the Folders and click OK.

   

3. Enter the Rule Name as OpenSAPMobileCards, click Finish.

   

   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');
           }
       });
   }
   

   

   You will see an error complaining about cannot find file reference. This is due to the action file has not created yet. You will create it in next step.

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

4. In the generated OpenSAPMobileCards.js rule, click on the red line. You will notice a yellow bulb icon suggesting some fixes, click on it and then select MDK: Create action for this reference, and click Message Action.

   

5. Provide the below information:

   Property	Value
   Message	Do you want to leave the current app?
   Title	Confirm
   OKCaption	OK
   OnOK	--None--
   CancelCaption	Cancel
   OnCancel	--None--

   

6. Repeat the same for the Open sap.com page button, create a new rule OpenSAPcom binding it’s OnPress Handler event. 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');
               }
           });
       }
   

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

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.

   

2. Select deploy target as Mobile Services.

   

3. Select Mobile Services Landscape.

   

4. Select application from Mobile Services.

   

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

   

   You should see Deploy to Mobile Services successfully! message.

   

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.

The On-boarding QR code is now displayed.

Leave the Onboarding dialog box open for the next step.

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.