Implement Deep Linking into an MDK Application

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 deeplinkintomdkapp (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.

   

3. Select com.sap.edm.sampleservice.v4 from the destinations list and click Add App to Project.

   

   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 and mobile destination will be added under the Runtime Resources column. The mobile destination will also be added under the External Resources with a dotted-line connection to the Runtime Resource. The External Resource will be used to create the UI application.

   

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

   

5. In the Basic Information step, provide the below information and click Next. You will modify the generated project in next step and will deploy it later.

   Field	Value
   MDK Template Type	List Detail
   Enable Auto-Deployment to Mobile Services After Project Creation	Select No

   

   The List Detail template generates the offline or online actions, rules, messages and pages to view records. More details on MDK template is available in help documentation.

6. In the Data Collections step, provide the below information and click Finish. Data Collections step retrieves the entity sets information for the selected destination.

   Field	Value
   Enter a path to service (e.g. /sap/opu/odata/sap/SERVICE_NAME)	Leave it as it is
   Select the Service Type	Leave the default value as OData
   Enable Offline	It’s enabled by default
   Select all data collections	Leave it as it is
   What types of data will your application contain?	Select Customers and Products

   

   Regardless of whether you are creating an online or offline application, this step is needed for app to connect to an OData service. When building an MDK Mobile application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services. For MDK Web application, destination is set up in SAP BTP admin UI.

   Since you have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client and will run as online in Web environment.

   Data Collections step retrieves the entity sets information for the selected destination.

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

   

MDK provides an OnLinkDataReceived event in the Application.app that is called when the MDK app is launched from an external link. The data can be accessed via context.getAppEventData().

1. Click the Application.app to open it in MDK Application Editor and then and select the Create a rule/action for the OnLinkDataReceived event.

   

2. Select the Object Type as Rule and keep the default Folders path.

   

3. In the Basic Information step, enter the Rule name as LinkDataReceived and click Finish to complete the rule creation process.

   

4. Replace the generated code with below snippet.

   JavaScript Copy

   /**
   * Describe this function...
   * @param {IClientAPI} context
   */
   
   export default function LinkDataReceived(context) {
       context.getLogger().log(`Link Data Received Triggered`,'Info');
       let linkData = context.getAppEventData();
       let data;
   
       try {
           data = JSON.parse(linkData);
       } catch (error) {
           return null;
       }
   
       let splitURL = data.URL.split('/');
       let action = splitURL[3];
       let entity = splitURL.length > 4 ? splitURL[4] : '';
   
       switch (action) {
           case 'search':
               if (entity === 'product') {
                   return openProductListWithFilter(context, data.Parameters);
               }
               break;
           case 'product':
               if (data.Parameters && data.Parameters.id) {
                   return openProductByID(context, data.Parameters.id);
               }
               break;
           default:
               context.getLogger().log(`Unrecognized Link Path ${data.URL}`,'Error');
               break;
       }
   }
   
   function openProductByID(context, id) {
       context.getLogger().log(`ID: ${id}`,'Debug');
       return context.read('/deeplinkintomdkapp/Services/com_sap_edm_sampleservice_v4.service', `Products(${id})`, [], null).then(function (result) {
           if (result.length) {
               context.getPageProxy().setActionBinding(result.getItem(0));
               return context.getPageProxy().executeAction('/deeplinkintomdkapp/Actions/com_sap_edm_sampleservice_v4/Products/NavToProducts_Detail.action');
           }
       });
   }
   
   function openProductListWithFilter(context, parametersObj) {
       let pageData = context.getPageProxy().getPageDefinition('/deeplinkintomdkapp/Pages/com_sap_edm_sampleservice_v4_Products/Products_List.page');
       var filterQO = '$filter=';
       for (var key in parametersObj) {
           var value = parametersObj[key];
           filterQO += `${key} eq '${value}' and `;
       }
       if (filterQO.slice(-5) === ' and ') {
           filterQO = filterQO.slice(0, filterQO.length - 5);
       }
       context.getLogger().log(`${filterQO}`,'Debug');
       pageData.Controls[0].Sections[0].Target.QueryOptions = filterQO;
       return context.getPageProxy().executeAction({
           "Name": '/deeplinkintomdkapp/Actions/com_sap_edm_sampleservice_v4/Products/NavToProducts_List.action',
           "Properties": {
               "PageMetadata": pageData
           }
       });
   }

   Show all 66 lines Show less

Now that the MDK application is configured to act when a request from external source is received, you will Deploy the Project definitions to Mobile Services to use in the Mobile client.

1. Switch to the Application.app 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.

   

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

   

   You should see Deploy to Mobile Services successfully! message.

   

1. Follow steps 1 to 3 from this tutorial and make sure to use the same bundle ID in MDKProject.json as you provided for Apple Universal Links settings in Mobile Services and also for Application ID in Android Studio while generating Digital Asset Links file.

2. Add highlighted files under DemoSampleApp.mdkproject.

        DemoSampleApp.mdkproject
        ├── App_Resources_Merge
           ├── Android
           │   └── src
           │       └── main
           │           └── AndroidManifest.xml
           └── iOS
               ├── app.entitlements
               └── build.xcconfig
   

   

   Files specified in the .mdkproject/App_Resources_Merge folder override a part of the files in <generated-project>/app/App_Resources. You can find more details about it in help documentation.

3. Provide below information in the AndroidManifest.xml file. Make sure to provide Server URL from the step 4.2 and save the changes.

   XML Copy

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools">
       <application>
           <activity android:name="sap.mdkclient.MDKAndroidActivity">
               <intent-filter android:autoVerify="true">
                   <action android:name="android.intent.action.VIEW" />
                   <category android:name="android.intent.category.DEFAULT" />
                   <category android:name="android.intent.category.BROWSABLE" />
                   <data android:scheme="https" />
                   <data android:host="<enter Server URL without https:// from step 4.2>" />
                   <data android:pathPrefix="/mobileservices/deeplinks" />
               </intent-filter>
           </activity>
       </application>
   </manifest>

   The intent files will map URLs from your website to activities to your MDK Client so the OnLinkDataReceived event can be triggered. See here for more information.

4. Provide below information in the app.entitlements file. Make sure to provide Server URL from the step 4.2 and save the changes.

   XML Copy

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
   <dict>
       <key>aps-environment</key>
       <string>development</string>
       <key>com.apple.developer.associated-domains</key>
       <array>
           <string>applinks:<enter Server URL without https:// from the step 4.2></string>
       </array>
       <key>com.apple.security.app-sandbox</key>
       <true/>
       <key>com.apple.security.network.client</key>
       <true/>
   </dict>
   </plist>

5. Provide below information in the build.xcconfig file. Make sure to provide same Apple Team ID that you entered in Mobile Services Apple Universal Links configuration.

   XML Copy

   // Specify the Team since Universal links are specific to the Team / Bundle ID configured in Mobile Services
   DEVELOPMENT_TEAM = <Your Team ID>

6. Create your MDK client either using MDK SDK by following the step 4 from Build Your Mobile Development Kit Client Using MDK SDK tutorial OR using SAP Cloud Build Service by following Build Your mobile development kit Client Using Cloud Build Service tutorial.

Make sure you are choosing the right device platform tab above.

Make sure you are choosing the right device platform tab above.

In a real-world use case, you would click on a link from external sources such as webpage, email, or another app. This action will launch your MDK client and enable tasks such as navigating to a page, filtering a list based on a parameter, or approving a request.

For this tutorial, to test the deep links, you will download an index.html on your local machine and place it in your device’s file system.