Microsoft 365 Community Community Demos, 13 Sep 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Implementing Bookmark bot for Microsoft Teams using Microsoft Teams Toolkit

Description

📺 In this 13 minute developer focused demo, Ejaz shows us how to utilize Teams Toolkit v5.0 to implement a bookmark bot into Microsoft Teams. It adds new bookmark items to a SharePoint list and uses Microsoft Graph to do that. Bot supports SSO and uses Adaptive Cards to collect user input and confirm the creation of the item. He shares the minimal path to awesome and provides a comprehensive code walkthrough.

This demo is taken from the Microsoft 365 & Power Platform community call 3rd of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Ejaz Hussain (Content+Cloud) | @ejazhussain_

📖 Learn more
• Bookmark Bot sample: https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/pnp-sp-dev-teams-sample-bot-graph-bookmark/

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

Foreign, okay, so hi everybody, uh my name is ejazen. I am a developer architect, work for a company called content and Cloud uh I'm based in UK London specific, so um uh you can get in touch on LinkedIn or Twitter. Here's my handles so we'll be talking about today is a bookmark bot, uh Microsoft teams app and I created using teamstool good video Studio code 5.0.

A

So what is the book about some? You know it's the most of the time uh you know as a as a developer. Architect, you know always come from. uh You know, always a need to kind of come come across really really nice articles and I want to save it so I.

A

uh So I thought it would be kind of a good use case where I'm in the max of teams or at the same thing could be implemented in in uh you know the spfx web part and be available in office as well as in teams as well as in SharePoint or wherever you know you spend most of the time. Basically, you want to save that bookmark and go back and read it, and, uh and that was the whole.

A

You know kind of a driver or idea behind this, as well as to creating, as some sort of you know, as a simple concept. So what I did is basically I created a themes bot using the team's toolkit video Studio code 5.0. uh So the board basically helped you to add a new bookmark to the SharePoint list, so as a proof of concept I'm using shipment list. So this could be any any backend Azure storage uh table.

A

So it could be anything or any, even the databases so I'm using Microsoft graph API to write to the SharePoint list. uh Just keep the uh the process simple. At this point, and also the the sample also implement the single sign-on as well now how it works. So, basically, you go and access the app in the themes. App client then go and you typed in or either select from the suggestion bookmark command.

A

So once you hit the enter, then it will give you an Adaptive card to fill in the bookmark form and then once you fill in the bookmark on hit, submit or save it will save the data uh back into the ship and list and give you the link is the newly created uh bookmark. So if we go and I'll show you the demo, so if I go here and hit say bookmark, so let me go and Trigger.

A

So I give you like a little uh for adaptive card form, so you can just fill in your some sort of URL, so this could be like this. Is this example? So you know you know, get an idea. Basically you can add so much data into uh you can add some categories or you know some more tags, some more information into it. So you can build some more complex form. uh So, when you fill in your data, you hit submit so I'm submitting to my app.

A

So it's not processing so as soon as it got submitted so I have uh now. The item has been created and I can go and click on The View like it takes me to the shipment list, where this is being saved. uh Now it basically update take that objective card and it's replaced with the mice. The adapter car, which has been the final one, has been success, so I'm replacing with another adapter card after my success response. So that's what it's doing as in term of the saving back into the shipment list.

A

So, and so, if you notice that as soon as we um because I am running up a five in debug mode, so you it did not ask me for any any uh login or any prompts so, basically, once you log in once and then because using single sign-on, so it won't ask you again: uh that's why that's why it's implemented here?

A

So if you, if you hit the bookmark and if you are not logged in if you log your first time, it will give you a sign in card as well and that's all handled implemented teams toolkit uh behind the scenes. So you know I'm, not writing any extra code which I used to write before using the teams toolkit video Studios, that's really really cool.

A

So now uh so after the damn, so we'll just go back again and then we see how do we get to this point like first, uh we need to create the command board project. We will see a code 5.0 or you know we got 4.4 5.4.1 as well. uh I think is the same process might be some changes, but I've used 5.0, configure provision actions so provision action. Where view uh you need your ad apps for your Microsoft graph authentication, your idea for your Bot.

A

uh If there's any other resource you wanted to provision, that's where, basically you do you configure your provision action app. It's really really cool things. Now in real Studio core, you can do that. You can use your existing resources, you can choose uh you or you can create a new one as well. uh You add single sign-in code in there and once you're done, then uh some and then you add, make sure you create your bookmark list behind the scene and then once you all put together.

A

Basically, your board is ready to go, so we can quickly go back to the code. How do we do that so.

A

Right so, first of all um and I you'd simply create the project and then once via the team's toolkit. uh If you go here, you just create a new, app and Bots or um so create the bot project, and then it will ask you what kind of board I have simple chat command or you can use the basic board as well. So, whichever works for you and then after that, once it's done you.

A

The second thing, is uh you go ahead and configure the your provision action, so that is the for the dev for the local development. You need to go to the themes app.local.jaml file, and this is all the magic is happening here uh which is these are changes came in as a part of the 5.0 uh video Studio code, so you can create your team app, uh which is the creating the teams app. Then you, you can Define here.

A

If you want to create a new ad app which I'm using for I'm using for that bought ad app. If you already have existing one, you just pass that ID in the environment variable it will use the existing app bot. It won't just create the new one if it's already registered, then uh you, if you and then you if you want to have created like, for example, this way I'm creating another ad app for my.

A

uh Are you Microsoft graph authentication, so you can basically go and provision and whatever the uh parameters you wanted to write into the environment after the your ad app has been provisioned, so I'm, saying: okay, please put these ones into my um environment or local file because I'm in the local environment and then once and if there's any update, you can do that uh which, basically, if you make any changes, it's gonna go and update the ad manifest file and then at the end, I am once it's all provisioned and you can basically go to the uh it's really cool, documentation and see.

A

What are the actions are available? uh You pretty much can customize these based on your requirement. What you want in your app and then at the end um on this. These are the ones I've all been done, I'm putting all this in my environment, variables, bot, ID password uh for the import, ID and password and then for the Microsoft graph. Adap uh credential as well and uh additionally, uh because to keep the things simple, I'm, saving my site, ID and the list ID into my local environment.

A

So I can basically use your custom one as well. You don't have to kind of use, so these are all auto generated, so you can use your custom one as well, where you wanted to use in your application. So this is where you define your Customs attributes. uh So the people you know, then you can reuse in your application once they're all done, you need to go and uh your config file uh it's internal. So you make sure uh you is basically read all those environment variables put into the config object.

A

So then this will be globally object available. You can then use that in your application, wherever you need the bot ID password or the client ID Clan, secure, site, ID Etc, so next thing initialization to set up the SSO in your Bot, so under the SSO config under the initialize initializer.ts make sure you Scope address this user cider reader All now bear in mind when we did that uh I think one thing is missed, which I want to show. You is the uh ad manifest files?

A

So this is where you basically Define your scope, uh whatever you need permission from the Microsoft graph. So when this provisioning happened, it will automatically configure your your ad app to have the required scope. So you don't have to do manually anything in your ad application. So um now uh so once we have, everything is provision. I was in the initialization, so I'm saying these are my scope for. Are you ready app, then this is the uh I'm pointing to initial login.

A

So you need these two um for the authentication for the SSO which are in the public, make sure all start and all the ends are there and once you have in there in place, you need to go to initial teams.

A

Okay to make sure I have these in a place as well, so that that mean is, is re is uh so anything any uh if any request comes in. For uh of your old hand, all start. You need to have this in place, so you can know that and and Trigger this or a single sign-on process from there. So once that done, I'm gonna go back to my internal um yeah cool, so yeah.

A

This is where all this configuration is so once you've done this, that's all, and then this is so configuration, and this is where you define your command boards commands. So what are the commands you you bought randomly. So that's the com, hello world is comes out of the box, but and and if there's any other command like SSO command. For in my case, my the two commands I have a profile and the bookmark Port handle is SSO command. So you basically is defined under the SS, so as the array.

A

So, if I go to my bookmark command and what happened here when people type The Bookmark, which is the triggered pattern here, you can Define whatever the trigger pattern and also you can Define the same under your manifest as a suggestion like uh so people can just simply clicked on the suggestion uh or they can type this bookmark.

A

So as soon as this happened, because this is extended with the theme fxbot SSO command Handler uh as soon as it's basically handling everything behind the scene in term of that, if user needs to log in and authorize provide the consent and the initial consent. If so, is everything happening behind the scene?

A

If, if user click on the bookmark and if they're not login, they will be presented with a consent, box or login click like a adaptive card for the login and once they're done and the next time they won't, uh they won't see that a login adaptive card. They, then simply it will spit it out as a token. So what I'm doing is I'm taking the SSO token I'm initializing My Graph service. That's simple graph service.

A

Nothing fancy in there is basically creating Microsoft graph client Prudential, based on uh the the the the the the the scope which I needed. That's all it is doing uh when we hit uh is presenting you the form. This is the please submit your day book box form which is the you know this the card, which is the Adaptive card which you've seen before now. So what happened when people submit? So we have another action card action Summit, so you can basically put your action in a separate, folder and separate class. That's really cool!

A

So you know we don't have to do everything in same file, so you can basically trigger the verb as a summit uh and this what happened is as soon as you hit submit on your form, your your control comes here here.

A

This is you get the extract, the data from uh from whatever the user has submitted and then I'm doing is taking that data and then creating a list item and once the latest has been created, I've got the ID of the list item and is the display item of the URL and I'm displaying this to the user. So that's that's what's happening and then they go. So that's that's the code how it's been working in place. So that's all from me guys if you have any question, please Shout foreign.