Microsoft 365 Community Microsoft Teams, 26 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Search based Messaging Extension for Microsoft Teams

Description

In this 18-minute Developer-focused demo, Rabia Williams steps through building a search-based messaging extension for Microsoft Teams using the Microsoft Teams Toolkit. Users type a term into the extension that calls an external system – GIPHY API, and with the information returned, a card is created that can be inserted into chat. Extension sample uses Microsoft Teams Toolkit, node.js, and bot. Extensions drive team engagement – find info in context, grab attention, and drive actions. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 26, 2020.

Demo Presenter: Rabia Williams (Microsoft) | @williamsrabia

Supporting materials:
• Blog - How to build your own search based GIPHY app with Microsoft Teams Toolkit | https://rabiawilliams.com/teams/search-msgext-giphy/
• Repo - Giphy Search Messaging Extension | https://github.com/pnp/teams-dev-samples/tree/master/samples/msgext-search-giphy
• PnP Samples - Microsoft Teams Development Samples | https://pnp.github.io/teams-dev-samples/
• Document - Create a messaging extension using App Studio | https://docs.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/how-to/create-messaging-extension
• Toolkit - Microsoft Teams Toolkit for Visual Studio Code | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension

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

I'm a pnp member, I'm a cloud developer advocate my name is rabia, so today we're going to discuss, building, search based messaging extension for microsoft teams. This is really based around this app that I've built a couple of weeks back. I guess which is there in the pnp repository, so you can go to ak dot. Ms slash teams, hyphen samples. Did I get that right visa, so you can find that there.

A

uh So I I created this sample, which is a messaging extension for finding gifts, um basically the what you have in your giphy uh extension in your inbuilt into your microsoft teams. So you might ask me why I have built something: that's already there. It's, because I wanted to learn the concept and I wanted to learn what search based uh extension was because these are all terms for us. They are new. um There is.

A

There are two types of messaging extensions and I was like what what is all this, like big words for me, um so to uh to kind of like understand the main concept I started off with the microsoft teams toolkit, um which is like a very base structure for creating samples or solutions.

A

So, let's uh jump in and see why we're using listening extension. This is probably the first question you should ask when you are building something for teams. So there are three points that I came down to three decision points that will make you create a messaging extension for your clients or for applications, definitely not clippy, but I just included because he's fun. The first one is finding the right information without switching the context.

A

So this is pretty um interesting, because finding information is a key thing, so you might be in a conversation within your team and you might be talking about things you have. You probably have to move away from your conversation to another system. Maybe there is a hr system or, let's just uh think, about a hypothetical, not hypothetical, maybe a medical institution having a conversational chat between their peers, and you want to find some information about your patients. They'll have to go into another system.

A

Log in get information, come back to the chat and then continue with their chat by the time you come back. You probably your teammates, have left for a coffee, or you know it's it's not as engaging as it is. So if you can right away bring out information in teams staying in the same conversation that will be really cool and that can be achieved with nesting extensions.

A

Another point is getting attention to your messages by using rich cards. So another thing that I might personally myself struggle is to look into teams chats or messages and to really grab that attention from any of the messages. um If it's like a one-liner or something I'm, there are chances that I might miss these messages and with microsoft, uh job that I just joined like in september. uh There's like heaps of messages once I wake up, it's like.

A

I cannot go through everything, so very good way to grab attention to your message is using messaging extensions like in a big card uh or a rich card. So that's another value, add for using messaging extension and the last one is getting your teammates to take action. So probably there have been many other demos you've seen where missing extension have cards with buttons, where you can go ahead and do actions, but in this sample.

A

Yes, you would not see that because it's just gonna give you a gif, but this is one another reason why I would build a messaging extension for a client or um you know I would ask my client, for you know suggesting them hey. Why don't you bring your system into teams, integrate into teams and then use messaging extension to bring out this information, get engagement from your team, etc.

A

So these are the three main points that I personally think is why you should go for missing extensions, so yeah, let's get started, and this is basically how my application looks like it's nothing new. I don't know why chris pratt is so excited about this, but probably the simplicity of it or maybe the code is you know you would see it and then you would probably understand how simple it is to get started with a messaging extension.

A

So without further ado, what I'm gonna go ahead and demo when I say demo, I probably would be talking more or walking you through the code, so you get to understand how it all ties up together. So I'm just gonna go ahead and open up my visual studio code.

A

This is the solution that you have in that repository the sample that I've shared this was created using the microsoft teams, toolkit I'll just walk through on a new window, to show you how you can create a new solution like what I have there using the teams toolkit. So you have this extension, which basically you can go ahead and install for your visual studio code editor or your visual studio. Once you have installed it, you will have this icon here, so you can go ahead and create new teams app.

A

What then it does is it asks me if to login to my tenant, so I would just allow that, basically, it will go to my tenant, whichever I was browsing or this tenant is basically my dev tenant. So it's all good. I can sign in so the app basically registers itself there and the manifest file is already in the cloud for you and also the project is now ready to be folded.

A

So I can close this now and get back to my visual studio code, and you will see this form this form where you can go ahead and start your wizard here. You have three options: tabs bots and messaging extensions. Today we are focusing on messaging extension, so you can go ahead and click that it's really cool or and easy. If you are a new developer, uh you are new to m365 and you're. You know absolutely new to teams, so you can go ahead and click on next, then you can give your application name.

A

You can choose whether it's an action based or a search based one, and there are two different types of messaging extension. One is triggered by a query like a search and the other one triggers action based on an action of a user. So there are these tiny changes in terms of what function it calls or in terms of how the manifest file looks like based on whether it's action or search our point of interest is search today.

A

So you can click on search, and another thing here they ask for is whether to create a bot, so every messaging extension is actually it has activities. So it requires you to create a bot uh channel registration to help you with the activities sending back and forth the messages. So that's what helps teams to understand and to communicate back further. So for that you need a bot and you can either create a bot or you can go ahead and use an existing bot if you have one registered.

A

So that is another option, and the final option is whether you want to include link unfurling to your messaging extension. This, basically, is think about it like if you want a particular domain link when you put that in in the chat. You know how sometimes again, coming back to the same point that you want user engagement in your conversation, so anything that grabs attention is good.

A

So if you want to send just a link in the chat- and you don't want that link to be just a very vanilla, plain link that people normally forget to look at and if you want to bring out some extra information or some action on top of it, you can use link and furling, which basically is it will check the domain and it will then kick off an event or a function that will bring back a nice looking card based on that domain.

A

So it's it's up to you whether you want to use it or not. So these are the the options you get when you create a solution from scratch using the teams toolkit which, which is what I did for this epi app that I did so once you're here. um So once you're done finishing your wizard, which is the last screen you saw, you will be getting something like this, so it's just a very, very bare bones kind of a project you can see here.

A

You have just the main in the main entry file and you have the bot activity handler, which is where all the juice happens. So you also can notice that, in the new versions of teams toolkit, you don't have the manifest file, but I can show you where you can go ahead and download it and have a look, because that's exactly what I've done here. So I can take you folks, through a few of the things when I'm discussing.

A

So this is the project. Like I said, entry point is index.js like visa mentioned before this is a javascript project in teams toolkit, you have javascript instead of typescript. So if you want a more advanced scenarios for teams, application definitely go for the yeoman generator. It has typescript. It has many other scaffolding options, so it's pretty cool stuff, so yeah, it's up to your comfort level when you want to start off.

A

This probably is best if you want advanced scenarios and look into yeoman, so this one uh here, it will give you the adapter for connecting to the bot and then also listening to the messages kicking off from this url and then running your bot activity handler that's what's happening here and in the activity handler is what I'm really interested to show. Probably um so you have these two functions, which basically is something I can show you using the existing gif extension that microsoft have so once you click on. So this is an extension.

A

So this is one of those moments where I was like. Oh my, I have been using a messaging extension, all my life and I did not know not all my life but all my life. I use teams, uh but I did not know that was a messaging extension, an inbuilt one. So that's that was when I started thinking like okay.

A

These things are simplified when you understand that it is in your daily life, like adaptive, cards are in your daily life when you are looking at windows timeline or if you are approving something from your outlook, it is actually an adaptive card and you do not know it was an adaptive card. So that's exactly the message I wanted to send out with this kifi app. So this is not my app. This is the built-in microsoft app. So it's it works exactly the same way.

A

So what you see here is a search-based messaging extension, and this is where you query, and this is where the action happens when you type something so this function. So whatever kicks off this when you type something is what we see in this extension query function. So this once you type, this is what happens this kicks off and it will go ahead and fetch the data from the api. In our case, it is the gifi search api.

A

um I've got the gifi api key as well, and then it will bring back the response so think about in your scenario. Maybe a client has like I said in that medical institution. The client has another system which has all the patient records, so this api could potentially be an api that gets all the patient's information.

A

So this is how I co-relate things I simplify it and then I would correlate with this. A user scenario. uh Sorry a client scenario, and so this is basically what happens here. I run. I write the query and I fetch the data and what I do is I would bind them into an array which is what you see here as attachments and then I would pass it to the compose extension, which is that area you see here, so I would bind it into this as a grid.

A

So if you want a list, you can have it as a list, but for images it makes sense to have a layout for a grid. So that's exactly what I've done here. So if it's a document that you're bringing out or if you're it's a card of a patient or an information of a candidate in a hr system, you would rather go for a list instead of a grid.

A

uh So this is what happens there, so you can probably understand now that's how it ties up and what happens if for this function, so this function is basically when you select this guy, I mean the item so whatever you searched and you selected that kicks off this function. So this handle teams. Messaging extension select item kicks off it's self explanatory, but then I'm just uh reiterating it kicks off this and it picks up that uh value that you pass from here. So this is where you're passing the the tab.

A

When you tap on that item, you're passing that value and that's being sent to this area- and here again you compose- but you know you're composing, just that one thing that you picked. So this is basically the idea or the flow of how the code works and if the democrats are with me, I can show you how it's working, so I can just do an npm start and another sneaky thing I did was.

A

I already run my ngrok here, so I I do have a an online url. I I think that probably you already know why we're in rocking, because I'm working from my dev machine is not deployed into a cloud, so I need to have a url that's available online to be used inside to test my application in teams. So I have done that so and now I have started my basically like I'm running my local machine and then I could go ahead and test my application from here. So this basically should work now.

A

So if I can at mention my application, um I should be able to test this. Hopefully it will work and you can see here. I have typed some values in and I've got some results coming back. You can know the difference, I'm not bluffing. This is not a gif. The reason why I'm saying is is just kidding. I know you for folks are great.

A

um Is that I'm sending my limit as five items to be brought back from the api, and I also can control the rating, which was previously pg-13, and I was like freaking out when I saw that because I don't know what's going to come up, so I just quickly change it to g. So you know you can't you sort of have flexibility on what you can call in your api as well, once you do this so yeah. This is basically how it works.

A

You can invoke it by at mentioning your search based messaging extension or you can invoke it from within your compost area, so this is called the compost area. This is something I learned very recently. I don't know I was, I always say the chat thingy, the compost area, so you can invoke it from the compost area as well. You can basically search and your whatever item you're trying to bring back, in our case a gif from here as well, and then you can do you know.

A

Everything else is just the same stuff that you usually do nothing nothing's shocking here and yeah and that's exactly how it works. I hope I have shed some light, but I cannot uh finish this comparison or this demo without talking about the manifest file, so I can open up the manifest file just a second I'm so short, I basically have to look through stuff because my table is really high.

A

I should fix that but anyway. So this is how my manifest file looks like and you can basically go ahead and if you're using the teams toolkit, then there is a catch that the manifest file is in the cloud. But if you're, using your main generator to build your application, then it's it's readily available for you in your project. So if so, I have used a teams toolkit uh in the scenario, so you can go ahead to your application studio and find out the application where your application is.

A

So my application is here- and I could go ahead and see my manifest file by downloading the zip file which basically is somewhere here. Where is it okay test and distribute? So it should be here so you can download from here as well. You can see the manifest file, which basically is a json uh file, oh yeah. So this is how I did it. I downloaded it and opened it just to show you a few things basically around the compose extension.

A

This is the main bit that says or talks to the team's application, saying that it's an extension- and you can see here, the bot id is the id of the bot it's tied to and configuration updated. Something is like you can have configurations and your command. This is the main bit so type query. Is your search based messaging extension? If it's it's called actions. If it's type action, then it's an action based messaging extension, an initial run. I've set it to false, basically what it does is.

A

It would just invoke that call the initial call and without the person, the user typing, so you can think of a scenario where you would like to bring out recent documents without searching for the document, then you could make it true, because then you probably need all the options for the user, and this is the two bits that I talked about. So you can invoke this messaging extension either in a compose area or through the command box, so you can add, mention it and stuff. So that's, basically it that's all.

A

You need to probably know to get you started with creating a search based, msd extension. Thank you excellent. Thank you, raphael. That was a really great demo rapid. Thank you for that.

A