Microsoft 365 Community Microsoft Teams, 3 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build Microsoft Graph integrated bots using Bot Framework Composer

Description

In this 12-minute demo, Stephan Bisser shows viewers capabilities of Bot Framework Composer - a new open-source tool that allows ITPros and Citizen Developers to build a Help Bot that accesses information from Azure Active Directory and Microsoft To Do via Microsoft Graph and renders results using Adaptive Cards. One tool/environment to create dialogs, triggers, actions, etc. with little to no code. The Help Bot in this demo can Show Profile, Add Task and View Tasks. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 3, 2020.

Demo Presenter: Stephan Bisser (Solvion) | @stephanbisser

Supporting materials:
• Bot Framework Composer Series - 1 - Use Adaptive Cards | https://bisser.io/bot-framework-composer-series-1-use-adaptive-cards/
• Bot Framework Composer Series - 2 - Property management | https://bisser.io/bot-framework-composer-series-2-property-management/
• Repo - Microsoft Bot Framework Composer | https://github.com/microsoft/BotFramework-Composer
• Bot Framework Composer Documentation | https://docs.microsoft.com/composer
• botframework-skills | https://github.com/microsoft/botframework-skills/tree/preview-build2020/skills/declarative

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

uh I've been on the committee call, I guess was a couple of weeks ago, where I demonstrated what what framework composer actually is. So if any one of you was on that specific call, you might um see some slides which which are familiar to you, but just to set the stage a bit. um I'd like to introduce you to what the bot framework space actually is what it does now what the offerings are, because nowadays you can have multiple ways of building bots.

A

Actually, in the microsoft um ecosystem, you can have either write it in code with the bot framework sdk um or you can go along with power. Virtual agents, which is a power automate like uh interface for building codes, without actually writing before building bots without actually writing code, or you could use um one of the brand new tools from the bot framework team called plot framework composer, which allows you to actually build a bot uh without actually writing code.

A

So it's a graphical user interface which allows you to build your bot and scaffold your dialogues and so on and so forth, and so mainly composer is one of the new ways of building bots, especially targeting non-developer audiences.

A

So let's say it pros, or power users could also use composer to get started, building their bots, which doesn't mean that developers can't use. It of course make some some some things easier in your development routine, especially for proof of concept, projects or stuff, like that.

A

You could make use of composer to rather quickly have a pot up and running and then take that bot which you outlined in composer into visual studio or visual studio code and enhance it by um code either chart or javascript or whatever, and so composer mainly is kind of a new tool for you to to get started into the bot development scene, especially if you haven't built the bot yet using the microsoft tools.

A

It's a pretty good starting point because it basically includes everything you need in terms of bot development within one tool, it's available as a desktop app, so you can download it I'll, provide it. Link afterwards, as well um and yeah so composer mainly consists, as you can see here, of a graphic user interface for outlining, what's called a dialogue or many dialogues with different triggers.

A

So it's kind of similar to what power automate offers you in terms of the ui, where you just have your what's. What's called waterfall uh dialogue uh diagram in here, starting from the top, um which represents one single part of your conversation with your bot uh and in there you have multiple options to bring life into your dialogues. You can, of course, send responses.

A

You can ask questions validate those responses from the users, either by text validators by number of validators by data and validators, or what have you, but you can also make use of other action types which we'll see later on in the demo, in terms of integrating other apis into your bot, and mainly what the microsoft graph is is a is a good uh example of how to actually make use of an api within the bot, because you can easily call the microsoft graph endpoints within your bot, using composer um and requesting, for instance, for uh the user's profile or for the user's tasks or even going one step further.

A

Adding tasks to your profile or whatever, and so so mainly composer, is uh depending on also some some bits of cognitive services for language understanding, of course. So it's tightly integrated in composer. You don't need to go into another portal or another ui to scaffold your language model. The same is true for the language generation piece, um so it's everything is baked into composer and everything is baked into.

A

What's called an adaptive dialogue which gives you the flexibility to start with composer, which actually writes the code for you in in in in this json schema and then take that dialogues or dialog trees, to let's say a developer for enhancing them or for adding additional functionality, which is not yet implemented in composer, if you will, and so why would you use composer along with the microsoft graph?

A

Of course, the microsoft graph offers a lot of capabilities, uh especially in in bot development scenarios, which you can make use of, for instance, handle task management, handle task management in teams right within teams. You don't need to to switch the contacts to your to-do or to your planner.

A

Why shouldn't the bot be able to handle the user's task management right within within the conversation, for instance, or another example, would be look up, contact details of details of specific people within your organization or if you're writing teams, and you you got an email, uh you could ask the bot to to represent the email and respond directly within teams, for instance, or show the next calendar meetings or what have you. So there are a lot of use cases.

A

Why why you would use a bot um for for uh handling specific tasks and the microsoft graph of course offers a lot of capabilities in there and the cool thing here. Is you don't need to write code at all, or at least you don't need to write that much uh of code if you using composer versus the classic development using the bottom pembroke sdk, so, um let's jump into a demo. I've prepared a bot for today, um which is pre-built already, um which has some uh some components um already configured.

A

So what this bot actually consists of is multiple dialogues, which you can see here on the left. So it has the capability of handling tasks.

A

It can view the tasks of a person, it can add tasks to a to-do list for a specific person, and the third capability is showing the profile. So showing profile is the most simplest thing in here um which actually, uh first of all, does an o out uh login dialogue. So we get basically a user token um for the microsoft graph, and the cool thing here is um oauth. Logging is one of the predefined actions within composer.

A

So what you actually would need to do is to simply create an azure id uh app registration, which I've done before, um of course, select the api permissions.

A

You you want to use within your bot and constant them and then just take the connection name of that uh ajd application and paste it in here into the oauth login uh action and that's pretty much it uh and you have your old dialogue ready uh ready to go so the show profile dialog kicks off with the auth dialog, so it will ask the user to log in uh and after that, what it does. It basically sends an http request to um get the user user's profile in. In this particular case.

A

It's the profile of the you of the person uh who is logged into the bot uh or to the conversation, and then uh what we get back is a simple json response which will store in a variable or in a property called user.profileresult and from that property we basically just select the user's display name, the job title and the user's mail email address and store them into separate properties, and what we then do is we use those properties and generate a an adaptive card from that.

A

So we basically have a function called show profile which takes in the user's display name, job title and uses email address and generates an adaptive card uh for us. This looks basically uh in the practice like this, so this is my my bot marker. If I now uh want to show my profile I'll, just select the help button to see what the bot is able to do, and then click on show profile and what it actually does now.

A

Is it kicks off the oauth dialog asks me to log in if I'm not lucky I'll, be logged in successfully and what it then does is it reaches out to the microsoft graph, as we can see down here in the traces section and gets my profile information, so this is rather simple.

A

If I now want to go ahead and select the help again- and I wanna view my to-do tasks and on the right-hand side, I'll open my to-do list, I have now a list within my to-do called to do, and in there I have two uh still open tasks and one is already completed so I'll have them on the right hand, side. This is my to-do list. The left-hand side is my bot conversation, so these are basically the same and now the what the bot actually does is upon telling me what my tasks are.

A

It also asks me: do you want to add a new task to my list, so I'm going to do that and then I'm going to give my task a name and give it some arbitrary.

A

Name, and what happens right now is that the bot will reach out to the microsoft graph again and see on the right hand, side. My to-do list has been updated immediately, so it's basically really fluent uh in a way that, on the one hand, side, the bot actually does the task handling. For me and on the other side, I don't need to write code anymore to to integrate certain apis, like, in that case, the microsoft graph or any other api.

A

I just do it via using the composer tool and clicking and and doing it via the ui and, as the time is already kind of finished. If you want to learn more about it, here's some links, if you want to take screenshots from that, um if you want to download the composer tool um and basically give it a try, there are already some predefined, uh what's called skills uh using the microsoft graph from the bot framework sdk team, so you can check out them for calendaring for to do for lookup person.

A

These are pretty good um to have a kind of starting point for that.

A

B

You excellent stefan thank you. Thank you. We're always running out of time on this thing. Yes, but there's so much cool stuff to talk about, but.

A

B

Cool demo and it's nice to say that you can do all of that power uh with just with the composer, so really really cool.

A