Use Adaptive Cards in Microsoft Teams apps and conversations

Microsoft Teams enables developers to create custom apps that include capabilities including bots, task modules, and messaging extensions. While each of these components supports text-based messaging or HTML rendering, developers can use Adaptive Cards to create experiences that when rendered, will look like the native Microsoft Teams client experience.

In this unit, you’ll learn how to use Adaptive Cards in task modules, bots, and messaging extensions in custom Microsoft Teams apps.

Adaptive Cards in Microsoft Teams

Developers building custom apps for Microsoft Teams can use Adaptive Cards in various extensibility points. Some of these options include the following:

  • Task modules: Dialogs in Microsoft Teams are implemented as task modules. A task module can be either a web page loaded within an Iframe, or an Adaptive Card.
  • Bots: Conversational bots built using the Microsoft Bot Framework can reply to messages or sent proactive messages as a text-based message or as an Adaptive Card.
  • Messaging extensions: Messaging extensions can pre-fill or add content to a new or existing message. This content can be in the format of a text-based message or an Adaptive Card.

Design Adaptive Cards with the Developer Portal

Microsoft Teams offers developers the Developer Portal:

Screenshot of App Studio.

Developers can use the Card editor tab in the Developer Portal to design Adaptive Cards used in Microsoft Teams. This isn’t a replacement to the Adaptive Card designer hosted on the Adaptive Card site, but rather it’s another Adaptive Card authoring option.

Use Adaptive Cards in Microsoft Teams task modules

Task modules are dialogs in Microsoft Teams. Developers can implement task modules in one of two ways:

  • IFramed web page: A task module can point to a URL of an HTML page that is rendered in an Iframe in the task module popup window.
  • Adaptive Card: A task module can render an Adaptive Card in the contents of the task module popup window.
Screenshot of the Adaptive Card rendered in a task module.

Using Adaptive Cards in task modules follows nearly all the same requirements as a HTML-based task module.

One difference is how you create the task module. Task modules are invoked by passing a populated instance of the taskInfo object in the microsoftTeams.tasks.startTask() method. For an HTML-based task module, you set the address of the web page loaded in the task module in the taskInfo.url property.

When using an Adaptive Card, you assign the JSON of the card to the taskInfo.card property.

Another difference with Adaptive Cards is in the parameter of the callback method defined when invoking the task module with the startTask() method. The values of all input control defined in the Adaptive Card are returned in a single object, result, in the callback method.

https://lernix.com.my/oracle-linux-administration-training-courses-malaysia

Comments

Leave a Reply

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