Microsoft 365 Community SharePoint, 15 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SPFx framework at Microsoft - Accelerator Live Update Feature

Description

In this 9-minute developer-focused demo, Daniel Turley (Avanade) invites you to see how an activity (form) created by one user is seen by other users, no page refresh needed. Content (field) updates by others are announced in your version of form by visual indicator dots courtesy of Live Update React Component. You have the option to choose best update of many for the field. Uses package called sp-list-subscription. Covers Live Updates implementation (entities and States) and React UI.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 15, 2023.

Demo Presenter
• Daniel Turley (Avanade)

Supporting materials
• Sample - Rhythm of Business Calendar | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar
• Sample - SPFx Solution Accelerator Deep Dive | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar/documentation
• AppSource - Rhythm of Business Calendar | https://appsource.microsoft.com/product/office/WA200004833
• Documentation – Get notified of changes to documents stored in a SharePoint Document Library | https://learn.microsoft.com/sharepoint/dev/spfx/subscribe-to-list-notifications

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

A

Foreign hi, my name, is Dan Turley and I'm. A full stack developer at avenard I've been working with SharePoint for over 10 years, starting with SharePoint 2010, most recently as part of the productivity Studio at Microsoft, utilizing SharePoint framework to build business apps today, I'll be presenting on the live, update, feature in our spfx solution, accelerator, but first a quick overview of the accelerator. It's a set of patterns, reusable code components and tools.

A

I created for building business apps on the SharePoint platform, has evolved over the last six years and have used it in the we've used it in the productivity Studio to build a dozen business apps. Over that time, the accelerator is open source and we've published a complete app to demonstrate its features. The SharePoint framework sample is named, react rhythm of business calendar.

A

The accelerator has the following high-level features: we have guidelines for solution, structure, to organize your domain model, Services components and schema. We have a robust domain model with features like change, tracking validation and relationships, there's also a services framework with provided services for SharePoint list data, time zones and users and groups and more.

A

We also have Dynamic versioning of SharePoint lists for app setup and upgrade experiences. There are react components for view edit panels and dialogues. Asynchronous data live update, controls, the wizard and more. We have tooling to support development teams and environments and, last but not least, live update, ensures users are always collaborating with the latest data, and this is the feature that we'll be discussing today now I'd like to go straight into a demo, because I think it'll be easier to talk about the nuts and bolts after seeing live, update in action.

A

I'm going to share my screen all right, I have here our rhythm of business calendar app open in two windows under two different user accounts on the left is my account and on the right is Megan a test user in this tenant. First thing I want to show you is Megan, adding a new event to the calendar I'm going to do this from the right side, and then this event will appear on the left screen without me having to refresh a page or click a Reload button, I'm going to call this test event, one.

A

A

Set some values here for the refiners.

A

Okay, that's saved now we'll give it a moment here to appear on the left side, so we're using a package named SP list subscription and what this does is allow us to subscribe to changes to SharePoint lists it's using websockets instead of polling, and it's usually pretty fast, but we are relying on SharePoint to notify us when anything changes in the lists.

A

So we have this little indicator. That shows me that this is a new item. So, as part of the accelerator, we have a live update, react component where you can pass in an entity through props, and so you get to choose where you'd like to render this little indicator dot when building your UI. So I'm going to take this one step further. What I'm going to do is start editing.

A

This new event from my slide on the left and what I'm going to do is I'm going to change the title I'm going to call this sample event two and then I'm not going to save this on my screen. What I'm going to do is go back to the right side and I'm going to have Megan edit.

A

This same event and she's also going to change the title she's going to call this Showcase Event three and she's also going to change the team, because I want to show you something else in a minute and I am going to have Megan save these changes so remember: I.

A

Have this open I'm, currently editing this record in my window and Megan also, has this record open and is editing and is going to save all right, so the live update came through uh what we see in the corner that says that the record was updated if I click on this I can see. Who recently made the updates and when um now you'll notice that the title field didn't change to Showcase. Event three still has my value in there. Why is that?

A

um So this little indicator here will tell me who else has recently changed this field.

A

Now the reason was because I was also editing the field, and so, if you click this little icon, you get the pop-up, and what we see here is uh three versions of the field value. First, we see what I was editing, uh what I, what changes I made a moment ago.

A

We also see what Megan made um a minute before that, and then we also see the original value for any of us started making edits. You also have these three helpful action buttons. So I can pick any of these versions for this field.

A

So what I'm going to do is revert this to the original value test event, one now that was just a plain text field, but I also want to show you that this pop-up supports custom, rendering of the values so remember, Megan also changed the team's refiner and so I want to show the pop-up for that live update.

A

You can see she changed it to the leadership value. We can custom, render the pill with the colors for the refiners. So what I'm going to do is keep this change.

A

Now I'm going to go ahead and save this record.

A

And in a few seconds, we should see that update on Megan's screen on the right. Okay. So let's talk for a minute about how we Implement live update. So this works by extending the change tracking capabilities of the entity class. That is part of the accelerator.

A

When you define an entity such as the event entity in the rhythm of business calendar app, you define a state object which will store all the entities, internal State, and then you write simple, Getters and Setters to expose that state outside of the entity class, such as to your UI.

A

When the current user decides to make edits to an entity, we take a snapshot or a copy of that internal state so that we can compare the before and after values for each field. That's how we Implement basic change tracking now for a live update. We actually have the possibility of creating yet another copy of that internal State. We do this when SharePoint, using that SP list subscription package notifies our code, that a list item has changed.

A

So in the scenario where the current user is making edits to an entity- and another user has also made and saved edits to that same entity, we will have three versions of that internal state. The first version is the current version, which is the edits the current user is making. Second version is the snapshot version.

A

This is what is currently saved to the SharePoint list, which includes the other users recently saved changes, and the third version is called the previous version which I like to refer to as the state of the world before anybody started, making edits, and now that we are tracking these three different versions of the state, we can build UI components that can compare the values of individual Fields across each of these states, so we can show the user their current edits, along with any other edits.

A

Other people have made and the original values before anybody started making edits. How do we build a UI using live update so on the left? You'll see a live text component, and this is part of the accelerator, and this one takes an optional label the entity and the name of any property. You want to watch on that entity and you can provide a render function as a child element of the component.

A

So this is how you can custom render the display value and it automatically renders the live, update, icon next to the label and on the right you'll, see an example of a live text field.

A

We have live components built with react for every major input, control text field, toggle date, picker drop down, Etc and they're, mostly simple wrappers around the fluent UI components, so all of the regular props can be used and you should be able to easily build your own wrapper around any other controls.

A

There's even a live relationship component, which enables you to render experiences around entity relationships such as. If a child item was recently added or deleted, or even just reordered, all right- that's all I have for today. Thank you so much back to you Hugo. Thank you for your cool demo.