# Microsoft Teams Integration
Microsoft Teams Integration

Index
1. What is Microsoft Teams?
2. Getting Started
1. Create a new Teams app
2. Connect your Teams app with YM bot
3. Create your app manifest
3. Authentication : Active Directory & Graph APIs
4. Adaptive cards in MS Teams
5. Advanced features
1. Messaging Extensions
2. Task Module
3. Group Conversations
6. UX design guidelines
7. More References

----------

Abstract: In this document I will walk you through some MS Team features for improving conversation experience and connecting users with Microsoft O365 Applications.

| Features | Page No. |
| -------------------------------------------- | -------- |
| Adaptive Cards | 1 - 3 |
| Azure AD Auth & Graph APIs | 4 - 5 |
| App Studio - Suggestions, Message Extensions | 5 - 11 |

Adaptive Cards:
Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way.

Designer: https://adaptivecards.io/designer/
Documentation: https://docs.microsoft.com/en-us/adaptive-cards/
Detailed functionality: https://adaptivecards.io/explorer/AdaptiveCard.html
Sending Adaptive Card using yellow messenger:

let CARD_PAYLOAD_FROM_DESIGNER = {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "sOME TEXT"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}

let card = {
"contentType": "application/vnd.microsoft.card.adaptive",
"content": CARD_PAYLOAD_FROM_DESIGNER
}
app.sendAdaptiveCard(card).then(() => {
resolve();
})

Sending Carousel Card:
let card = {
"contentType": "application/vnd.microsoft.card.adaptive",
"content": CARD_PAYLOAD_FROM_DESIGNER
}

let cardCarousal = [card,card,card] //array of cards
app.sendCards(cardCarousal).then(() => {
resolve();
})

Receiving Form Submission data from Adaptive Card:



app.log(app.data);
/*
---In Log---
{
   "message":"form-data",
   "value":{
       "action":"saveName",
       "namearea":"Adam"
   }
}
*/

# Azure AD Auth & Graph APIs
App Registration on Azure AD: Click here.
Connecting your bot to MS Teams : Click here.

How to set dynamic scopes in Login url:
let consent = "&prompt=consent"
let scopeMp = "People.Read User.ReadBasic.All Presence.Read"

{
"type": "Action.OpenUrl",
"title": "Login",
"url": app.azure.auth() + encodeURIComponent(scopeMp) + consent
}

Add / Remove permission and Grant Admin consent for App in Azure Portal > App Registration > API Permissions


For enabling multi tenant: Enable multi tenant in the Azure AD integration in Yellow messenger and enable multi tenant on the App registration > Authentication
Graph Apis:
Documentation: https://docs.microsoft.com/en-US/graph/api/overview?view=graph-rest-1.0
Explorer: https://developer.microsoft.com/en-us/graph/graph-explorer
Few APIs need Admin consent for their organisation via Azure Portal or at the time of Login itself.

Creating a Teams app using your bot service link (App Studio)
Add App Studio from App Store which allows you to create bot manifest, Command Suggestions, Message Extensions etc.


For creating a new App in App Studio click on the Create a new App and fill the basic details and click on the generate button for App ID.
Configure your bot using Client ID in the Bots Section, For Testing: Install bot using Test & Distribute Section.

Command Suggestions:


Step 1: Goto App Studio > Select your App > Bots > Setup your bot using Client ID and click on the Add button in the Commands section to add suggestion commands.


Step 2: Fill the new command fields > Click on Save. You would find Bot suggesting you the commands after reinstalling the app.


Message Extensions:
Documentation: https://docs.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions
Steps to integrate ME with Yellow Messenger:
Step 1: Goto App Studio > Select your App > Messaging extensions > Set up


Step 2: Configure your bot and change messaging endpoint to: https://app.yellowmessenger.com/integrations/sync/microsoft/extensions/<botID>


Step 3: Click on Add Button and choose method according to the requirement then fill out the details and parameters for your message extensions.
Action Type: Allows you to open a pop up and take multiple field values. (e.g: Add Task)
Query Type: Allows you to run a query in the search field itself.(e.g: Wikipedia Search)


Receiving responses in yellow messenger:
Query Type:
app.log(app.data)
//In logs----------
{
"commandType": "composeExtension/query",
"value": {
"commandID" : "findwikipedia",
"parameters" : [
{
"name": "searchquery",
"value":"Bumblebee"
}
]
}
}

//For initial run / empty query
app.data.value.parameters[0].name = "initialRun"

Action Type Submission:

app.log(app.data)
//In logs----------
{
"commandType": "composeExtension/submitAction",
"value": {
"commandID" : "addtask",
"data" : {
"taskname": "Some Task",
"taskduedate":"2020-09-10"
}
}
}
Responding to the Message Extensions:
let messageExt = {
"composeExtension": {
"type": "result",
"attachmentLayout": "list",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Some Details",
}
]
}
],
"version": "1.0"
},
"preview": {
"contentType": "application/vnd.microsoft.card.thumbnail",
"content": {
"title": "Preview Title",
"text": "Preview Text"
}
}
}
]
}
}

//Send reply directly to message extensions
app.sendAdaptiveCard(messageExt);
For multiple responses use Attachments as an Array.


After clicking on the preview user can view the Adaptive Card attached with the preview.