Microsoft 365 Community Community Demos, 18 Jan 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Deep dive on Viva Connections Adaptive Card Extension development – State management

Description

In this 12-minute developer focused demo – Patrick Rodgers answers what is State in SPFx ACEs and how to use State in SPFx apps to maximize initial load times, UI performance, and limit network traffic. State is shared across all views in SPFx ACES. Be mindful of tradeoffs between state and storage. Load as little as you need into State at any given time but load enough to optimize network calls. Cache previous states. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 18, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• PnP/PnPjs Library - @pnp/odata/caching | https://pnp.github.io/pnpjs/odata/caching/
• Samples - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Demo - State referenced in Introduction to Adaptive Card Extensions (ACEs) for Microsoft Viva Connections – Paolo Pialorsi (PiaSys) | @PaoloPia

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

So uh what we're gonna talk about today is uh state in spfx uh aces and there's been a few questions. I've heard from folks on state there's a little bit of uh confusion, maybe around state and how it relates to react state, because the methods you call such as set state are very similar. So one thing in react you can think about is every component in react: can have a state of its own, so it can internalize its own state. You don't have to have a state and react.

A

You can work without a state, but you can always have a state in a component in react and in spfx aces the state is shared across all of the card views or quick views inside that ace, so every view shares the same state now. The reason for that is kind of like react is a much bigger thing. It's made to model potentially entire websites, much more complex systems, whereas aces are more designed conceptually around a single user experience at the time where it makes sense to have a single state.

A

So something like a code that check-in checking the weather, reserving a desk in an office or booking a flight. You know single interactions. That typically, would have uh you know, understandably this idea of a shared state. So let's real quick, look at a demo here, and uh so I'm going to refresh this page real, quick and you'll see when this first loads bump it into preview. It says zero items found and we'll just wait. A little bit now, there's 10 items found and I'm going to click on the quick view and you'll see.

A

I get this beautiful quickview card here and it said loading and now I get this information here and I've got some buttons. I can go previous next, so but so loading again. Why are we loading there? Why don't? We just have that stuff ready. So this idea of state is important to understand everything in state is in memory, so you only want to load what you need at any given time.

A

So, let's uh looking at that, then we'll come back to that decrypt button here in a second, but I want to jump into some code. So this is a simple ace extension uh that is more or less boilerplate, except for a couple of things. I've updated the state here to have a collection of items that are of this type up here with an id a title and details, and then an active index number, that's which one I'm showing on that quick view uh at any time.

A

Right and I'm gonna come down here and we always need to establish an initial state and our initial state is always going to be nothing right. It might be something you might could load something from uh cash.

A

I think I apologize for my voice, I'm coming on for really bad uh cold, but the state you can load something from local storage things like that, but we're going to start off with a state of no items and our active index is negative, one indicating to our code that you know nothing is or could be really selected right now and then we're gonna ignore this for a second and we're.

B

Gonna do our normal.

A

uh Card view setup or quickview navigator setup. The rest of this is all the boilerplate you get when you start up a solution, and then I want to real quick before I talk about that code. Come to our card view and our card view is the uh the cardview you get right when you scaffold it except I've just updated it here to reference this gut state items link and all we're saying is hey.

A

We found the length of the items array and you saw that started out at 0 and then updated to 10, because we actually have 10 items in that list. That's backing this this example and we come up here and so what we do is uh we set our initial state and then this other stuff happens. But what we do is delay here just so we can see uh the asynchronous effects of updating the ui in the flow, but we're going to get this data out of sharepoint.

A

uh This is just some stuff to ensure we've got the sample list, we're going to get our items and then we're going to set the state with those items and then we're checking to see. If we got some items uh you know juggle our active index there. We just want to set those items so real, quick. Let's look at the get items method here, and so this is the case of where we only want to load what we need into state at any given time. uh But we want to load enough.

A

You know to sort of optimize. Our network calls right, so we want to load as little as we can, but just enough. So it's a balancing act and I encourage you, as you're, building your applications to really think about that and think about those trade-offs of where you can keep stuff in state keep stuff, perhaps in local storage or session storage, uh to reduce network calls, but then for things that are very large only request.

A

Those via network calls when it makes sense, and so what we're doing is we're getting the top 20 and we're selecting only the title and the id in this example. uh This sample details is a text field, uh but it could be potentially a hundred other fields on a record right in a list, or uh you know a bunch of user data out of graph or something out of a sql database. That potentially has you know thousands of data points to it. So we only want to load the details when we need the details.

A

The other thing we're doing here is we're caching in local storage, and this is another great uh capability. You should take care, take advantage of when you're doing uh any kind of spf x programming, whether it's web parts or whether it's aces store things that make sense to store in local storage uh or session storage. Whichever is appropriate for your application, but make use of casting as much as you can. I know graph library supports.

A

Caching ppgs supports caching, or you can just do the casting on your own accessing the local or session session storage directly. So we're.

B

Going to get our.

A

Items we're going to stick in our local storage and uh we're gonna prepend uh this little.

A

uh You know results transform into our uh stuff here and then we're gonna get our items back out, and uh so we can see we get our items, but when we get those items, another very interesting capability of state- and this is very similar to react very similar to sorry similar to react- works the same as you might imagine in aces where, when you set the state, the application is going to update the ui for things that depend on that state.

A

So the only thing we've done here is set the state and because, in our card view we reference the state when we refresh our page.

A

We're going to get our zero items and then our 10 items very quickly, and so this updates with no further code on our part, so you can also think of state a little bit like event based program control. Updating state causes your application to do things or to change an updated ui. So it's another important thing to think about when you're thinking about state the next piece of state I want to talk about. Is this idea of only loading things as you need them?

A

If we look at the quick view, we only want to load these details when an item is selected, we default to selecting the first item item 0 index zero, um but then we have previous and next buttons here uh that you all have seen paging before in programming, no reason to go into depth there we're only gonna load, those details and uh we're not gonna store those details uh in local storage or session storage, though we could, but again that's thinking about the trade-offs storing stuff in memory storing stuff in the browser on disk.

A

Essentially, uh you know because there's trade-off times between reading lots of data off the disk as well versus network requests, so things to really think about with state, but we're going to update our item and because the way javascript works, we can get our items. We can get the message out of those items we can set that message details once we get them and then we can set the state of that entire collection again and uh we'll.

A

Actually, because of uh you know the way references work and such in javascript we'll have updated the state again and we're able to page through our items using the state. So we'll come back and we will look at that. Real quick.

A

B

Go to our quick.

A

View we're loading there and these are artificial delays. I've put in there, so this would be a lot faster, but I've put a little three second delay in there. So we can click through. We can see that's loading right. We click through. We can see that's loading, um but when we go back because we're updating the state, we don't need to load it again.

A

We've got that value in memory, so we've loaded it only when we need it, but we've held on to it in case the user wants to go back and forth through the data and if we go to the next one you know we can see we're making those web calls there and so just uh to show you kind of a little bit of the casting behind the scenes. We'll go to the network. Tab we'll go to our quick view. uh We've made no requests there uh we're loading here and we get our item there.

A

If we go previous, nothing happens because we've got our value in state. Previous, nothing happened still in state, five is in state and then six will show up because it was not in state, and so we get our values there, and so that's a quick overview of state and one thing I really want to kind of sort of remind you of is state. Is this shared idea inside uh spfx aces, so all of the views, whether it's a quick view or a card view?

A

Even if you have multiple quick views, that state is shared within the context of that ace, but you can also expand your thinking of state to also be stated as what's stored in local or session storage.

A

State is also what view is currently being shown shown. You could have multiple card views, multiple, quick views, which one is being shown. That's conceptually part of your state and then finally, state is also a little bit of program event based flow control when.

B

A

The state things in the ui will update and change, so you can think about how the user interaction is going to change the ui and back and forth with updating state.

A

Some things to be careful of you don't want to update state too often you don't want to update state in a loop right, so you might update state that triggers another thing that goes and updates the state that somehow gets you in a loop there, something to be careful of there. So uh you know keep those things in mind when you're dealing with uh with state.

A

Finally, just uh for fun, we'll decrypt our message and uh you can see our message: there is to our rabbit agents in the field, uh who are fighting the endless battle against the horses whom we will all destroy one day, but uh so we're working hard against that, and so just uh we'll leave you with the idea of really when you're building your applications understand and think about state within your aces.

A

So you can maximize both the initial load times the ui performance of your application, as well as limit the amount of network traffic as much as possible, because you know, ultimately, all of those things come together to help build uh the performance profile of your application and state the core part of that, and so with.

B

A

I have finished under time and will pass things back over to vasa.

B

Thank you, patrick really, cool demo and great explanation on the importance of the state, and I I I love the rabbit against horses discussion as well, but uh great work uh on the regardless of the voice uh challenges, and hopefully that will get better uh for the next one as well. But thank you patrick on that. One really really cool stuff.