Microsoft 365 Community Community Demos, 29 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Managing State Across Viva Connections ACE components

Description

In this 10-minute developer focused demo – Patrick Rodgers points out previously delivered demos addresses managing “state” inside an ACE. This demo is about efficiently sharing state/data across multiple ACEs. In a card, state is updated when run a query, display returned data. Instead, store data in local storage (cache), in a shared library that can be included in many cards, web parts, Application Customizers, pages and more. Get data once, deliver faster to cards/pages. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 29, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Documentation - Using library component type in SharePoint Framework | https://docs.microsoft.com/sharepoint/dev/spfx/library-component-overview
• Repo - Sharing State Across ACEs | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-shared-state
• Docs & Videos - Search Results for: library components | https://warner.digital/?s=library+components
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions | https://youtu.be/vcSM5PUgn0I - Paolo Pialorsi (PiaSys) | @PaoloPia
• Demo - Creating engaging and dynamic Viva Connections mobile experiences | https://youtu.be/e3CUtjIwW80 – Patrick Rodgers | @mediocrebowler https://youtu.be/e3CUtjIwW80

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

We're going to talk real quick, uh extend our discussion from previous about sharing state and understanding state managing that inside aces and today we're going to talk a little bit about how we might share that state across multiple controls.

A

So a common scenario you've got common bits of data you want to get, but then multiple controls need to use that so there's more efficient patterns than having each adaptive card extension go get that data. We can actually have ways to share that data between components. The one we're going to talk about today is using library components which I think is a neat capability in sharepoint framework and something that works as well in adaptive card extensions or web parts. So once again, I've got two ace cards here.

A

On my screen and I'll remind you, you don't come to my demos for visual design points, so I've just got a couple of things here that I'll explain shortly, but a string, a length of some items, then all items dot length there and you can see both these cards are showing the same information I'm going to hit. That's not f12, that's f12.!

A

So if we go over here to the network, tab widen my browser. Okay, there we go we're going to clear this out and we're actually going to go to the application and we're going to clear out our local storage and our session storage.

A

Clear this out.

B

And go back to the network tab real quick.

A

And hit f5 and so you'll see over here in the network, tab as things load up.

B

Slowly but surely we hope things load up. Things are still loading up.

A

We'll add our cards back, making the demo a little bit harder, but you'll see. We've only run our queries one time, so we got two cards on the screen, but you can see we're only getting uh in this case. This is the one for the the 30 items and then we're actually getting uh the 6 000 items using these various queries here, but they're only getting run one time and that's kind of the key here is we want to get data once and store it, so we're actually storing this in the session storage.

A

So if we look at that, we've got.

B

There is sesame storage, maybe not maybe it's not showing up in session storage.

A

I'm putting in local storage- haha sorry about that. So in local storage, here's our key, get lots of items. You can see our stuff there and we've got another key here which is actually just a generated hash value. So we've got that stuff in session storage. That's again part of our conceptual state model, so the state isn't again just what's inside the ace, it's our entire state model of the application, so we're using some cash in there and local storage to make things a little bit more efficient.

A

Let's have a look at how all that's actually working. So here's our two adaptive card extensions and just to real, quick, we'll look at the first one and uh up at the top we're importing a function called bind data lib! Don't worry about what that does. Quite yet from ace data broker. That's the name of our shared library, extension and down here we're getting that library by binding that data lib. Remember a sharepoint framework.

A

You want to base everything off the local context that tells you where, in the world you are rendering gives you all the information you need. So you don't need to make any assumptions about the environment and then we're doing a couple of things. We're calling this get string method here we're calling the get string method here and then we call the getstring method again here, and I just want to point out that all these strings are the same and that'll be important in just a second.

A

The other thing we're doing is we're loading up some items using a method here on the library uh that we get back and we're calling this other method on you've seen methods get called before it's very exciting. We get all the items and then we're seeing items.length there and we're seeing all items.length there and that's showing you how we're getting the ui updated and what we're doing.

A

If we look at the second ace, you will see the exact same code, so no difference here in the code, nothing to highlight other than to show you we're calling the exact same methods from the exact same imported library, in both ace components. Also important to note these aces could be sharepoint framework web parts. They could be sharepoint framework application customizers.

A

We could share these shared libraries across all those various solutions.

A

So let's look, this is uh in the project as the ace project and the library project library projects need to be their own project, so I've got my own project here and I'll drop the link a little bit uh to the documentation on how to get that all set up, but you'll see here in the library project a little bit more of.

A

What's going on so we've got setting up in this case we're set up our pnp js stuff, but this would be true of using any sdks the graph sdk, any other sdks you might be using even for your independent apis or your home, developed np apis would all work exactly the same way. So you can set this up in the library component once and then we've got a couple of things.

A

I wanted to highlight again this random string here, so we get that once and we get that string and we set it here in what is conceptually a module. This is our ace data broker library.ts, which is a module, so we're getting that string once and you can see. No matter how many times we called that method, we're always getting the exact same random string back and what that tells us is something really cool. We're loading, this shared library once on the page.

A

So we could actually use this library to help us share some state coordinate between our web parts. So we have web part messaging. We can do a lot of different stuff with that idea. We're setting up some storage, that's what we're going to use to communicate with local storage, and this is just some typescript to expand our pnp js spfi interface, there just to add our methods and then there's our bind datalip. So this is actually just getting that context and doing some setup for the p and p j s.

A

uh But then we've got our methods here. So here's get lots of items and we've got a list here. We have a function called uh get all and uh in in pnpjs, that's going to get all the items from the list so we're getting like 6400 and some that's a lot to do so. We only want to do that uh once right as few times as we can and we're using our pmpjs storage to actually get or put that in the cache, and we got a cache key uh there.

A

So nice and easy way to coordinate that again similar patterns for lots of different sdks out there in the world and we're also doing some blocking so we're. Seeing. If we have a running query, we want to stop uh so these aces are going to load randomly right. You can't ever count on a certain ace to load first or second, so we have to sort of asynchronously block and we're doing that uh with promises in this case.

A

So we're we're blocking on our running promise, we're getting something I just in this sample called a resolvable that gives us a promise and the the function to actually resolve that promise, and then we uh resolve that down here in the finally and then we uh return our results here out of this function.

A

The power of this is because we're using the caching if we've already blocked and we've made the request it's going to go through the first time, put it in the cache and when we unblock here the second time through it's going to get it from the cache and that's why we only saw one request go out here: we've got get items cached, uh that's the second method.

A

We had just to show sort of a different technique, uh we're using the pnpgs caching in here and we're using a thing I did just for this demo called blocking that sort of is going to block that call and mimic the functionality here just inside our pnpgs tool chain. We won't go into due to much detail there. You can check it out in the sample, but just another approach there and we're using top to only get uh 20 items.

A

I think in the in the actual ace we ask for 30., uh but just a way to do it and again using the cache uh using the browser cache in node. This could be, uh you know various tons of different caching technologies there, but conceptually the same idea through this uh library component. We're able to share these methods across the aces and only get the data once and you can see here in this get string we're just returning that string that we created up here and set once and again. That shows us.

A

This library is only getting used once so. It gives you a lot of power to come back and do stuff there. So you can certainly look at that and if we come back to our thing here, we've got the stuff in the cache. It might be expired at this point, but just to highlight the advantage here. If we come to our network tab, we did have to make those requests again. They were expired, but if we refresh the page we'll get our data back and we saw no network requests related to getting those items.

A

So all of that makes our page much more responsive, much faster, helps, reduce some cogs on the server reduces chances of throttling across your service. So it's a really great way uh if you're deploying stuff within your company uh within your if you're an isv. This is another great pattern to look at, but it allows you to coordinate across aces web parts, application customizers across pages. So if you're, using local storage or session storage, you can actually coordinate this across page loads.

A

So, for example, uh you know latest news might update every 30 minutes load that once into local storage, save it lots of different patterns to use there, but using those libraries you can definitely. You know have that across all of your different components uh and and coordinate your requests and make your requests. uh You know very intelligently and carefully to ensure you're managing load properly.

A

So that's a nice quick uh summary again of how to share state across components extending our discussion on state so I'll pass things off to brian, who, I think, is going to pass things off to seb I'll, look at the questions in the chat and try and get those answered, and then I will uh also paste in right now. A link to uh the spfx library component tutorial definitely check that out. uh That's how we were able to build this sample so thanks everybody for having me back and look forward to talking to you soon.

C

Thank you so much patrick, I'm surprised you're not out of breath because it sounded like you just had a long stream of awesome content there in demos. So thank you so much for sharing all this great stuff.