--- parser: v2 auto_validation: true primary_tag: software-product>mobile-development-kit-client tags: [ tutorial>advanced, operating-system>ios, operating-system>android, topic>mobile, software-product>sap-business-technology-platform, software-product>mobile-development-kit-client, software-product>sap-mobile-services, software-product>sap-build-code, software-product>sap-build, software-product>sap-business-application-studio ] time: 35 author_name: Jitendra Kansal author_profile: https://github.com/jitendrakansal slug: cp-mobile-dev-kit-deeplink-intoapp canonical_url: https://developers.sap.com/tutorials/cp-mobile-dev-kit-deeplink-intoapp --- # Implement Deep Linking into an MDK Application Set up the mobile development kit client to accept deep links through URL schemes and HTTP URLs (iOS Universal Links and Android App Links). With this feature, your MDK app can be launched to perform actions like navigating to a page, filter a list based on a parameter, or approving a request from external sources (web page, email, or another app). ## Prerequisites - **Tutorial**: [Set Up for the Mobile Development Kit (MDK)](https://developers.sap.com/group.mobile-dev-kit-setup.html) - **Download the latest version of mobile development kit SDK** either from the SAP community [trial download](https://developers.sap.com/trials-downloads.html?search=Mobile+Development+Kit) or [SAP Software Center](https://me.sap.com/softwarecenter) if you are a SAP Mobile Services customer. This is required you to build a branded client. ## You will learn - How to handle deep link into MDK application - How to use application `OnLinkDataReceived` event - How to configure application links on SAP Mobile Services ## Intro You may clone an existing metadata project from the [MDK Tutorial GitHub repository](https://github.com/SAP-samples/cloud-mdk-tutorial-samples/tree/main/5-Brand-Your-Customized-App-with-mobile-development-kit-SDK/2-Implement-Deep-Linking-into-an-MDK-Application) and start directly with step 3 in this tutorial. --- MDK supports deep linking into MDK applications using MDK client URL scheme and HTTP URLs via iOS Universal Links and Android App Links. [iOS universal links](https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html) and [Android App Links](https://developer.android.com/training/app-links) are the HTTP URLs that bring the user directly to specific content in your MDK application. ![Deep Linking Navigation Demo In MDK App](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.7.gif) ### Create a New Project Using SAP Build 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. ![SAP Build Lobby Create Button](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.1.png) 2. Click the **Application** tile and choose **Next**. ![Application Tile Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.2.png) 3. Select the **Mobile** category and choose **Next**. ![Mobile Category Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.3.png) 4. Select the **Mobile Application** to develop your mobile project in SAP Business Application Studio and choose **Next**. ![Mobile Application Option Selected](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.4.png) 5. Enter the project name `deeplinkintomdkapp` (used for this tutorial) , add a description (optional), and click **Review**. ![Project Name Entry And Review](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.5.png) >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](https://help.sap.com/docs/build_code/d0d8f5bfc3d640478854e6f4e7c7584a/ad40d52d0bea4d79baaf9626509caf33.html). 6. Review the inputs under the Summary tab. If everything looks correct, click **Create** to proceed with creating your project. ![Project Summary Review Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.5.1.png) 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. ![Project Created In Lobby Table](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.6.png) 8. The project opens in SAP Business Application Studio. ![SAP BAS Workspace Opened](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.7.png) >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. >![BAS Usage Tracking Consent Window](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-1.8.png) ### Configure the Project Using Storyboard 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. ![Runtime Resources Add Button](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.1.png) >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. >![Cloud Foundry Login Authentication Dialog](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.2.png) 2. Choose `myapp.mdk.demo` from the applications list in the **Mobile Application Services** editor. ![Mobile Application Services App Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.3.png) 3. Select `com.sap.edm.sampleservice.v4` from the destinations list and click **Add App to Project**. ![Destination Selection Add App To Project](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.4.png) >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. ![Storyboard With Runtime And External Resources](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.5.png) 4. Click the **+** button in the UI application column header to add mobile UI for your project. ![UI Application Add Button In Storyboard](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.6.png) 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` | ![Basic Information Template Type Configuration](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.7.png) >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](https://help.sap.com/doc/f53c64b93e5140918d676b927a3cd65b/Cloud/en-US/docs-en/guides/getting-started/mdk/bas.html#creating-a-new-project-cloud-foundry). 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` | ![Data Collections Entity Set Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.8.png) 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. ![Updated Storyboard With UI Component](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.9.png) ### Add logic to handle deep linking 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()`](https://help.sap.com/doc/69c2ce3e50454264acf9cafe6c6e442c/Latest/en-US/docs-en/reference/apidoc/interfaces/icontrolcontainerproxy.html#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. ![Application Editor OnLinkDataReceived Event Setup](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.10.png) 2. Select the *Object Type* as Rule and keep the default *Folders* path. ![Rule Object Type Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.11.png) 3. In the **Basic Information** step, enter the Rule name as `LinkDataReceived` and click **Finish** to complete the rule creation process. ![Rule Name Entry LinkDataReceived](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-2.12.png) 4. Replace the generated code with below snippet. ```JavaScript /** * 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 } }); } ``` ### Deploy the Project 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**. ![Deploy Option In Editor Header Area](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-3.1.png) 2. Select deploy target as **Mobile Services**. ![Mobile Services Deploy Target Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-3.2.png) If you want to enable source for debugging the deployed bundle, then choose **Yes**. ![Enable Source For Debugging Prompt](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-3.3.png) You should see **Deploy to Mobile Services successfully!** message. ![Successful Deployment Confirmation Message](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-3.4.png) ### Configure Application Links in SAP Mobile Services [OPTION BEGIN [Android]] 1. Open SAP Mobile Services UI, click **Mobile Applications** **→** **Native/MDK** **→** click `myapp.mdk.demo` app. ![SAP Mobile Services App Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.1.png) 2. Click the **APIs** tab. Copy the **Server** URL and paste it in any text editor on your machine. You will need this information later. ![Mobile Services APIs Tab Server URL](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.2.png) 3. Switch to Android Studio and create a new project using the Empty Activity template. 4. Once the project is opened in the Android Studio, select **Tools** **→** **App Links Assistant** in the menu bar. ![Android Studio App Links Assistant Menu](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.3.png) >If you do not see **App Links Assistant** steps, you may need to click the `Create Applink` button. 8. Click **Open Digital Asset Links File Generator** in the App Links Assistant window. ![Digital Asset Links File Generator Button](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.4.2.png) 9. Provide the below information and click **Generate Digital Asset Links file**. | Property | Value | |----|----| | `Site Domain`| `` from the step 4.2 | | `Application ID` | Provide a unique name. Make sure to use the same value for `BundleID` in `MDKProject.json` when you create your `.mdkproject` in step 5.1 | ![Generate Digital Asset Links File Form](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.4.png) >For productive apps, you must select the keystore with the certificate that will be used to sign the `.apk` file. 10. Copy the text under the **Preview** section. ![Digital Asset Links Preview Section](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.5.png) 11. Switch to the SAP Mobile Services UI, navigate to the **Settings** > **Application Links** tab. ![Mobile Services Application Links Settings Tab](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.6.png) 12. Click on the pencil next to the **Android Universal Links** section. ![Android Universal Links Edit Pencil](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.6.1.png) 13. Provide the below information and click **OK**. | Property | Value | |----|----| | `Enabled`| Checked | | `Association File Content` | Paste the text copied from the preview section | ![Android Universal Links Configuration Form](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.7.png) >If you see a confirmation window, click **OK**. [OPTION END] [OPTION BEGIN [iOS]] 1. Open SAP Mobile Services Admin UI, click **Mobile Applications** **→** **Native/MDK** **→** click `myapp.mdk.demo` app. ![SAP Mobile Services App Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.1.png) 2. Navigate to the **Settings** > **Application Links** tab. ![Mobile Services Application Links Settings Tab](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.6.png) 3. Click on the pencil next to the **Apple Universal Links** section. ![Apple Universal Links Edit Pencil](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.8.png) 3. Provide the below information: | Property | Value | |----|----| | `Enabled`| Checked | | `Team ID` | `` You can find this information on the [Apple Developer website](https://developer.apple.com/help/account/manage-your-team/locate-your-team-id). | | `Bundle ID` | Provide a unique name. Make sure to use the same value for `BundleID` in `MDKProject.json` when you create your `.mdkproject` in step 5.1 | ![Apple Universal Links Configuration Form](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-4.9.png) [OPTION END] ### Create Your Branded MDK Client 1. Follow steps 1 to 3 from [this tutorial](https://developers.sap.com/tutorials/cp-mobile-dev-kit-build-client.html) 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 ![MDK Project App Resources File Structure](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-5.1.png) >Files specified in the `.mdkproject/App_Resources_Merge` folder override a part of the files in `/app/App_Resources`. You can find more details about it in [help documentation](https://help.sap.com/doc/f53c64b93e5140918d676b927a3cd65b/Cloud/en-US/docs-en/guides/getting-started/mdk/custom-client/app-resources-merge.html). 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 ``` >The intent files will map URLs from your website to activities to your MDK Client so the `OnLinkDataReceived` event can be triggered. See [here](https://developer.android.com/studio/write/app-link-indexing) 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 aps-environment development com.apple.developer.associated-domains applinks: com.apple.security.app-sandbox com.apple.security.network.client ``` 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 // Specify the Team since Universal links are specific to the Team / Bundle ID configured in Mobile Services DEVELOPMENT_TEAM = ``` 6. Create your MDK client either using MDK SDK by following the step 4 from [Build Your Mobile Development Kit Client Using MDK SDK](https://developers.sap.com/tutorials/cp-mobile-dev-kit-build-client.html) tutorial OR using SAP Cloud Build Service by following [Build Your mobile development kit Client Using Cloud Build Service](https://developers.sap.com/tutorials/cp-mobile-dev-kit-cbs-client.html) tutorial. ### Run the MDK Client >Make sure you are choosing the right device platform tab above. [OPTION BEGIN [Android]] 1. In this step, you will run your branded MDK client on an Android emulator. Before trying to launch the client on Android emulator, make sure that you have already configured a virtual device (Android Studio>Virtual Device Manager). Otherwise, you may get an error like No emulator image available for device identifier. In terminal or command line window, navigate to the app name folder **`DemoSampleApp`** (in `MDClient_SDK` path) and use `tns run android --emulator` command to run the MDK client on the Android emulator. ![Android Emulator Run Command Terminal](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.1.png) >To run the MDK client on Android device, first attach your device to your machine. Then run `tns device android` command to print a list of attached devices. Copy the **Device Identifier** value for your device. ![Android Device List With Identifier](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.2.png) Make sure **Developer option** and **USB debugging** option is enabled in android device. Then run `tns run android --device ` command to launch the MDK client on your Android device. ![MDK Client Running On Android Device](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.3.png) Once, above command gets successfully executed, you will see new MDK client up and running in Android simulator. 2. Tap **Agree** on `End User License Agreement`. ![End User License Agreement Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.4.png) 3. In Welcome screen, tap **Start** to connect MDK client to SAP Business Technology Platform (BTP). ![Welcome Screen Start Button](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.5.png) 4. Enter your BTP E-Mail, ID or Login Name to continue. ![BTP Login Name Entry Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.6.png) 5. Enter your password to login to SAP Business Technology Platform (BTP). If you see an Universal ID screen, enter your Universal ID password. ![BTP Password Entry Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.7.png) 6. Choose a passcode with at least 8 characters for unlocking the app and tap **Next**. ![App Passcode Setup Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.8.png) 7. Confirm the passcode and tap **Done**. ![Passcode Confirmation Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.9.png) 8. You have the option to enable Biometric Authentication for faster access to app data. Provide your biometric information. ![Biometric Authentication Setup Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.10.png) 9. Tap **Next**. If you want your MDK client to send you notifications, tap **Allow**, otherwise, tap **Don't allow**. ![Notification Permission Prompt Step 1](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.10.1.png) ![Notification Permission Prompt Step 2](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.10.2.png) 19. Tap **Now** to update the client with new MDK metadata. ![MDK Metadata Update Prompt](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.11.png) 10. After you accept app update, you will see `Customers` and `Products` buttons on the Main page. You can navigate to list-detail page. ![Main Page Customers And Products Buttons](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.12.png) [OPTION END] [OPTION BEGIN [iOS]] 1. In this step, you will run your branded MDK client on an iOS simulator. In terminal window, navigate to the app name folder **`DemoSampleApp`** (in `MDClient_SDK` path) and use `tns run ios --emulator` command to run the MDK client on the iOS simulator. ![iOS Simulator Run Command Terminal](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.13.png) >To run the MDK client on iOS device, first attach the device to your Mac. Then run `tns device ios` command to print a list of attached devices. Copy the **Device Identifier** value for your device. ![iOS Device List With Identifier](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.14.png) Then run `tns run ios --device ` command to launch the MDK client on your iOS device. ![MDK Client Running On iOS Device](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.15.png) >You can also Run the Project in Xcode. Open the project in Xcode with the command `open platforms/ios/.xcworkspace`, or open the workspace using the `File -> Open...` dialog in Xcode. Configure the application's code signing settings, then Run the project for the target device. Once, above command gets successfully executed, you will see new MDK client up and running in iOS simulator. 2. Tap **Agree** on `End User License Agreement`. ![End User License Agreement Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.16.png) 3. Tap **Start** to connect MDK client to SAP Business Technology Platform (BTP). ![Welcome Screen Start Button](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.17.png) 4. Enter your BTP E-Mail, ID or Login Name to continue. ![BTP Login Name Entry Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.18.png) 5. Enter your password to login to SAP Business Technology Platform (BTP). If you see an Universal ID screen, enter your Universal ID password. ![BTP Password Entry Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.19.png) 6. Choose a passcode with at least 8 characters for unlocking the app and tap **Next**. ![App Passcode Setup Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.20.png) 7. Confirm the passcode and tap **Done**. ![Passcode Confirmation Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.21.png) >Optionally, you can enable biometric authentication to get faster access to the app data. >![Biometric Authentication Option Screen](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.22.png) 8. Tap **Now** to update the client with new MDK metadata. ![MDK Metadata Update Prompt](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.23.png) 9. After you accept app update, you will see `Customers` and `Products` buttons on the Main page. You can navigate to list-detail page. ![Main Page Customers And Products Buttons](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-6.24.png) [OPTION END] ### Test the Deep Links >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. [OPTION BEGIN [Android]] 1. Download a zip file from [here](https://github.com/SAP-samples/cloud-mdk-tutorial-samples/raw/main/5-Brand-Your-Customized-App-with-mobile-development-kit-SDK/2-Implement-Deep-Linking-into-an-MDK-Application/index.html.zip) on your local machine and unzip it on your machine. 2. Open the `index.html` in a text editor and update the values for `` and ``. ![Index HTML Server URL And Product ID Edit](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.2.png) >**Server URL**: Open SAP Mobile Services UI, click **Mobile Applications** **→** **Native/MDK** **→** click `myapp.mdk.demo` app. Click the **APIs** tab. Copy the **Server** URL. >**Product ID**: In SAP Mobile Services UI, click the **APIs** tab **→** **Connectivity** **→** click on **Launch In Browser** icon for `com.sap.edm.sampleservice.v4` destination. >![Mobile Services Connectivity Launch In Browser Icon](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.3.png) >A new tab opens in the browser. Remove `?auth=uaa` and add `/Products` to view product list. Copy any `ProductId` and paste it in the `index.html`. >![Product List In Browser With ProductId](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.4.png) 3. Save the changes. The `index.html` should look like below. ![Updated Index HTML With Server And Product ID](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.5.png) 4. Drag & Drop the `index.html` to **Files** app on your Android emulator. ![Drag Drop Index HTML To Android Files App](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.6.png) >If you are running your client on your device, use Android File Transfer or any equivalent way to add the file in the device's file system. 5. Click on the file and open it in Chrome browser. Clicking on the * **Open Product Details via Application Link**: navigates to product details page via Android App Links * **Search for Product Mice via Application Link**: navigates to product list page, the list with Mice Category via Android App Links * **Open Product Details via URL Scheme**: navigates to product details page via your branded client's URL scheme * **Search for Product Mice via URL Scheme**: navigates to product list page, the list with Mice Category via your branded client's URL scheme ![Deep Link Navigation Demo In Chrome](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.7.gif) [OPTION END] [OPTION BEGIN [iOS]] 1. Download a zip file from [here](https://github.com/SAP-samples/cloud-mdk-tutorial-samples/raw/main/5-Brand-Your-Customized-App-with-mobile-development-kit-SDK/2-Implement-Deep-Linking-into-an-MDK-Application/index.html.zip) on your local machine and unzip it on your machine. 2. Open the `index.html` in a text editor and update values for `` and ``. ![Index HTML Server URL And Product ID Edit](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.2.png) >**Server URL**: Open SAP Mobile Services UI, click **Mobile Applications** **→** **Native/MDK** **→** click `myapp.mdk.demo` app. Click the **APIs** tab. Copy the **Server** URL. >**Product ID**: In SAP Mobile Services UI, click the **APIs** tab **→** **Connectivity** **→** click on **Launch In Browser** icon for `com.sap.edm.sampleservice.v4` destination. >![Mobile Services Connectivity Launch In Browser Icon](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.3.png) >A new tab opens in the browser. Remove `?auth=uaa` and add `/Products` to view product list. Copy any `ProductId` and paste it in the `index.html`. >![Product List In Browser With ProductId](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.4.png) 3. Save the changes. The `index.html` should look like below. ![Updated Index HTML With Server And Product ID](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.5.png) 4. Drag & Drop the `index.html` to **Files** app on your iOS emulator and save it. ![Drag Drop Index HTML To iOS Files App Step 1](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.8.png) ![Drag Drop Index HTML To iOS Files App Step 2](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.9.png) >If you are running your client on your device, either place the file via [Finder App → Files or use other ways to share](https://support.apple.com/en-us/HT210598). 5. File opens in a viewer, clicking on the * **Open Product Details via Application Link**: navigates to product details page via iOS Universal Links * **Search for Product Mice via Application Link**: navigates to product list page, the list with Mice Category via iOS Universal Links * **Open Product Details via URL Scheme**: navigates to product details page via your branded client's URL scheme * **Search for Product Mice via URL Scheme**: navigates to product list page, the list with Mice Category via your branded client's URL scheme ![Deep Link Navigation Demo In iOS Viewer](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-deeplink-intoapp/img-7.10.gif) [OPTION END] ---