Microsoft 365 Community Microsoft Teams, 16 Sep 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with Bot Framework Composer for building Teams Task Modules

Description

In this 14-minute developer-focused demo, Stephan Bisser creates a new bot in Composer (use Core Bot with Language template), sets up Language Understanding in Azure, installs the Teams package into the new project (in Composer), adds triggers to operate in Teams and to receive and respond to orders. Conduct your Pizza business via an Adaptive Card and task modules. Build task modules using Bot Framework Composer without writing (almost) any code! This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 16, 2021.

Demo Presenter: Stephan Bisser (Solvion) | @stephanbisser

Supporting materials:
• Documentation - Bot Framework Composer documentation | https://aka.ms/bfcomposer
• Article - Bot Framework Composer Series - 3 - Teams Task Modules | https://bisser.io/bot-framework-composer-series-3-teams-task-modles/
• Repo - microsoft/BotFramework-Composer | https://github.com/microsoft/BotFramework-Composer

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

So what I'm gonna demo today is uh how to build a team's test module using bot camera composer.

A

So for those of you who don't know what composer is composer is one of the newest additions to the plot remake ecosystem, where you can actually build a bot without writing too much code, at least there's some opportunity to write code. You don't need to be hardcore def to to write your whole bot logic and all of that stuff using either.net or javascript or whatever. So you can use composer as a more or less gui for sketching out your bots logic. The dialogues and team specific actions in there as well.

A

So, if you're not familiar with composer just hit, it uh aka.net, slash pf, composer, uh download it and you're good to go so first things. First, what I'm going to do now is open up composer. uh It comes with a little intro screen shows you all the bots you've already created for this demo, I'm going to go ahead and create a new one. As you can see in here, there are a lot of templates for c-sharp nodejs, which you can pick and choose from.

A

We go with the core board with language template.

A

Select next use some folder, you want to create it in and then just click on create and while it's creating what it actually does now is scaffolding out the whole project, so composer actually creates a new folder in there with the project files in there and everything which is part of the template and while it's creating and scaffolding the project, I'm gonna switch over to the azure portal, because I've prepared a little bit um to have all of the bits and pieces connected together beforehand before we actually uh sketch out our bot.

A

So I've already gone into the azure portal created the new azure bot, which was called blockchain registration service beforehand. So we'll need that to have our bot as well as the task module be running into in microsoft teams, so I've already created that I've already enabled the microsoft teams channel in there. As you can see so, my azure bot service is already waiting for us to be running in microsoft teams. So that should be good and as you as we switch back to composer, it's now, building the runtime.

A

So it takes a little while, as I said, it's getting the new templates on the fly, building everything merging the packages together and within a couple of minutes it should be good to go, and hopefully my machine is not that as low as teams is today. So we should be good to go with our bot in a couple of seconds.

A

Yeah getting there.

A

Now it's there good! So as we can see, we have chosen a template which already states us that we need to set up language understanding. So we'll do so.

A

I've already created a new lewis service within azure, so what it actually does now is it's asking me to authenticate to my azure account to grab all the keys by itself.

A

So don't mistype my password, I should be able to sign in then it should actually.

A

Let me choose from my azure subscription the language understanding resource name, so it's loading the keys. As of now we can pick one of the lewis keys and then paste it in as we can see in here.

A

The other thing we'll need to run our bot in the end in teams is the app id and app secret so I'll paste that in and then we should be good to go. So. The first thing we will need is to add a new package or bot from the package management console in here.

A

So there are a lot of packages in there if you'd like to. If you feel something is missing in there, you can just add a new package uh through the bottom community repo and as we are building a team, starts module. We'll add the new teams package to our bot so actually we're pulling out or pulling in a new package into into our bot uh project, which gets then installed and which then adds additional features to our bot, as well as to composer or to the ui composer.

A

So now we should be good to go with the packages um and, as we see, we have a pretty basic part which comes with a lot of intents in there. Greeting cancel, help and stuff like that, and as we want to build a new, a new assistant for us who should be capable of ordering pizza for us, we'll add a new intent in there or a new trigger of type intent, recognized. So language understanding comes into play, which is called order, food and we'll paste in some sample.

A

Uterences like I want to order pizza, or can I order pizza and stuff like that to make our language understanding uh service aware that these types of phrases should be connected to the order, food intent and in there what we want to do next is display a hero card, so hero card is more or less similar to to an adaptive card, but not that that rich in functionality.

A

So in order to do that, we'll send a new response. Whenever someone wants to order food and within the bot responses, we say we want to attach something or we want to add a new attachment to that response.

A

We can select, create from template and select hero card and then in there we'll just paste in a new hero card. So it comes with the subtitle and it comes with one button in that instance, and in order to use that button, we'll need to add something to our language generation, template and I'll just quickly.

A

Remove all the text responses we'll make sure that just the hero card gets displayed, so we gonna basically go to our bot responses, as you can see in here. This is the language generation part of it so we'll make sure to add something to our core with language template scroll down to the bottom, and I've already prepared something which is a template for a new hero card where you can actually on the fly, paste in attributes or properties and we'll see in here. This is our button.

A

We have included in our um in our hero card and within that button we see there is a new action of type task fetch. So this basically makes teams aware that whenever someone clicks that button, um the task module should be fetched and the task module action should be should be run. So, in that case task forward, slash fetch basically indicates teams that a new task module or a specific task module should be fetched and should be presented to the user.

A

So if we switch back to the dialog, what we can do next is adding a new trigger to our bot, and this time we won't select intent, recognized but we'll select microsoft teams as the type of trigger, and then we go with on task module fetch, because we need to respond within the bots logic um to the to the click of the button.

A

So we'll select on task module fetch and as we have um set an id for our uh for our button, we can go ahead and add a new condition to that, and in that condition we can say if the button id is order fetch. We want to execute the logic which comes which comes next, um so task module. Fetch basically indicates we want to fetch the test module and we'll need to do something with that fetch.

A

So we're going to go ahead and select, send a new task, module card response, and within that new task module card response, we basically can say we want to send an either adaptive card or hero card or whatever. You can also go ahead and send a new, more or less iframe, if you'd like to so you can basically send or respond with a with a webview of your own html oops.

A

I need to copy and paste the whole thing without losing some brackets to make it work. So I've already prepared my adaptive card beforehand, and that should basically be it. So we added a new adaptive card attachment to our task module response, give it a title or the food or something like that. You can then say you want to limit the height and width of that adaptive card, which gets them popped out in the team's client, and that should be.

A

It should be good to go. Let's just start ng rock for a second and then give it a go and run our bot and after a couple of seconds the bot should be up and running and if we gonna then switch to teams, I've already prepared my themes app with the with the bot I've shown earlier. So I have a new teams application in there running with the bot and up when it's has started. We could potentially, let's just minimize the windows, we'll see everything in here. We could potentially start communicating with that. One.

A

Yeah, somehow teams is heating up my cpu, I guess so now it started. If we gonna go ahead and select, I guess it should greet us.

A

At least I see the incoming request on my ngrok terminal.

A

Okay, at least it's responding, and if I let me you know, go ahead and say I want to order pizza, we should get the hero card, I said so. That's the hero card, the first part with the button. When clicking the button, we should be represented with the adaptive card.

A

So everything in here is the adaptive card which actually lets us pick and choose from a pizza type, and then we could order, but order actually does not do anything in in here yet because we haven't responded to the ontask module submit action, so we need to go back, add another trigger of type microsoft teams on task module submit and then what we can do is we can respond to that submit with a new task module message response, so we'll stay within the task module and what we can do, then, is.

A

Say thanks for ordering.

A

A pizza, whatever type of pizza, the user ordered. So we really start that and just going back to the adaptive card.

A

You should see somewhere in here that this is the id pizza type, so that's basically a property within the adaptive card which we've set and if we've done everything right on restarting the bot, going back to teams, click on order, pizza, again task module, fetch is now kicking in then we can select a pizza type and if you click order, taskbar to submit action will be triggered and then what actually responsive is thanks for ordering your pizza.

A

So you can basically grab information through a test module from an adaptive card, paste it back to the bot and then handle something within the bus logic. So you can reach out to an api or whatever that's about it, for the demo, if you'd like to follow along bizarre.io, there's a complete tutorial with that sampling there. So, if you'd like to do the same, just feel free or ping me thanks.

B

Awesome stuff steven uh really really cool. I pasted his links in the chat um steven by the way I'll be putting in my order for lunch here shortly through your bots, so really cool and I'm hungry for pizza.