How to deep link into Teams from Power Apps

Introduction - what is deep linking?

Deep linking is the ability to take users to a specific section on a web page or to a specific in-app location. This makes for a better user experience as it prevents a few (or many) clicks that might be needed by the users to get to that specific location within the app. To give an example from web, if you click on this link, you are not only taken to the Microsoft Docs section on Power Apps formulas but you are taken to a specific function - the With function.

Use cases for deep linking

There can be several use cases for deep linking from within Power Apps. For the Employee ideas Dataverse for Teams sample app, when a new idea is submitted, an email with a deep link to that idea could be sent to team members. For Profile+ and Perspectives sample apps, I had to implemented two types of deep linking - creating a meeting and starting a chat with one or more people within the user's organization.

How to implement deep linking

Creating a meeting

There are several parameters that can be passed when deep linking into the scheduling dialog within Teams. The syntax is as follows (which can be used in the OnSelect of a button, as an example):

https://teams.microsoft.com/l/meeting/new?subject=&startTime=&endTime=&content=&attendees=<user1>,<user2>,<user3,...

The optional query parameters are:

• attendees: comma separated list of user IDs (userPrincipalName from the Office365Users connector)
• startTime: start time of the event
• endTime: end time of the event
• subject: meeting subject
• content: meeting details

Starting a chat

Just like with the scheduling dialog deep linking, there are several parameters that can be passed. The syntax is as follows:

https://teams.microsoft.com/l/chat/0/0?users=<user1>,<user2>,...&topicName=&message=

The query parameters are:

• users: the comma-separated list of user IDs representing the participants of the chat. The user who performs this action is included by default (userPrincipalName from the Office365Users connector)
• topicName: optional field for the chat's display name for a chat with 3 or more users. If a name isn't specified, the chat name is based on the list of the names of the participants
• message: optional field for the message that will be added to the compose box while the chat is in a draft state. The user can then edit this text before sending the message

A deep linking example

We will create the following simple app to illustrate deep linking:

• Add a gallery, a text box, and the Office365Users connector to the app
• Set the Items property of the gallery to:

  Office365Users.SearchUserV2({searchTerm: TextBox1.Value}).value

• Add a label inside the gallery and set its text property to

  ThisItem.DisplayName

• Add a button inside the gallery. Set its text property to "Start a chat" and set its OnSelect to

  Launch(
          "https://teams.microsoft.com/l/chat/0/0?users=" & ThisItem.Mail & "&topicName=&message=Hi!",
          {},
          LaunchTarget.New
      )

• Add another button inside the gallery. Set its text property to "Schedule a meeting" and set its OnSelect to

  Launch(
          "https://teams.microsoft.com/l/meeting/new?subject=New%20Meeting&attendees=" & ThisItem.Mail,
          {},
          LaunchTarget.New
      )

Clicking on the "Start a chat" button opens a chat window with "Hi!" as the message in the compose box. Similarly, clicking on the "Schedule a meeting" button opens up the scheduling dialog with the selected user and the current user both added to the event/meeting.

Pro tip

If you are logged into Teams using the Teams desktop app, you would have noticed that when you click on either of the two buttons, you are redirected to your browser and then once you click on "Launch it now", then you are redirected back to the Teams desktop app.

Here's how the experience is:

To improve this experience i.e. to prevent redirection to the browser, we will need to determine if the user is accessing Teams through a browser or through the Teams desktop / iOS / Android app. Add the following code to the App OnStart property

Set(
    gblIsHostClientWeb,
    Param("hostClientType") = "web"
)

Then change the OnSelect of the two buttons to following:

• Start a chat button

  If(
      gblIsHostClientWeb,
      Launch(
          "https://teams.microsoft.com/l/chat/0/0?users=" & ThisItem.Mail & "&topicName=&message=Hi!",
          {},
          LaunchTarget.New
      ),
      Launch(
          "msteams://teams.microsoft.com/l/chat/0/0?users=" & ThisItem.Mail & "&topicName=&message=Hi!",
          {},
          LaunchTarget.New
      )
  )

• Schedule a meeting button

  If(
      gblIsHostClientWeb,
      Launch(
          "https://teams.microsoft.com/l/meeting/new?subject=New%20Meeting&attendees=" & ThisItem.Mail,
          {},
          LaunchTarget.New
      ),
      Launch(
          "msteams://teams.microsoft.com/l/meeting/new?subject=New%20Meeting&attendees=" & ThisItem.Mail,
          {},
          LaunchTarget.New
      )
  )

The main thing is to check if the user is using a browser or not. If they are not using a browser to access Teams, using msteams: instead of https: makes the deep linking to go directly to the Teams app instead of getting redirected through the browser.

With this change, the experience is as follows:

To learn more about other types of Teams deep linking, click here.

Recent articles

1. How to create a Pinterest like gallery
2. A:Z 26 tips! Learn how to improve your Power Apps!
3. How to master Dataverse relationships in canvas apps!