Created on 25 October 2019
icon_unfollowing
Login to follow
deeplink-web

Deeplink Redirect Web

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded on 27 May 2020 by 
deeplink-web

Deeplink Redirect Web

Documentation
1.0.1

Component 'Deeplink Mobile' and 'Deeplink Web' are designed to use the power of mobile deeplinks, but overcome certain inherent issues like device detection. By implementing these components you provide the following functionality:

1) the sending user can create a link in your mobile app, shareable via e-mail, Whatsapp or other native device sharing options (by using Deeplink Mobile)

2) the receiving user can open the link on any device where: 

  • on mobile / tablet if the mobile app is installed, the mobile app will be opened on a specific page
  • on mobile / tablet if the app is not installed,
    - first, it will open the Android Playstore or iOS App store so a user can download the app,
    - but if not available, it will open a website / fallback URL
  • on desktop, always a website / fallback URL will be opened.

Everything under (2) is all handled by an OutSystems redirect screen using the RedirectBlock from Deeplink Web.


Example case

Let's assume, the following: 

- you have a mobile app, "HousingApp",  that shows users different house adds on a detail page. The 'HouseDetail' page has inputparameter HouseId. This is the only page in your mobile app, you want users to link to. 

- you have a web application with one module called 'HousingSite'  that hosts some web content for your mobile app (and can hold a redirect page created later in step 2)

- both, your mobile app and web application are hosted on 1 environment, for example xxx.outsystemscloud.com.
Also both Deeplink components are assumed to be installed on the same OutSystems environment.


Mobile app implementation - example step 1 - Deeplink Mobile

  1. Reference block or action from Deeplink Mobile in your mobile app HousingApp. You have two options to share a link to this page:
    - Use 'ShareBlock' (in the header) of the HouseDetail page to create a share-icon
    - Create a share button on HouseDetail page that links to client action ShareThisPage

  2. Assign a record to the Inputparameters with 'Name = HouseId' & 'Value = GetHouse.List.Current.HouseId' since we need this HouseId to open the receiving user the correct house.

    * All input parameters used in the link will be automatically encrypted and not visible to users. Encryption is done by CryptoAPI and uses a 'PrivateKeyPassword' site property in both Deeplink Mobile & Deeplink Web with the same value for encryption/decryption.

  3. Add an optional message to include to the receiving user like "Hey, I have seen this house in HousingApp that you might like."

  4. Set these two site properties of 'Deeplink Mobile' in ServiceCenter to:
    - RedirectWebModule:  HousingSite
    - RedirectWebPage: open
    a
  5. Be sure to generate a new app version and install this on your mobile app since Social sharing plugin will be added to your mobile app to using native device sharing options.

    This will result in the following shareable link created:  https://xxx.outsystemscloud.com/HousingSite/open.aspx?in={EncryptedParameters} .

Web application implementation - example step 2 - Deeplink Web

  1. Create a new screen in your web application 'HousingSite' called 'open'.
    - Make sure this screen holds no other blocks, no layout and is completely clean.
    - Give this screen input parameter non-mandatory 'in' of type 'Text'.
    - Set the screen roles to 'Anonymous' so all users will be able to access it.
    This screen will serve as a redirect page for the links created earlier.

  2. Reference the block 'RedirectBlock' from Deeplink Web and place this in the 'open' screen.

  3. Set the following input values of the RedirectBlock (if you only link to 1 app, you can choose to create site properties). All values should off course be set to the corresponding values of your mobile app:
    - AppIdentifier: com.outsystemscloud.xxx.HousingApp
    - AppModule: HousingApp
    - AppScreen: HouseDetail
    - in: in (the input parameter of the screen)

    The RedirectBlock will automatically create deeplinks to open your mobile app like:
    com.outsystemscloud.xxx.housingapp://HousingApp/HouseDetail/HouseId=<123>
    See OutSystems documentation on deeplinks here.

  4. Set the following input values of the RedirectBlock (if you only link to 1 app, you can choose to create site properties). ll values should off course be set to the corresponding values of your mobile app:
    - AppStoreURL: URL of iOS App store of the app. Format: https://itunes.apple.com/<countryid>/app/<appname>/<idxxx>
    - PlayStoreURL: Full https URL of Android Play store to navigate to if app is not installed. Format: https://play.google.com/store/apps/details?id=<appidentifier>
    - FallbackURL: Full https URL to open for desktop browsers (or if app is not installed)

Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
See all 1 dependencies