Microsoft 365 Community Microsoft Graph, 27 May 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Gain your users attention with the Microsoft Teams Activity Feed API

Description

In this 15-minute developer-focused demo, Thomy Gölles steps shows viewers a way to send activity notifications from both apps that live outside Teams and others (like static tabs) inside Teams, to Teams tabs, bots, chat. Using activity feed notification APIs in Microsoft Graph, the presenter reviews types of metadata on messages, requirements for sending defined activity type notifications, app registration, consent, manifest, notifications settings in Teams, etc. He steps through the code for simple and advanced notifications. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on May 27, 2021.

Demo Presenter: Thomas Gölles (Solvion) | @thomyg

Supporting materials:
• Documentation - Send activity feed notifications to users in Microsoft Teams | https://docs.microsoft.com/en-us/graph/teams-send-activityfeednotifications
• Video - Microsoft Teams – Use the teamwork Microsoft Graph endpoint | https://www.youtube.com/watch?v=G33bN7cl2QU&t=3536s
• Documentation - Create deep links | https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello, everyone uh tommy girl is my name uh tommy or thomas depends on what you prefer. um You can reach me at this url, I'm an mvp for office development and I'm working as a team lead for modern workplace solutions for a company in austria called solvian. So stefan and I know each other- and we will see the reference later on in the presentation as well. Today's topic, microsoft teams, activity feed api. Let's have a look at the structure of an item in the activity feed.

A

You see here next to me how an application or your application is represented in the activity feed inside of microsoft teams and yeah. I was a little bit surprised how many metadata or description you can create around such a short pixel area and the interesting part is we have an actor, that's basically a person or an application, because you can use the activity feed api as a person or as an application. We will see it later on. We will use an application for that, so there will be the icon of our team's manifest file there.

A

That is the actor of the action. Then you have a smaller icon that represents. We all know that from someone clicked on like someone clicked on an emoji or or mentioned you, then you have this icons there and then there's actor plus a reason, so a short text that is used to tell you a little bit. What's behind the notification, a timestamp, of course, a location.

A

We will see that that's basically and a hint of where this notification is coming from is it from a team? Is it from a channel, in our case our own application? So we will show you how you can basically just write a string there to have your own location in there and then text preview for more details, and probably I think it's 20 minutes, explanation of all in details check out this youtube link and recalled it.

A

I think, a couple of weeks ago, a great session explaining that all in details, so I will go a little bit more in the use case scenario, so just quickly to have the same level what we have to do for the team's activity feed api. We need to fulfill free requirements.

A

There needs to be a microsoft teams, app that the user has to be, or the user needs, to install a microsoft teams app in order to receive notifications, that's very important, otherwise it would be possible to basically create yeah a spamming application might not be of interest for a smaller company, but if you have a client or if your own company is multi thousand users large, you don't want your developers to be able to just create an application that can bug and notify everyone without the need of an admin to do something.

A

So with the installment, of course, an administrator can roll out certain apps. So you have that somehow automatic as well. That's the one thing, then: you need to have an azure active directory application associated inside your team's manifest that has the correct permissions to call the graph endpoint, and we will see it later on in the manifest of your team's definition.

A

There are certain activities defined and you can have multiple activities definitions, but they all have a name, and if you call a notification api you must you need to make sure that you have the right name for the right application.

A

So, for example, if your application a has three or four activities, you really need to call those by name again. Otherwise the system will tell you, okay, you called me, but you didn't, provide the correct activity type, so I cannot notify the end user. What does that look like here? You see the example we're going to use later on in my microsoft teams app manifest.

A

We have the reference to the application in active directory on top here. So this is the id and the resource is basically just a reference to my url that we will use, and then we have those two activity types and they created two different specific one, simple one and an advanced one, the simple one we will see later on.

A

Just it's more like a demo case for me to see. Okay, if I write something here, where does it pop out in teams? So we will see description, template text and all those things popping up in teams to really make sure we understand what fields are used in what context and then down here you see the definition of an actor, so there are templating available that we can say.

A

Okay, an actor needs a stock item and we can actually create a graph key value pair and add that to our request that we send to the graph with a stock item. For example, then the api takes the manifest fills it with the values. You send open your request and the user gets notified with that sentence, but with those two strings replaced with actual values.

A

Also, the actor is a system value. So you don't need to care about that. But stock item is something that I created. So I need to provide a value for that here in the active directory again the web application with the id I have in my azure tenant. You see same id, an application registration there and I consented to those permissions so that the graph allows calls from my application id and I consented because this is just my demo.

A

Tenant for the whole organization- and I think it's read and sent you for sending you just- would need to have the center permission here, but you need to configure those in order to be able to really send that out again those two types. What does this look like? The simple one of those in the demo is just okay template text manifest you see here, that's the template text and the value and the content we will add by code, because we will use c-sharp later on to really make this pop and see. Okay.

A

What is what and the more advanced one is really okay with a proper text again coming from code and then here values for location and what actually needs to be done.

A

I was looking for the description part quite some time and then I realized. Okay. I have notification settings in teams, of course, as well. If you install an application manifest that includes those activity, types for notifications, you will see here and that's the the case. We will call it uh because we have a demo around pizza, so it's called giuseppe.

A

We have here configuration and in there again is my description, so that's where this field pops out, but let's have a look in the demo, so I'm gonna, close powerpoint and just for simplicity.

A

We have here an application prepared. The use case basically, is that we are a pizza restaurant. We call it pizza factory and the idea is that, okay, you can go in there and see all the orders that are there. I can create some demo orders just for for the fun of it, so multiple different types of pizza and if I would go through the whole demo, it's more like okay, it's something like a supply chain.

A

Basically, we have something that gets created, the pizza that needs some items, and sooner or later we will run out of certain ingredients. So if a dashboard here we see okay, we have yeah whatever. Whatever item you, you choose, but I think in our case it's always pineapple that is gonna, be very low, so the system will start and say: okay, I need more pineapples in order to serve our customers.

A

This is an application that lives outside of teams. But the idea is: how can we integrate the notification and other parts of the application inside of teams? For that, let me jump over to my team's client. Of course we have the option to create static tabs. So again, that's just a few in the application and we have a chat here and we also have a bob that you can use to call or order pizza or a bob. That also is capable to say, okay doing basically the same thing we'll do shortly.

A

In with a notification, the bot says a proactive message here: okay, we need to restock, but how can we make it sure that we get something in here? For that, let me start the local version of the application.

A

And I just added a new page here and there are two buttons: a simple and advanced activity, and if I arrange the windows now right, let's do it that way. Now: click on simple activity: you will see. Okay, I got a notification down here and in my activity feed and it's saying, okay, you see template text from the manifest value code, content and code. If I click on advanced activity graph call again and then it says: okay, giuseppe needs pineapples to keep the kitchen running. You see.

A

The application actually also has something inside the uh.net world, where some information pops out and says. Okay, we need pineapples, it's just like okay, it's not in the logic, but just by click of a button again graph call- and I will create the element here. If I click here yep now, it's there, it will open up my static teams, application with a configured tab.

A

Allowing me to see. Okay pineapple is really on zero. So we need to do something about that. How is that implemented? This notify page? First of all, it's just from my case. It's a blaze application, but you can create that in in the way you want place application short reference, I'm already using stefan's work around h2o outside the context. He first thought about it, so I'm using it also in my blazer applications, already two simple buttons, simple and advanced.

A

Of course, I need to create a graph client, in my case as a blaze, application living on the server side. So I'm fine with having a client id in the client secret, because it's secure it's on the server, it's not in the client, I'm creating the graph client in my initialized method and then it's in the simple case, I'm creating topic a body and I call microsoft graph with for a certain user and I hand over to the send activity notification method, the topic my activity name, the null value, basically is an integer value.

A

If you have a chain of activities, my body and also null in a simple way, because for my simple notification, I don't have any special parameters for the advanced one down here. You see the difference, I'm creating template parameters and I hand over those template parameters. In my call with stock item, so if you have again a look at the manifest, you see here stock item and that's basically how those things come together. You need to create, uh or you need to create the request, the call with the parameters and the correct names.

A

So basically like a string parsing, you have a name and you have a value and the system will take care of that and create actor on its own and then uh fill out your brackets with whatever you choose from here. So that's an easy way to notify your customers or your users, and you can go even a little bit uh yeah more sophisticated because in our case now we are just linking to an uh to an url to our dashboard.

A

So it's the teams, url the entity, id of my teams, application or the app id of my team's application. My entity id of my static tab and then a fallback url in case teams cannot yeah make sense out of that strings and that it will fall back to my url. But you could also add their parameters.

A

So next thing would be to say: okay. I would also like to have my own parameters in there, so I would be able to not only call or notify the end user but also hand over an element or it's a context variable that then can be read by this page and acted upon.

A

That's a little bit trickier than just providing a new url parameter. You need to go the way that teams deep linking operates, so you would need to create an additional url parameter with a context value and you will get back that context value from the teams sdk. So it's not directly from the url. You would need to ask the javascript teams sdk for your static tab or for your tab for that parameter, and then you can act on inside of your application and with that I'm happy to hand over to chris.

B

Excellent awesome, tommy. Thank you fantastic demo. This is really cool, stuff love. The integration of staphon's h2o as well shows the community collaboration, which is which is awesome. I think you've officially and effectively helped the pizza industry today as well everyone's going to leave this session here today and order some pizza for breakfast lunch or dinner.