Microsoft 365 Community Community Demos, 12 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: My Lists Notifications SPFx extensions

Description

In this 15-minute developer-focused demo, Hugo Bernier and João Mendes show off a new application extension that allows a user to receive activity notifications from selected lists or libraries – i.e., add/delete/modify document in library, approval completed, etc. Easily view and clear notifications. Updates screen only when there is new notification. Uses Socket.io service courtesy of Microsoft Graph to manage list subscriptions and notifications and then uses getListActivities to get particulars on the activity. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 12, 2021.

Demo Presenters:
• Hugo Bernier (Microsoft) | @bernierh
• João Mendes (Storm Technology) | @joaojmendes

Supporting materials:
• Sample - My Lists Notifications | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-my-lists-notifications
• Article - MY LISTS NOTIFICATIONS | https://joaojmendes.com/2021/07/11/my-lists-notifications/

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

My name is hugo bernier, uh but I am here today to present to you a web part sample or an extension sample by joao mendez called my list. Notifications joao is on vacation and uh you know as much as I begged for him to just you know come out of his vacation to do the presentation.

A

uh He just preferred that I do the presentation for him. So if you love what he did, it's all joao's uh hard work. uh If you don't like what I'm presenting it's all my fault, all right. So uh with that in mind, let's take a look at what he's done.

A

So one of the things that uh that's kind of like on brand for joao, is he likes to design user interfaces that look really clean and look like they're integrated as part of sharepoint and office.

A

Here's an example of this. If I asked you, where is uh the component that joao was designed like? Where is it on this on this screen? You probably would have a hard time figuring it out, but if we zoom in- and you take a look at this thing right here- that's actually the component that draws design, and he always does this. He always does really kind of clean interfaces that that again they don't stick out. You don't go like. Oh, this is custom. It was built by you know a bad developer.

A

It always looks professional and clean, and that goes a long way because you want to make sure your users uh don't feel like they have to learn a whole new user interface when they're using your web parts and your extensions uh we'll talk a little bit later about whether you should be uh making changes to these areas of of a web part or a page, but that's for a bit later, all right now, when you click on this, uh we'll show you in a real demo what it does, but it opens this my list notification, which actually keeps track of all the notifications, all the things that have happened in the lists that you have subscribed to.

A

So you know here's an example of of a whole bunch of notifications as taken from the screenshots that jurors provided, but let me show you a real demo instead, all right.

A

So if I switch to my personal sharepoint and I have the notif the thing installed here- and I have here a list of uh libraries and what I'm going to do is I'm going to go and click on this and it says: well, you have notifications because I haven't created the subscription, yet let me go create a subscription and let me go search for and let's just say, documents right. um So now what I've done is I've actually created a subscription to a document or to the document library?

A

Let me close this and now I want to make it clear uh what I'm going to be showing you here, I'm not using magic shortcut keys. I'm not you know using uh videos or anything like this. This is actually happening in real time. I'm going to go to this library and I'm going to upload some files um there, david david, will appreciate that. I use this image for him.

A

uh I upload an image here and it says it's uploaded right and look what happened immediately. I didn't do anything. I didn't refresh the screen immediately. My notifications kicked in before I do another. uh I go look at those notifications. Let me just add there we go another picture and I'll just go. Do this and let's see what happens here now, this is the part where I might have to distract you with some things. No, it's actually pretty fast, all right.

A

So once the notification has been received, you'll actually notice that I actually get a message here. So the same thing would happen if I was deleting a document to from a from a list that I'm subscribing to uh if I was creating modifying. Actually let me just go, modify a document and show you what I mean.

A

Let me just go right here, I'm going to edit the metadata and this is going to be called dog and I just want to make sure I'm actually editing the right picture, because that would be insulting to david. There you go and there so I just made a change to the metadata and eventually what should happen if the demo gods are with me is. I should get a notification there you go.

A

I get a notification that something's changed, so that's kind of cool, it's not intrusive right and it's a great way for people to stay up to date. With what's going on so again, I can go here. I can actually go click on the the actual documents to open them.

A

I can remove the notifications or I can clear all notifications, so that's pretty much what the extension does and because it's an extension you can set it up so that it's automatically deployed to all pages in a modern site, and you can also set it up, so it gets deployed to every site collection in your tenant. If you want to very cool, it's not like you have to install a web part or or do anything like that, all right, so all right! So how do you? How does it work right?

A

um Probably the worst thing to do when you want to do these kinds of interface is to do the equivalent of like, if you're waiting for someone to call you, you don't pick up your phone and go hello and then oh nobody. You know nobody called I'm just gonna wait and then 30 seconds later, I'm going to pick up my phone say hello right.

A

No, that's not how these types of communications work same thing here, we're not using a a timeout or a loop or anything like that to actually see whether there's been changes, we're actually using uh notifications to do that, and just like when your phone rings. You normally answer except. If it's me I don't ever answer my phone, but when your phone rings, you answer the phone and only when your phone rings. You answer your phone uh same thing here.

A

Only when there's a notification that happens, do you need to actually update the screen to actually say: hey, there's a new notification, so it's really magic. Actually, it's not really magic. It's something called socket.io!

A

So, what's socket.io, uh I apologize in advance. If I butcher this, I'm trying to compress a lot of information in 15 minutes but uh suck at I o. Basically imagine if you had a server and then you had a what we'll call a client so like and and maybe you're writing a chat, application right socket.io the example is always chats. So let's just use that. Let's pretend you're writing a chat application.

A

You are the client and you basically log in uh to teams or whatever chat application. You want to use- and you say, hey mr server, uh I'm ready anytime. You have any messages for me. Please let me know right, but also, if I want to send a message, I can just send a message to uh to other clients. So all the other clients do the same thing: everybody that that wants to receive the notifications log in and they all notify the server the socket I o server to say: hey.

A

If you have any messages, please let me know so what happens when one of the clients, like the one that's highlighted here, sends a message to the server. Then the server basically notifies it broadcasts to all the clients that have described or subscribed to this notification and all the clients have received a message. That's like the super quick version of what socket.io works it does now. I you're going to you know, come into my office and say hugo.

A

You know why would I implement a server and I would say well, first of all get out of my house because my office is in my house, but you don't need to implement a server because behind the scenes, microsoft and the graph team are actually implementing a socket. I o service that you can use to actually send notifications to your clients. So really all we need to worry about is implementing the client, which gets the notifications and subscribes to notifications.

A

Let's look at the code and by the way, if you have any questions, I can't see the chat feel free to interrupt me or you know, patrick vesa david. If you wanted to interrupt me, if there's questions, um I will do my best to ignore them all right. So if we look at the uh at the code, there's lots of code here, but one of the big things that we do in in the code here that joao does is in his use, ms graph api component.

A

He actually has this thing called get list of socket ios and what he does. He actually makes a graph call uh that goes to uh the the site, the lists the list id or in the case like in the case that I use, I use my document list and then it looks at the subscriptions for that list, and it looks specifically at the socket io subscriptions. This is not magic.

A

This is actually built in in graph behind the scene, and so it allows you to get all the subscriptions to a list, but it also allows you to reconnect those subscriptions using socket io now within his use.

A

Socket io component he's got this magical thing where he uses socket.io dash client, which is a library that makes everything a lot easier for you to connect the socket io and within that he's got just a little function or a hook that is called use, socket io, which really gets a notification that is passed or a handler that gets passed and the handler just takes care of once it's actually received all the notifications.

A

In this case we get a notification on when we get connected and we get a notification when we actually receive a notification from from a library. We then call the notification handler that was passed in now. Where do we pass in this notification handler? Well, there's a my notification uh component that actually just does that right here we say use socket and we pass it a handle notification, and so that's actually how we're able to subscribe to socket notifications and I'll show you how we create those socket notifications very shortly.

A

But let's look at what we do when we handle these notifications when we handle the notifications, we basically just uh do a little call back function uh so that we can do all this stuff asynchronously and we don't we're not pausing the screen or making the screen less responsive.

A

We actually just go get the list of notifications uh and for each notification we actually get the site information, we get the list information and we get the list of activities, and then we just put that in a nice big array of activities so that we can render it later and then um I'm not sure why I had that highlighted there you go and so on. If we go back to the use ms graph api component again so on the use, ms graph api, we do the get list of activities.

A

How do we get the list of activities? Because the first thing we did so far, it was using socket io to actually get notified, that we have a list of activities, but we're not getting the list of activities when we do get list of activities. We actually go to that list and we say: hey show me what's happened since last time, and this is what we do, that we do that using the graph client and we call the get list of activities list all right, I'm gonna.

A

I need to go a little bit faster here, because I I I'm I'm eating someone else's time uh so that little clock thing door, clock bell thing with the notifications. How do we do that? Well, really it's the my notifications component and really all we do is we again. We still use socket.io.

A

We get a handler for the notifications and when, when we get a notification that says hey, you have something that needs to be displayed. We just kind of create a little stack here with a little bell and a little number. That's really all we do again we're not constantly refreshing we're not using a timer we're just getting notification all right and that list thing at the top on the side. Here is the same idea we just kind of when we get uh the notification.

A

We actually go get the list of notifications from a secret place actually, and this is actually one of the things that um alex trantev has demonstrated in the past. But what we're doing is we're actually storing the list of settings from the extension and the personalized setting for user in a appsettings.json file which is stored in the user's onedrive folder, I'm running out of time. So I'm not going to get to show you the onedrive document here, but that's a great thing.

A

It allows us to actually have kind of roaming prefer uh settings that are not stored in a cookie or are not stored in a in a session variable or anything like that. We're actually storing all that in a settings.json and we're reading all that information all right. Let's continue!

A

So when we get the badge, we actually get the navigation and we create a stack of all the badges with all the buttons uh and then all the individual notifications. That say this document was added. This document was modified, that's really all we're doing here, and then we render that in a panel that has actions for dismissing notifications and for opening things. All right, I am skipping straight through to the end of my presentation here.

A

You can actually find the code at this super long url here or you can search for ak nms, slash, spfx extensions, there's also an awesome blog post written by joao. That describes uh I'm sure much more like eloquently how he's built the solution. This solution is awesome. I strongly recommend you go, take a look at it thanks everyone for your time and thank you joao for always being awesome back to you, patrick.

B

All right, thank you, hugo, for that, a fantastic demo and explanation there very cool techniques and a very slick, implementation.