The Argyle MVP

Yet another Teams blog but this one by Masters & MVP's

Development Featured Microsoft Teams

Deep Links in Teams + Adaptive Cards

Microsoft has some details around how Deep Links works in Microsoft Teams but as you read the documentation you will discover very quickly that although information is provided, but it becomes really apparent that the website is missing details of how it works in the real world.

For this blog post, I thought it would be super useful to have a realistic example and see how it works. In this example we want to do the following:

  • Send an Adaptive Card to Microsoft Teams
  • That Adaptive Card has a button to “Read More”
  • When clicking the button, it sends you to a Custom Teams App

For this example, we are going to use a Teams SMS Application. As inbound SMS Messages are received, we send an adaptive card to let the customer know that a new message was just recieved. Inside of that adaptive card, we will have a button to the Teams SMS Application.

The first step is we need to get the Entity ID from the Teams Appliation. To get that information:

  • Go to https://dev.teams.microsoft.com/ and login as a Teams Admin Member.
  • Select the Application from the List.
  • Go to Basic Information and record the Application ID of your app
  • Go to App Features under Configure.
  • Go to the Personal App and click Edit for the Personal App. In this case, we need to choose which tab we want go to by default. In my case, we have four tabs.
  • Click on Edit on the line item and get the Entity ID for that tab. Save and note it.

Now that we have the entity ID, next we need to create the adaptive card. Here is an adaptive card example.

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "New SMS Message"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "Image",
              "style": "Person",
              "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
              "size": "Small"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "weight": "Bolder",
              "text": "@{triggerBody()?['From']}",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "spacing": "None",
              "text": "Created @{formatDateTime(utcNow(), 'ddd MMMM dd h:mm tt')}",
              "isSubtle": true,
              "wrap": true
            }
          ],
          "width": "stretch"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "@{triggerBody()?['Preview']}",
      "wrap": true
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.OpenUrl",
          "title": "Open SMS App",
          "url": "https://teams.microsoft.com/l/entity/4eb7ec58-your-app-id/0e3dcc7d-your-entity-id?label=SMS"
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4"
}

The ActionSet is where all the interesting stuff is happening. And this is where the Microsoft Docs start to get confusing. Here you can see three values we need:

  • App ID
  • Entity ID
  • Label

The label is the exact name you have listed in the App Features. So my my case, it is SMS. Once we have all of that setup then we can look at the final result. When a new message is received, we get our inbound adaptive card from our bot.

And it launches us directly into the SMS App.

LEAVE A RESPONSE

Your email address will not be published. Required fields are marked *

Richard is an Office Apps & Services MVP (Teams / Skype) who lives in Minneapolis, MN. Microsoft Certified Solutions Master (MCSM) and MCSM Instructor - when those were a thing long ago. When not writing code, breaking teams - debate coach and avid golfer.