Microsoft 365 Community Microsoft Teams, 8 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build your first Workflow bot for Microsoft Teams with Teams Toolkit for Visual Studio Code

Description

In this 19-minute developer focused demo, Garry Trinder transforms viewers from zero to orders hero in minutes. What is a workflow tool and Teams Toolkit for Visual Studio Code? Use these tools to create a project, run the new bot for first time, a very comprehensive look through the files/code, live coding to create a restaurant order form (Adaptive Cards), capture data, and conclude with summary and resources. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 8, 2022.

Demo Presenter
• Garry Trinder (Microsoft) | @garrytrinder

Supporting materials
• Teams Toolkit (Marketplace) - Microsoft Teams Toolkit for Visual Studio Code | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension
• Samples – Adaptive Cards - Samples and Templates (Restaurant order sample) | https://adaptivecards.io/samples/RestaurantOrder.html

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

Building your first workflow bot, using teams toolkit for visual studio code a little bit about me. My name is Gary trender Cloud, developer Advocate at Microsoft joined, Microsoft I did lots of development and consultancy and architecture beforehand was MVP if you've not checked out to Clive Microsoft 365, please check it out, I'm also maintaining there.

B

If you want to follow me about Microsoft 365 dev, then you can get me on the socials you'll find me mainly on Twitter, but obviously, if you're not on Twitter anymore, uh there are plenty of the socials around you can get the the rest of my details from uh from my link tree just wanted to cover a really small agenda and first gonna go through uh what the workflow bot is introduce team's toolkit Visual Studio code.

B

If you don't know what that is, we'll go through how we create our first uh project, have a quick uh run through um of the the project and how you can run that uh bot for the first time and what I'm going to do is actually I'm going to do a bit of a live coding uh session. We're going to build an order form to really show off the uh the new feature um that uh that we're going to talk about today, which is the the workflow bot, so our workflow bot.

B

What is a workflow bot uh well, the workflow bot is is actually it's. It's a new feature. That's been released in the latest version of teams toolkit for visual studio code.

B

um Essentially, this workflow bot is designed to make it really easy for you to capture responses um from users in Microsoft teams, so you might send them an Adaptive card with an action on there or maybe a mini form, and you want them. You want the users to enter information and submit that and how you capture that back and it has not been trivial. So um this workflow bot approaching humans toolkit for visual studio code is really really simplifies.

B

That and I'll show a great example of an order form later on, which will which we'll go through. So I mentioned teams toolkit, and so this is all going to use to build our workflow bot. And if you don't know what teams toolkit Visual Studio code is it's a visual studio code extension that you can install from the marketplace which gives you um functionality to create a debug and publish your team's apps to your Microsoft, 365, tenant, Sports, JavaScript and typescript as well?

B

If you are interested in teams development, but not interested in JavaScript to typescript, there is a visual studio version of teams toolkit as well, so if you're, in.net and c-sharp check that out, but for today today we're going to look at the uh the JavaScript and typescript versions.

B

So uh let's just go straight into the demo, so I'm going to show you uh quickly how to create this, uh this initial project so I'm just going to move into Visual Studio code. So if you haven't installed teams toolkit like I mentioned, you can simply go to the marketplace. Search for teams. Toolkit select that, and so you see, 4.1.4.1.1 is the latest version and as long as you're running 4.1.0 you'll have the ability to create this.

B

This workflow bot, which I'm going to show you so once you've installed that you'll have the team's toolkit icon. On the left hand, side, which gives you the ability to create a new teams app or actually create samples that have already been created in a gallery we'll quickly just go through the steps of how to create this workflow bot, so click new teams, app button click, click, create new teams app again and in here in the scenario based uh teams app selection screen, we've got the workflow bot, which is which is new.

B

So, let's select this uh like I mentioned, we've got options of two languages: JavaScript or typescript I, quite like typescript, so I'm going to choose that, and we need to basically give a location of where our project is going to be created. So I'm just going to use the default folder for now and I'll, just give it a name and we'll call it Community call and team stalk.

B

It is going to go away and it's going to scaffold a new project which it's just done, and it's going to open that that's up for us that will also open up a readme file with some information about this template as well.

B

And so you know, if you're coming to this and after the call, potentially you wait to look through there's tons of information here which just describes about the project, what the individual files are and and how you can extend it I'm just going to quickly cover what these folders are, that it's generated, so we've got an fx folder. So this is where it seems toolkit configuration lives. We've got the vs code um folder, um which um is all the ebook settings debug profiles for um for visual studio code.

B

We have our bot folder, which is where our source code lives for our our Bots. You see the source folder in there and we have a templates folder, which contains our app manifest templates and also our Azure templates, bicep templates for when we actually want to deploy this into Azure and get this ring somewhere other than our own machine, um so I'm just going to quickly jump into the the bot folder. So we've got a few folders in here and I'll just quickly expand them.

B

um So if you've used teams talk it before and you've maybe used the command bot template this kind of Builds. On top of the uh of that template, so we have uh command handlers, which is our instruction for our bot to to do something, um and uh we have some card actions which is okay. When um an activity a button has been clicked on that uh uh on a card, that's been added into um our teams chat by invoking that command. We can get the response.

B

We've got a couple of adaptive cards as well, just to kind of render a bit of a UI and and when we actually get a response um as well a few model um files in there as well, and we have initialize a file which is where our kind of Bot configuration lives so it by default. We have a Hello World command Handler, so we're going to invoke hello world and we're going to get a response.

B

And then we have a do stuff action, Handler, which is going to be invoked when we actually perform an action on on one of the Adaptive cards, um so I'm just going to skip quickly to a project that I've already created and I've already got running.

B

um So here is my project: it's exactly the same as as what I've just shown you, um but it's actively running um I'm, just going to show you a few things which I've done to get this running uh in teams. Toolkit I've actually authenticated with my um Microsoft 365 tenant and it's checked.

B

I've got side loading enabled as well, which has allowed me to install my my app locally and and have that running and I've also then gone to the debug selected, my profile, which is Edge and hit F5 and, and that started the the debug process and it's installed the app for me and all the other resources that I need um to uh to run this app in in Microsoft teams, so I'm going to switch to teams.

B

So this is the the app that's already running, I've already side loaded this into uh teams and to invoke our our bot we're going to invoke the hello world command.

B

So, if I run hello, world I get a uh a response with an Adaptive card that has a button on it and when I click do stuff, the Adaptive card actually gets replaced. So what has just happened? There is we've had a response: that's come back to our bot and our bot has gone okay. Great I've had something happen from from adaptive card that I've sent out and now I can replace that uh that adaptive card with some things um that just confirms that um that that something has happened.

B

It's a really really basic example, but I'm going to show you something: that's a bit more real world. This is a great way of being able to capture data as well, so through a form and so I'll actually go through and and show you that. So it's a bit more uh real world.

B

So what I'm going to do is I'm going to jump through and I'm going to guide you through the steps of how to build out this form and as I'm, going through I'm, going to explain all the different areas um of how this uh this bot actually works. So, if I go back to my project, so the first thing that I want to do is I'm going to create a new adaptive card.

B

So this is going to be a our our response to our Command I'm, going to paste in this adaptive card now, just to show you what this actually looks like I've actually used a sample. So if you go to the Adaptive cards um website, there's loads of samples in here scroll all the way down to the bottom. We've got a restaurant order, which is a form that has validation in it, has some sample data and a sample uh adaptive card definition as well.

B

So what I've done is I've taken that and I've made some slight adjustments. um I've dropped the version and to 1.4, so that teams supports it and have also changed the action. So this is a button that allows us to place our order. They've changed this to action, execute and I've, provided a verb, so what's happening here is when I actually click that button a verb is going to be sent back to my bot, saying I've got an action here, called order placed.

B

Have you got anything to handle uh that and then the handle is going to kick in and then uh basically work with the uh with the response that that we've got so there is our adaptive card.

B

What we're going to do now is I'm going to go to our models and I am going to just paste in a load of interfaces, so this describes our our order form effectively for our adaptive card. This is going to help when we are combining our template with some data, so the data to actually add um items into the into the drop downs in in that form.

B

So we've got an order interface, which includes the form, information, the individual order and some questions and and the items of the actual drop down values as well.

B

So next thing I'm going to do is I'm actually going to create a new command Handler.

B

So this is going to be an order command Handler.

B

So what this is going to enable us to is actually uh create that invoke a order command in our bot, and so what we do is we create a new class that implements this team's FX bot command, Handler, so I'm just going to import that in and then I'm going to implement the interface, which provides us with a trigger pattern and a function that essentially gets called when um our bot basically picks up that someone sent a message to it with with this particular pattern, so I mentioned, we want to order to be our keyword.

B

So when orders put in it's actually going to fire this, this function, one thing which I'm going to quickly do is I'm just going to add the async keyword here to the the command received function. So we actually need that first thing is I'm, going to create a constant which contains our our data that we're going to pass into our.

B

Adaptive card template so in here you can see the different questions and the different values that we uh that we have a available and then the next step. What we're going to do is combine the data and our adaptive card and then return our adaptive card um back to our our bot chat, so I'm just going to import some of these statements and I'm going to import our adaptive card as well, which I have to just do this manually.

B

Called order card.

B

Captive cards and uh oh.

B

The command response actually bringing our order data type as well, which is in here.

B

Yeah, so there's our model, so this is our Command. That's going to get invoked, it's going to send a a an Adaptive card back uh as a response, and the button is then going to fire this. uh This response with an order placed verb. One last thing: we need to do for uh to tell our a bot that this Handler actually exists. So if we go to the initialize um file in here, I can add my new Handler, which was our order, command, Handler and save that.

B

So at this point, we've set up the the actual command. The next thing we need to do is is set up our Handler to where to pick up the uh the values coming, the other way. So what we will do is we'll create another adaptive card which is going to be order, placed foreign response.

B

Okay, so I'm going to paste this in here and it's simply just going to respond back with some confirmation of what we actually selected in the drop downs and then provide some extra buttons. Actually, so we could carry on if we wanted and add more action handlers in here and add more verbs and so that you know the cards can basically roll into uh into one another. uh Let's add our model as well in here, so we're going to add in our response data and our the shape for our action data as well.

B

So this is going to be the shape of the data. That's going to come back from our form, and so these at the entry select file, is an ID, that's actually in the Adaptive card as well. So it provides that that uh Json object back to us.

B

Okay, now, let's create our actions.

B

So we've got an action here, that's going to be the order, placed action, Handler and this time we're going to use a different interface, so the Adaptive card action Handler from teams FX, let's Implement, that interface I'm just going to quickly get rid of this because we don't need it, but we have our trigger verb so similar to our trigger pattern. We can actually put in our our verb in there.

B

So when the verb is detected, it's going to run our handle action, invoked method, so I'm going to make that async as well and one of the things that we're going to do so, we can see. We've got our action data, that's provided for us. This is the information that's submitted in the form, rather than this being an any. um Let's actually um return that as order action data, so that's strongly typed and then what we're going to do is create our response data object. So this is our shape for the Adaptive card.

B

That's actually going to be sent back in replace of our form and I'll. Add that, and here same curves, it's very similar to the way that the the actual uh commands work.

B

The response card just import the card which.

A

A

B

On a placed action, camera no response, that's where copilot didn't help, because it gave me the wrong thing uh right: okay, so that is our our class actually created. And our final thing is: we want to add our action card action into our bot. So this is our order placed.

B

At the import and now I can save this, so we've implemented command implemented. The action implemented all of the Adaptive cards, so let's go back to our adaptive card and put in order, and we have our form, which has all values in so I'm, definitely going to have stake after this. Maybe some noodles and definitely coffee, I'm gonna, hit place order and there we go. We have our response. We have our responses back to us. We have a button which we can carry on.

B

We can add more actions and even provide edit orders, save orders as well, and that is time that is the the demo um I'll not carry on Visa I'll. Let you take it that back yeah excellent.

A

Camera really awesome: this is a great demo and create storyline and create way of actually flipping those adaptive cards so really really cool.