Implement Deep Linking to Another App from an MDK App

This step includes creating a mobile project in SAP Build Lobby.

1. In the SAP Build Lobby, click Create > Create to start the creation process.

   

2. Click the Application tile and choose Next.

   

3. Select the Mobile category and choose Next.

   

4. Select the Mobile Application to develop your mobile project in SAP Business Application Studio and choose Next.

   

5. Enter the project name mdkdeeplink (used for this tutorial) , add a description (optional), and click Review.

   

   SAP Build recommends the dev space it deems most suitable, and it will automatically create a new one for you if you don’t already have one. If you have other dev spaces of the Mobile Application type, you can select between them. If you want to create a different dev space, go to the Dev Space Manager. See Working in the Dev Space Manager.

6. Review the inputs under the Summary tab. If everything looks correct, click Create to proceed with creating your project.

   

7. Your project is being created in the Project table of the lobby. The creation of the project may take a few moments. After the project has been created successfully, click the project to open it.

   

8. The project opens in SAP Business Application Studio.

   

   When you open the SAP Business Application Studio for the first time, a consent window may appear asking for permission to track your usage. Please review and provide your consent accordingly before proceeding.

   

The Storyboard provides a graphical view of the application’s runtime resources, external resources, UI of the application, and the connections between them. This allows for a quick understanding of the application’s structure and components.

• Runtime Resources: In the Runtime Resources section, you can see the mobile services application and mobile destination used in the project, with a dotted-line connected to the External Resources.
• External Resources: In the External Resources section, you can see the external services used in the project, with a dotted-line connection to the Runtime Resource or the UI app.
• UI Application: In the UI Applications section, you can see the mobile applications.

1. Click on + button in the Runtime Resources column to add a mobile services app to your project.

   

   This screen will only show up when your CF login session has expired. Use either Credentials OR SSO Passcode option for authentication. 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.

   

2. Choose myapp.mdk.demo from the applications list in the Mobile Application Services editor and click Add App to Project. You do not require to add a destination for this tutorial.

   

   You can access the mobile services admin UI by clicking on the Mobile Services option on the right hand side.

   In the storyboard window, the app will be added under the Runtime Resources column.

   

3. Click the + button in the UI application column header to add mobile UI for your project.

   

4. In the Basic Information step, select No for the Enable Auto-Deployment to Mobile Services After Project Creation property, and click Finish. You will modify the generated project in next step and will deploy it later.

   

5. After clicking Finish, the storyboard is updated displaying the UI component. The MDK project is generated in the project explorer based on your selections.

   

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 Start.

   

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 Start button. In the Properties pane, click the Events tab, click the dotted 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. In the Base Information step, enter the Rule Name as OpenSAPMobileStart, click Finish.

   

   Replace the generated snippet with below code.

   JavaScript Copy

   /**
   * @param {IClientAPI} context
   */
   import { Application, Utils } from "@nativescript/core";
   
   function openUrl(location) {
       if (Application.ios) {
           const url = NSURL.URLWithString(location.trim());
           if (UIApplication.sharedApplication.canOpenURL(url)) {
               return UIApplication.sharedApplication.openURLOptionsCompletionHandler(url, null, null);
           } else {
               return false;
           }
       } else {
           return Utils.openUrl(location);
       }
   }
   
   export default function OpenSAPMobileStart(context) {
       return context.executeAction('/mdkdeeplink/Actions/Confirmation.action').then((result) => {
           if (result.data) {
               // This will open the SAP Mobile Start app
               const url = Application.ios 
                   ? "com.sap.mobile.start://"
                   : "com.sap.mobile.apps.sapstart://";
               return openUrl(url);
           } else {
               return Promise.reject('User Deferred');
           }
       });
   }

   Show all 31 lines Show less

   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 OpenSAPMobileStart.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

   /**
   * Describe this function...
   * @param {IClientAPI} context
   */
   import { Application, Utils } from "@nativescript/core";
   function openUrl(location) {
       if (Application.ios) {
           const url = NSURL.URLWithString(location.trim());
           if (UIApplication.sharedApplication.canOpenURL(url)) {
               return UIApplication.sharedApplication.openURLOptionsCompletionHandler(url, null, null);
           } else {
               return false;
           }
       } else {
           return Utils.openUrl(location);
       }
   }
   export default function OpenSAPcom(context) {
       return context.executeAction('/mdkdeeplink/Actions/Confirmation.action').then((result) => {
           if (result.data) {
               //This will open SAP.com website
               openUrl("https://www.sap.com");
           } else {
               return Promise.reject('User Deferred');
           }
       });
   }

   Show all 27 lines Show less

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

1. Switch to the Main.page tab, click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services.

   

2. Select deploy target as Mobile Services.

   

3. Select Mobile Services Landscape.

   

4. 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 includes a feature that displays a QR code for onboarding in the mobile client. To view the onboarding QR code, click the Application QR Code icon in the editor’s header area.

The On-boarding QR code is now displayed.

Leave the Onboarding dialog box open for the next step.

Ensure that you choose the correct device platform tab above. Once you have scanned and onboarded using the onboarding URL, it will be remembered. If you log out and onboard again, you will be prompted to either continue using the current application or scan a new QR code.