Microsoft 365 Community Adaptive Cards, 6 Jan 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint site provisioning with Microsoft Teams Notifications using Bot Framework

Description

In this 13-minute developer focused demo, allow Sergei Sergeev to show you how the PnP Framework (containing PnP Provisioning engine) is used to provision a new site based on the PnP template. The Azure provisioning web job is triggered by a queue message from a custom site template (previously known as site design). The Microsoft Teams bot pushes proactive notifications about current provisioning state to the configured channel via Adaptive Card updates. Notifications are electively disabled/enabled from the card. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on January 6, 2022.

Demo Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:
• Article – Building PnP Provisioning notifier Bot | https://spblog.net/post/2022/01/04/building-pnp-provisioning-notifier-bot
• Repo - Sample code which demonstrates how to use MS Teams bot to send PnP Provisioning progress notifications to the selected channels | https://github.com/spblog/pnp-provision-teams-bot-notifier
• Repo - PnP Framework | https://github.com/pnp/pnpframework

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

Hello: everyone, my name, is sergey sergeyev, I'm sharepoint, developer and consultant also mvp in office development and in this demo, we're going to see how to set up a pnp provisioning notifications mechanism using microsoft teams bot. So let's go to the demo right away and what I have here is just a regular sharepoint website. I have some some branding applied, but what I'm going to do is to apply a site template within this menu.

A

I'm going to apply a completely custom site template I've created before so it is called pimpy, contoso landing, and this template contains only one step called trigger flow, and this flow starts the pnp provisioning process inside azure web job. So let's just go ahead and use this template, and while it is starting, let's see how this flow looks like. So it's not uh it's not a power automatic flow, it's azure logic app actually, and this pattern is quite common when you develop a pnp provision process on top of site template.

A

So you see this http trigger and then, when we, when we receive http request, we put a new message in a queue and then our error, web job or error function doesn't really matter.

A

So this flow uh put a message in a queue and then finally, our azure web job starts a pnp provision process.

A

Based on this message also, we have our microsoft teams and we have it id team and pnp provisioning channel here, and you see that the just received a new uh new card here from our pnp notifier bot and this boat updates these this card. It pushes the current progress of the tmp.

A

It shows what is the current object, which is being provisioned? What are the total steps and what is the current step? So, let's wait for a while until it will be finished, it should be quite fast. So it's the last step. The navigation object. Okay, now this provision is completed.

A

You can click the link to open your site. If there are any problems or errors during the provisioning process, then then the error card will be pushed here with the all details and stack trace.

A

This board is fully configurable, meaning that, if you want to, if you want to see notifications in a completely different channel, then you can just type the command code. Configure pnp notifications like this, so the board replied with this card will have a button to enable notifications.

A

So after I click enable, then the card is updated and now it indicates that for for this specific channel notifications are also enabled so next time I will apply this template on the sharepoint website. So then this channel will also receive notifications from the bot.

A

So basically, this is how it works from from end user perspective and from it department perspective. When somebody starts the process of provisioning, then the iet department also receives the notifications, the status and probably the logs of this process.

A

Now, let's take a look, how it looks like from the source code perspective right. So, as I said, I have a custom site template or it is called site design previously and only one side script. So basically they have this uh trigger flow verb and that's that's it. So nothing special here also. We have a job, sorry job here and the boat here, so let's start with the boat itself, so the boat. If you go back to the teams, then again the board handles command.

A

So when you type configure pinpointification, this is the command and also it handles card actions. When I click this button, then that's the card action. That is why, in the code behind for both, we have two handlers on command and on card action.

A

If you go to command handler, then we have configure notifications command and this command command is quite simple. It creates the cart and this card contains the information about whether the notifications are enabled or not, and the boat simply creates a new activity or creates an output with the card, and you can see this card and you can click on this button.

A

Now, when you click the button, then, if you go back to the boat, then we handle card action. Let's see how it looks like under the cards.

A

Configuring pinifications card handler- and here we have whether card action is enabled or disabled, and if it is enabled for example, then we go here and we create this notification data object and we should store channel id. This is important and also we should store the service url. We need this parameter later on in the job and tenant id. All. This data is stored inside cosmos database.

A

If we go to azure again azure, we have the cosmos database and basically this is the record for notifications and when we enable notifications for a specific channel, then the code simply adds a new item into the notifications data list and it contains all the parameters I have just mentioned, and the implementation of storage.

A

Is based on the I storage interface defined in the boat builder and the default implementation uses again, is that's a bot builder based cosmos, db, partition storage, which simply writes to cosmos database, but if you have a need, you can implement your own or just use completely different storage.

A

So again, once again, when we click enable notifications, then we simply store all these data in the database and then we update our activity, which means that the bot updates labels that notifications are enabled, and also it updates the text for for the button here.

A

So when I click again disable, then you see that after a while, this card will be updated.

A

So this is the boat. That's as you see it, handles commands and actions not very complicated. Now, if you go to the pinpunity file job, then what we have here.

A

First of all, we have the pnp template and also we have a code which executes the pnp provisioning. I think you know this code, so it's web dot apple I and template, but during the provisioning process. We also push some updates about the provisioning process, about the status about the current step, etc, etc.

A

Using this notification card manager class, for example, before the provisioning we send this starting card async. So what is that this is just a thumbnail card with some details like site url here template name, some images as well, then, in in this cycle notification data so again, notification data. This is the data. Basically, this is all the channels where we configured notifications, so we iterate over all channels and we create this connector client.

A

So connector client is a special class from both builder and this class allows us to to send proactive messages to the team's channels. Proactive messages means that that our bot does not reply or does not yeah does not reply to some some actions, but instead our boat proactively pushes messages to the channel. So for that purpose we use this connector client and then using this client. We simply create a new conversation and we provide as activity. We provide the thumbnail card so how it works.

A

So this is the our initial card, which is created by this method, create conversation async, and this card is created proactively, using proactive messages from infinite fire bot. So the bot indicates that we are starting the pnp provision process later on. When we are in progress in pnp, you can specify the progress delegate which will push notifications about current step and the progress of pinky provisioning.

A

So, on every step we send the reply again in reply to this card, and if you remember here, we displayed the current step, the progress and the total steps. So, basically again, this is the thumbnail card containing message, progress, total steps and once again we iterate over all the channels where we enabled the notifications we again use this connector client and then finally, the update activity, which means that we update this card and we simply push different message and different progress based on the data provided from from pnp delegate.

A

So this is how update works and, finally, in the very and the very end of this process, if everything is successful, then we just send the success card. If there are some problems, there are some errors, then we create error card and this error card contains error code as well as stack trades and also the link to provisioning logs. So the, for example, the iit department can see that there were some problems during the provision process. They can simply click and open the logs and probably quickly identify where the problem is yeah.

A

So basically, this is it here. Just to recap: we have a custom custom site template based on the logic, app custom, custom site, template executes the pnp provisioning process and during the pnp provisioning we use microsoft, team support and proactive messaging to push updates to the dedicated channel, for example, for it department to see what's happening. What is the status and what is the outcome?

A

Yeah? So that's it from me. Thank you.

B

Awesome, thank you sergey. That is super super cool love, the uh love, the use of iconography in that love, the notifications. The transparency keeps everyone updated along the way of the provisioning, uh really really fantastic posted some links for sergey's article that he's written on this, as well as the source code, will be available to you in the blog post. If you're watching the video. Thank you again, sergey awesome. Job.