{"id":6269,"date":"2021-04-27T07:21:34","date_gmt":"2021-04-27T15:21:34","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6269"},"modified":"2021-04-27T07:21:34","modified_gmt":"2021-04-27T15:21:34","slug":"microsoft-graph-mailbag-create-engaging-apps-with-the-microsoft-teams-activity-feed-api","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-mailbag-create-engaging-apps-with-the-microsoft-teams-activity-feed-api\/","title":{"rendered":"Microsoft Graph Mailbag \u2013  Create engaging apps with the Microsoft Teams Activity Feed API"},"content":{"rendered":"<p>In today\u2019s Microsoft Graph Mailbag post, we cover the newly <a href=\"https:\/\/developer.microsoft.com\/graph\/blogs\/enhance-app-engagement-with-the-microsoft-teams-activity-feed-api\/\">released Microsoft Teams Activity Feed API<\/a> and how it can engage your workforce!<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-6274\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image0-1-1024x524.jpg\" alt=\"\" width=\"400\" height=\"205\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image0-1-1024x524.jpg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image0-1-300x154.jpg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image0-1-768x393.jpg 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image0-1.jpg 1488w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>Please be sure to follow this blog series using\u00a0<a href=\"https:\/\/aka.ms\/MSGraphMailbag\">https:\/\/aka.ms\/MSGraphMailbag<\/a>\u00a0or with RSS using\u00a0<a href=\"https:\/\/developer.microsoft.com\/graph\/blogs\/feed\/?tag=MSGraphMailbag\">https:\/\/developer.microsoft.com\/graph\/blogs\/feed\/?tag=MSGraphMailbag<\/a>.<\/p>\n<h4>Introduction<\/h4>\n<p>Microsoft Teams has supported activity feed notifications since its inception.\u00a0 Activity feed notifications are a great tool to understand what you have missed or to find who is mentioning you in channels or teams you are a part of. Now that users are familiar with this capability and know what to expect when they click on a notification, wouldn\u2019t it be great if your custom Teams application could leverage the same behaviors? It\u2019s now possible using the Microsoft Teams Activity Feed API!<\/p>\n<h4>It all starts with a Microsoft Teams app<\/h4>\n<p>To start leveraging the Activity Feed API, you will need a Microsoft Teams app. You won\u2019t be able to send notifications to users and groups without having a Teams app with some specific settings turned on in your manifest.json.<\/p>\n<p>Your manifest needs to hold two important areas that will make your app \u201cnotification aware\u201d and will allow your code to add notifications to users and groups. First, you need to ensure you are running version 1.8 of the Teams manifest. Next, you need to ensure the webApplicationInfo represents the Azure Active Directory application ID you are using to send notifications. Finally, you must identify the types of activities you want to send to Teams. You won\u2019t be able to send a notification that doesn\u2019t match the activities registered in the Teams manifest.<\/p>\n<pre class=\"\">{\n \u00a0\"$schema\":\u00a0\"https:\/\/developer.microsoft.com\/en-us\/json-schemas\/teams\/v1.8\/MicrosoftTeams.schema.json\",\n \u00a0\"manifestVersion\":\u00a0\"1.8\",\n \u00a0\/\/... Shortened for brevity\n \u00a0\"webApplicationInfo\":\u00a0{\n \u00a0\u00a0\u00a0\"id\":\u00a0\"b4b9c71b-3303-4973-bc84-bfccec84ed89\",\n \u00a0\u00a0\u00a0\"resource\":\u00a0\"https:\/\/localhost:3000\"\n \u00a0},\n \u00a0\"activities\":\u00a0{\n \u00a0\u00a0\u00a0\"activityTypes\":\u00a0[\n \u00a0\u00a0\u00a0\u00a0\u00a0{\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\":\u00a0\"sendKudosToUser\",\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"description\":\u00a0\"Sending\u00a0Kudos\u00a0to\u00a0a\u00a0user\",\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"templateText\":\u00a0\"{actor}\u00a0sent\u00a0you\u00a0a\u00a0Kudos!\"\n \u00a0\u00a0\u00a0\u00a0\u00a0}\n \u00a0\u00a0\u00a0]\n \u00a0}\n}<\/pre>\n<p>It is very important to ensure the webApplicationInfo is the same ID as your Azure AD application. \u00a0If not, you will receive a response similar to the following:<\/p>\n<pre class=\"\">{\n \u00a0\"error\":\u00a0{\n \u00a0\u00a0\u00a0\"code\":\u00a0\"Forbidden\",\n \u00a0\u00a0\u00a0\"message\":\u00a0\"Application\u00a0with\u00a0AAD\u00a0App\u00a0Id\u00a0'749adfd1-5168-42e5-aead-4be32b993892'\u00a0is\u00a0not\u00a0authorized\u00a0to\u00a0generate\u00a0notifications\u00a0about\u00a0'https:\/\/graph.microsoft.com\/v1.0\/chats\/19:44bb18e092d841beb4b847f27f2ddba6@thread.v2'\u00a0to\u00a0the\u00a0recipient.\",\n \u00a0\u00a0\u00a0\"innerError\":\u00a0{\n \u00a0\u00a0\u00a0\u00a0\u00a0\"date\":\u00a0\"2021-04-26T13:18:21\",\n \u00a0\u00a0\u00a0\u00a0\u00a0\"request-id\":\u00a0\"d21ed58f-5e0f-46e1-ab5d-408c42aa562b\",\n \u00a0\u00a0\u00a0\u00a0\u00a0\"client-request-id\":\u00a0\"d21ed58f-5e0f-46e1-ab5d-408c42aa562b\"\n \u00a0\u00a0\u00a0}\n \u00a0}\n}<\/pre>\n<h4>Getting the right permissions<\/h4>\n<p>Before sending any notification to a user, it is important to ensure your application has the right permissions (delegated or application) consented!<\/p>\n<ul>\n<li>Read.All : Read all app catalogs (Optional, only used for generic notifications)<\/li>\n<li>Send : Send a teamwork activity as the user<\/li>\n<\/ul>\n<h4>Notifying users in a chat<\/h4>\n<p>There are three contexts in which you might want to notify a user. The first one might be if you want to <a href=\"https:\/\/docs.microsoft.com\/graph\/api\/chat-sendactivitynotification\">send a notification to a user in a chat<\/a>. This would be a perfect scenario for bots to bring attention to specific areas of a chat or allow more engagement in the discussion. When users receive the notification, they will be redirected to the underlying chat thread.<\/p>\n<p>To achieve this, you need to identify the chatId you are looking for and POST an individual notification to each user of the chat by looping through the chat participants or by sending a <a href=\"https:\/\/docs.microsoft.com\/graph\/json-batching\">JSON batch request<\/a> to Microsoft Graph.<\/p>\n<pre class=\"\">POST\u00a0https:\/\/graph.microsoft.com\/v1.0\/chats\/{chatId}\/sendActivityNotification\nContent-Type: application\/json\n\n{\n \u00a0\"topic\":\u00a0{\n \u00a0\u00a0\u00a0\"source\":\u00a0\"entityUrl\",\n \u00a0\u00a0\u00a0\"value\":\u00a0\"https:\/\/graph.microsoft.com\/v1.0\/chats\/{chatId}\"\n \u00a0},\n \u00a0\"activityType\":\u00a0\"sendKudosToUser\",\n \u00a0\"previewText\":\u00a0{\n \u00a0\u00a0\u00a0\"content\":\u00a0\"Thanks for your help on this project!\"\n \u00a0},\n \u00a0\"recipient\":\u00a0{\n \u00a0\u00a0\u00a0\"@odata.type\":\u00a0\"microsoft.graph.aadUserNotificationRecipient\",\n \u00a0\u00a0\u00a0\"userId\":\u00a0\"569363e2-4e49-4661-87f2-16f245c5d66a\"\n \u00a0}\n}<\/pre>\n<p>The result is a brand new notification that brings the user back to the chat:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-6270\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image2.jpg\" alt=\"\" width=\"442\" height=\"90\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image2.jpg 442w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image2-300x61.jpg 300w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/p>\n<h4>Notifying users in a team<\/h4>\n<p>The second context where you might want to <a href=\"https:\/\/docs.microsoft.com\/graph\/api\/team-sendactivitynotification\">notify a user is within a team<\/a>. A great scenario is to highlight when a file is updated and to notify the owner of this file in the corresponding team.\u00a0 Another scenario would be to notify users to send thank you notes on the great work they have been doing with the use of bots or messaging extensions.<\/p>\n<p>To achieve this, you need the teamId where you want to user to navigate after clicking on the notification.<\/p>\n<pre class=\"\">POST\u00a0https:\/\/graph.microsoft.com\/v1.0\/teams\/{teamId}\/sendActivityNotification\nContent-Type: application\/json\n\n{\n \u00a0\"topic\":\u00a0{\n \u00a0\u00a0\u00a0\"source\":\u00a0\"entityUrl\",\n \u00a0\u00a0\u00a0\"value\":\u00a0\"https:\/\/graph.microsoft.com\/v1.0\/teams\/{teamId}\"\n \u00a0},\n \u00a0\"activityType\":\u00a0\"sendKudosToUser\",\n \u00a0\"previewText\":\u00a0{\n \u00a0\u00a0\u00a0\"content\":\u00a0\"Thanks for your help on this project!\"\n \u00a0},\n \u00a0\"recipient\":\u00a0{\n \u00a0\u00a0\u00a0\"@odata.type\":\u00a0\"microsoft.graph.aadUserNotificationRecipient\",\n \u00a0\u00a0\u00a0\"userId\":\u00a0\"569363e2-4e49-4661-87f2-16f245c5d66a\"\n \u00a0}\n}<\/pre>\n<p>The result is a brand new notification that highlights the team where this is triggered and when clicked, bring the user back to the team:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-6271\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image3.jpg\" alt=\"\" width=\"445\" height=\"92\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image3.jpg 445w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/image3-300x62.jpg 300w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/p>\n<h4>Notifying a user with a custom entity<\/h4>\n<p>The third context is probably the most powerful as it integrates with all custom applications built in Microsoft Teams! You can notify and offer a deep link directly in your application or to an external URL, making this capability very engaging. And, it can integrate with any ISV or line of business (LOB) apps.<\/p>\n<p>To send the right notification, use the following example on the \/users endpoint:<\/p>\n<pre class=\"\">POST\u00a0https:\/\/graph.microsoft.com\/v1.0\/users\/{userId}\/teamwork\/sendActivityNotification\nContent-Type: application\/json\n\n{\n\n\u00a0\u00a0\"topic\":\u00a0{\n \u00a0\u00a0\u00a0\"source\":\u00a0\"text\",\n \u00a0\u00a0\u00a0\"value\":\u00a0\"Great\u00a0collaboration\",\n \u00a0\u00a0\u00a0\"webUrl\":\u00a0\"https:\/\/teams.microsoft.com\/l\/entity\/{appId}\/{tabName}\"\n \u00a0},\n \u00a0\"activityType\":\u00a0\"sendKudosToUser\",\n \u00a0\"previewText\":\u00a0{\n \u00a0\u00a0\u00a0\"content\":\u00a0\"Thanks\u00a0for\u00a0your\u00a0help\u00a0on\u00a0this\u00a0project!\"\n \u00a0}\n}<\/pre>\n<p>Note that you will need to get the Teams application ID (which is not the one from the manifest) and can be achieved by using the following call:<\/p>\n<pre class=\"\">GET\u00a0https:\/\/graph.microsoft.com\/v1.0\/appCatalogs\/teamsApps?$filter=externalId\u00a0eq\u00a0'{manifestId}'<\/pre>\n<p>See the following walkthrough of a custom-built solution leveraging this approach. You can find the solution on <a href=\"https:\/\/github.com\/sebastienlevert\/teams-dev-samples\/tree\/sebastienlevert\/tab-activity-feed\/samples\/tab-activity-feed\">Github<\/a> to start playing with it.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-6272\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/TeamsActivityFeed.gif\" alt=\"\" width=\"1918\" height=\"1037\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4>Closing note<\/h4>\n<p>This new capability is exciting and creates new ways to engage (and re-engage) with your users, all thanks to Microsoft Graph! For more information on the Activity Feed and how to use the API, check out the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/teams-send-activityfeednotifications\">documentation<\/a>.<\/p>\n<p>Today\u2019s post was written by <a href=\"https:\/\/twitter.com\/sebastienlevert\">S\u00e9bastien Levert<\/a>, Senior Program Manager on the Microsoft Graph team.\nJoin us for our next post May 11, 2021.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use the Activity Feed\u00a0API\u00a0in Microsoft Graph to allow your apps to provide richer experiences and better engage users by keeping them up to date.<\/p>\n","protected":false},"author":69075,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,128],"tags":[17],"class_list":["post-6269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-microsoft-teams","tag-msgraphmailbag"],"acf":[],"blog_post_summary":"<p>Learn how to use the Activity Feed\u00a0API\u00a0in Microsoft Graph to allow your apps to provide richer experiences and better engage users by keeping them up to date.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69075"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=6269"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6269\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=6269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=6269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=6269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}