Microsoft 365 Community SharePoint, 28 Nov 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Show status of Provisioning process using SP Application customizer & SignalR

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on November 28, 2019.

In this 28-minute video, Sergei Sergeev – developer/consultant from Minsk, Belarus, demonstrates using Azure Logic Apps, SharePoint application customizer and SignalR to deliver real-time PnP site provisioning status updates.

Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:

• Blog post: https://spblog.net/post/2019/11/19/show-the-progress-of-your-pnp-provisioning-process-with-sharepoint-application-customizer-and-signalr

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

A

My name is Sergei Sergei I'm from belarus, minsk I am SharePoint, and/or, 365, developer and consultant Microsoft MVP under office development category most of the time, I work as independent contractor, and in this demo we are going to take a look at real time. Pintle provisioning. This signal, our and SharePoint application customizer and we are going. We are going to start with a bit of theory. Yeah, so sorry guys know them at the beginning, and we you starting with the problem statement, in other words, what issue they're going to solve in this demo.

A

Let's say that you've just created a brand new SharePoint website and we also have a custom background process connected to this website, for example, till P, provisional process or Pinta provisioning and some custom code which somehow configures or updates the website. The main idea is that this process is still constantly updating your website and the website isn't fully ready for use right and the this background task usually takes significant amount of time.

A

Let's say half an hour, maybe an hour, and this is the issue because, because your users see the website, but the site is still under construction, you list new lists are being added, probably look you can see, you is changing, cetera and the site is not fully ready yet, and that might might be confusing for for the for the users, and there is a solution.

A

The solution is to, for example, is to simply show a kind of indication to a user that the process in on its own way, for example, using this progress bar like on the image, but don't limit yourself. You can use any and other things like. For example, you can use right-side pane to show all the applied steps, etc. Maybe some other user interface but I selected a progress bar and this bar updates itself. As we finish single operation on a server, for example, we provisioned lists and fields we added client-side pages, navigation, etc.

A

But the question is how to update this progress without without requiring a user to constantly refresh the page, to constantly hit this f5 button right. So one option would be using server polling on a timely basis. For example, you can say you can send an async HTTP request to the server asking for an update every 1 second or every 10 seconds, and this this might work. However, it's not efficient and additionally, it adds some unnecessary load on the server and morale were web.

A

Web technology and asp.net in particular, provides the better answer on this question and we are going to use you know, R, which is part of a speed of net signal our service in order to push real-time notification updates from the server to the client, the updates about the current operation on a server. So in that case, our user is aware that something is still happening on the website. The website is not fully ready and it's a good chance for a user to have a cup of tea or a coffee.

A

But probably you know what is a SharePoint framework and application customizer cetera. But what is what is thinking are exactly signal. Are that's technology which makes it possible to to create a two-way interactive communication channel between the users browser and the server under the hood by default signal are uses technology called WebSockets as transport, but layer between a server and client and web circus. Today they are broadly supported. You see it is Internet, Explorer, 10 plus, and what else signal air is capable of sending push notifications from a server side to all connected clients.

A

So a client in our case, that's the user users browser and it looks like this- is exactly what we need for our problem for to solve our problem. We will use signal our to push notifications about the current penalty provision operation to the users, because in this situation our server our background process is the source of Iran's. Ok, so now we we I, think we understand the problem.

A

The solution and we understand what is signal- are let's finally go ahead and see the diamond first of all, I'm going to create a new communication website and I'm going to use custom site design called the pin padrone.

A

Let me show you: what is how do they make this custom site design? First of all, I have a side script side. Script contains two side to side, script actions the first one triggers the flow, and this flow simply adds a new message into the azure queue I'm going to demonstrate you this as your that's an azure logic up. That's not it's not power ultimate akms flow because in power, tomates HTTP connector is premium. So if you don't have really in subscription, then you can. You can use your logic apps for the same purpose.

A

So that's something I did here: I use a logic up and I use HTTP when HTTP request is received trigger and what I do I simply put a new a new message on AT&T provision queue and I can put a web URL as parameter and the next. The next action in my site, script is associated extension I have an extension called pinky notifier, which will later that we will see that it will show this progress bar to the end users and finally site design.

A

This I designed it is called pinky drawing and this site design has this size script associated. So let's go ahead and create a new website. I'm going to, let's say, will be drawn demo and the owner finish.

A

In crediting, okay, let's open and by the way right now, you see that how how Microsoft solve this issue with progress notifications- and we see this right side pane, which shows all the steps apply it from my side design. So we did you see that a mass flow was trigger it and the extension was associated with this website. Let's see the updated side and right now we we know that under the hood we have pimpy provision and web job, which is right. Now it is running or maybe it is preparing.

A

That is why our website is not fully ready. Yet that is why we see this. This message saying that preparing the engine and this message comes from our custom custom extension application, customizer called pimp in its fire, so basically yeah right now you see that it is starting, and now we right now we are provisional list instances. So what what just happened? Our web job started its work and web job sent a few notifications to the browser and the browser updated the user experience. So this top top Lion goes forward.

A

Let's see how it looks like a very high level perspective, so I've created a new I've created a new communication website based on custom site design. Here at the step number one. We have our website and we have a general logic up which added in uq2 a jerk you and we have a pimpy provision web job which listens to the power over Q. So in some words our a jerk.

A

You execute TNT provision in lab job and finally, and as your web job adds new SharePoint artifacts like leaves, etc, and, at the same time, pin P provision job pushes notifications to our signal our server and signal our server in turn notifies our UI or client browser about current progress. For example, you see that currently we're adding client-side pages.

A

Ok, so right now, let's, let's leave it and let's go and see, and since I'm Cody, let's start with I, think we've pressing our hub.

A

Basically, we have three components here: that's in our hub: that's our web job provision, web job and, finally, a SharePoint application. Customizer we're going to start with our hub, and this is the hub itself. The code, the code itself is not is not complicated. I would say a few important moments here. Is this authorized attribute because we shouldn't expose any any Enterprise API to outside world without authentication, and this this hub uses Azure ID, GWT authentication.

A

That is why authorize attribute is required here and we have three methods in order to handle different requests to clients. First, one is notified. This methods method simply sends notify event to all connected clients. So this this is. These are all signal are related things, so this code sends notified to our browser and additionally, it sends data which contains, for example, current progress and, let's say current operation name next, you have completed event this event, Modifieds our browsers, our clients that that we are fully completed the provisioning process.

A

And finally, we have initial state initial State. That's this. It is called callable method because you can call this method from client, because if you remember signal are is a way to establish two-way communication channel, so I can send request from server like using notify and completed events. So I mattify glance and I can also execute a method from client side on a server.

A

So I use initial state in order to immediately update my user interface with current status, for example in case if a user opens the page for the first time or if a user simply refreshes in the current page. That is why I used this method. I call this method from client order to get current status and then then notify method automatically updates the progress and if you go to startup class, that's this by the way.

A

That's a spirit net core solution and there are some important things to establish the authentication GWT authentication application is over 80.

A

Basically, you should just call few methods and configure authentication with some important methods like validate audience, issue, validator and and some other things. Okay, let's go and see provisioning job so here and we have the job. The job has two main functions.

A

The first function is to provision objects using a pin, D, and the second part is to delete our custom table component here this one component, because we leave this component only while we are provisioning the website, but at the very end we should delete this and we have a method which deletes the application customizer, because under the hood it uses custom actions. That is why we simply need to find a custom action by its name and finally to delete it, and the provisional process is here.

A

First of all, I store all the all the data and it's in play it on Azure blob. So if we go to storage Explorer, we can see that I have block container called pimp drawn and I have all the files and I have the template available here. That is why I'm in the code, I use, XML, storage to play provider and XML I'm, sorry, storage, error, storage, connector for files and finally apply prevalently plate method, execute the process and this applied information.

A

That's the delegate which notifies the clients, the browser's, about the progress it is possible. Why and this notify progress, not if I progress method if we go and see how it looks like this, just I would say two liners two liner.

A

The first line is to create and establish connection to our wasting our hub, so I use just built-in nice beaded net classes like hub connection builder, and what is very important here is this generate access, token method because, as we saw, our hub has authorized attribute and we set up GWT our authentication in our configure services. That is why it is very important to provide valid authentication so here for authentication, I use either ID up registration again.

A

If you go and see the and the user, ID I've added the up registration here and I use client, ID and client secret in order to in order to generate an access, GWT access, token using Emma's, a dotnet library using Russian to in points and I generated talking for my client itself. That is why I use this scope and, finally, the second line is to help connection sound.async example. Here: I specified mattify method, so how it works. It sends these state, this provisioning state.

A

Basically, that's message the progress and the total steps and at the very end it will hit here and finally, all our clients. The browser will receive this. This you message about your progress and new state.

A

Ok, and so this is the the job itself again for authentication against SharePoint I use the gate based approach.

A

You can use any other option. For example, you can use SharePoint app registration for authentication, but as I have as.

B

A

Have the ID registration here then I decided to use the same ID registration. That is why, if you, if you go to API permissions, then you see that I've added full control scope for for SharePoint, okay and finally, let's go and see the our client side part the SharePoint framework application customizer.

A

This is the react component I used to display this progress, that just a few elements and the key thing here is again. This I see our hub connection builder and hub connection. These are classes from SP SP dotnet signal are gorgeous module and here again, I used access token factor in order to to generate the valid GWT token. So if you go and see how it works, I use built in as perfect a detergent provider in order to generate the access token and the client ID it is.

A

It comes from constants here, that's the same client ID, I use for my signal, our hub application registration. So it's wrong from here and finally, and this connection I have exactly three methods the same way as our hub here: I have connection on notify on completed and own initial state. So this callbacks they handle different events coming from the server from single our hub. Okay and finally, if you go and see the user interface, it says that the site is fully provisioned.

A

Now we can refresh it and finally, we will see the updated website with based on the drone template the template. I use. It is under it's under github repository s/pdif provisioning templates, I use controller drawn random website as a base for for what is demo mochi, so yeah I think this. Is it from my side.

C

Thank you, sir kay. Don't disconnect okay, because I want to ask few questions and let's talk about some of the things really really cool solution and and thanks for clarifying the bits and pieces, because I think that's highly helpful for people to understand how would I adapt these things as well now a flow versus logic app.

C

It was a good point with two debts, and this is over super clear for you, because you thought about that on as well, but in the side designs and you can activate either a Microsoft automate, sorry, power, automate and I flow inside of power automate, it's used to be micro flow or you can activate a logic app and logic. App is basically behind us to Microsoft flow as well or or automate whatever. We call these things nowadays and so, but and the difference like you said, is really about licensing. They say they request.

C

Licensing in the Microsoft power ultimate is a premium license, and that means that there's a licensing impact on it and did we lose surgery completely. No.

A

B

C

Because I would have asked you'd be point, something that's fine! That's fine now, but key point they're gonna understand is obviously, if you use a logic app and then the logic app has a cost impact as well, but it's not necessarily similar across the impact as using the power automate. So it's one of those things where we know mated it's a design decision.

C

You need to understand, as the customer already have a license on the poor automate and and if they need to have a license, how much the cost impact versus what will be the cost impact of logic. App. Have you answer start of curiosity on your case sure Jay? Have you done any cost estimate on on how much the part of the logic app would cost in a normal scenario, or has anybody in the call and made any any estimates on that? No.

A

Actually I haven't compared because.

C

Obviously that that's a really interesting discussion, point and curious if somebody actually has any experiences on that, but no immediate actions, at least on Jan. Now the the second thing and the second thing what I wanted to actually kind of a mention. In your case the the toolbar was super settle and but to be fair, like you pointed out as well sorry, okay, you could actually almost do a full screen overlay, which is saying hey the site is not ready.

C

We are still progressing and doing stuff, so you don't actually need to be super small and settle on the under messaging and it is a design decision absolutely and inside of Microsoft. Initially we didn't actually tell the end-user when a site design was still applying. We didn't actually tell that it's still applying and then that freaked out people. So that's why the panel model came to be as a new version into site designs and we implemented that there and you could implement your custom panel as well.

C

So in this case it was a small header, but again it could be much more visible indication as well, and then there was the one thing which I wanted to just pinpoint: the site: design added the application of customizer on the site level. The application customized I was deployed using a tenant scope, deployment option so and that was then available for all of the sites, but basically in the site designs we just added the application customers as the user custom and using user custom action entry.

C

That's what it basically meant on the JSON definition and then in the code we'll remove that. So that way, that indication was no longer relevant. A quite nice pattern actually of making things happen. So super nice implementation and then a final piece. Maybe it has to talk about this one as well in ignite and plastic night in the conferences we demoed the fluid framework, which actually does provide similar kind of capabilities whenever we will ship it as signal or it is designed for other things as well.

C

So fluid framework will be used in the future for document collaboration, co-authoring scenarios and all of that- and you could actually use the fluid framework way of communicating between things. But but again, a signal are is one of the. How would I but industry, standards and ways of doing these kind of things as well? So it's it's pretty nice implantation any any other learnings from your site, search a related on the on the design. Was this just a a experiment which we wanted to do, or was this a customer engagement.

A

I used I used are in my previous projects, but they were for just regular I spirit net with SharePoint its. We do net separate about not generated to SharePoint, and this demo is more like experiment on how you can implement all the clinics, valid authentication right.

B

A

Authentication from both sides from as Perfect's from etc, so yeah yeah, yeah.

C

Makes makes perfect sense, but really it is pretty clean. It is it's also open source. It is available in github, so it's it's quite nice set up on on showing the pattern and that's what we always want to do within the community call so explaining how to achieve certain things using the demo, so really cool cool setup.

C

Now, actually there was a message. One thing interesting: they call a manual to call a manual flow from the site is a necessity. They, where prepares no premium connected, there is to call a manual flow or site design. Now we're not following right: Rica, you need to explain, can you can I go unmute it at will later on that one? That is an interesting discussion point because we'd still have few minutes to talk about so.

B

So, basically, you can call a manual the manual flow you can put the URL of the manual flow on the web design call for the flow itself. You cannot put the you, cannot it's not a premium connector, so you can. You can use it instead of the HTTP request.

C

That's clever and that's yeah, it's a really really good point as well, and then it really depends again. But but to be fair, it really depends on what your manner of flow is doing, because I think adding a message to the storage. Key is a premier premium connector unless I'm completely mistaken, I, don't know I'm not up flow.

B

C

Would get your institution to flow, but then how do we get that to do a sure function? That's all so, using the the logic, app is definitely an option there as well, but again cost structure is different. It's not based on the new lion whose license is based on the consumption of the logic app and haven't done any any actual investigations on there on the constructions. There.