Microsoft 365 Community Viva Connections & SharePoint Framework, 23 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 23rd of February, 2023

Description

Viva Connections & SharePoint community call on February 23rd

Demos:
• Exploring the depths of undocumented admin REST API through an SPFx solution - Michaël Maillot (onepoint) | @michael_maillot
• Simplify your SPFx code with react-query - Marcin Wojciechowski (Valo) | @mgwojciech
• Building Feedback Sidebar with SPFx - Matteo Serpi (Avanade)

Releases: PnPjs Client-Side Libraries – v3.12.1, CLI for Microsoft 365 – v6.3 (beta), Microsoft Graph Developer Proxy – v0.4 (preview), v0.5.0 (beta.1), plus 5 SPFx samples.

Please see the blog post for this call for project updates, news and events details. The host of this call is Garry Trinder (Microsoft) @garrytrinder. Q&A takes place as always in chat throughout the call.

Agenda
00:00 – Intro – Garry Trinder (Microsoft) @garrytrinder
05:19 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
06:57 – PnPjs Client-Side Libraries – Patrick Rodgers (Microsoft) | @mediocrebowler
08:41 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
09:34 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
10:23 – PnP SPFx Controls – Garry Trinder (Microsoft) @garrytrinder
10:54 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
11:42 – PnP Modern Search – Garry Trinder (Microsoft) @garrytrinder
11:55 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
13:34 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
14:00 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
15:17 – Demo – Exploring the depths of undocumented admin REST API through an SPFx solution – Michaël Maillot (onepoint) | @michael_maillot
33:44 – Demo – Simplify your SPFx code with react-query – Marcin Wojciechowski (Valo) | @mgwojciech
46:49 – Demo – Building Feedback Sidebar with SPFx – Matteo Serpi (Avanade)
56:05 – Closing

Learn more
• See the full blog post for this call in the Microsoft 365 & Power Platform community blog - https://aka.ms/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform Community - http://aka.ms/community/home

A

Foreign welcome everyone to today's Riva connections and SharePoint framework. Bi-Weekly sync today is February the 23rd I am your host Gary trinder I am a cloud developer of Africa at Microsoft.

A

Today on the agenda, we have the usual latest update on the SharePoint framework. Then we're going to have a Roundup of updates across all of patterns and practices. We'll have the picture time. uh Sorry, the together mode picture time and then we'll have the uh the key events of the day. We actually have three demos today so we'll make sure that we'll get through these updates pretty quickly.

A

um Three awesome demos and also a new speaker- uh welcome Mateo, um okay, so moving on so Microsoft 365 Community is full of resources to help you build on Microsoft 365.. We have absolutely tons of community videos that can be found on the community YouTube channel. uh We also now have a brand new LinkedIn group for discussions. So if you are on LinkedIn, uh we have a brand new group uh pop along uh put in Microsoft 365 and Power Platform community in the search you will find us and you'll be able to uh request membership.

A

We'll approve that pretty quickly and then you'll be able to get in there and you'll be able to share things that you've been working on resources, ask questions and just generally chat with the rest of the community.

A

um We've also got lots of Open Source projects that we're actually going to cover with the updates on I'll quickly move uh move on. We also have a sample Gallery.

A

So if you're looking for something uh to get started, learn from and that someone a member of the community is has already built and and shared with everyone to to, to use it and learn from then check out the uh the sample, Gallery AKA, Ms, slash, Community, slash samples and if you can't remember any of these URLs or resources after the call just remember this one link, it's AKA dot, Ms, slash, Community, slash home that'll. Take you to the community homepage where you'll find links to all these different resources.

A

Let's quickly cover uh the different Community calls that we have on offer. We have the Microsoft, 365 and Power Platform weekly call. This takes place uh every Tuesday and we also have the monthly Power Platform Microsoft identity platform office. Add-Ins calls as well, and we also have the bi-weekly 365 and platform Community call as well as this call the Viva connections and SharePoint at framework call again. If you can't remember all of those URLs, you can get all of the invites from AKA Ms, slash, Community, slash calls from the uh from the main Community website.

A

Now, if you are interested in presenting to come on here and and share your knowledge and the cool things that you've been working on, then we absolutely encourage you to put your name forward. um So uh just like Mateo today become that uh that new speaker um come on here and and tell us. uh You know everything that you've been uh working on and the cool things that you've been doing.

A

So, if you are interested in doing that, um go to AKA, Ms, slash, Community, slash, request, slash, demo and you'll be able to uh to to actually submit.

A

Okay, the next Microsoft 365 and Power Platform call. So this is the the weekly uh Tuesday call. uh We have three sessions coming up, uh so we have uh Aisha bash uh who is going to cover dynamically, creating Microsoft teams meeting using uh Microsoft graph. This has been part of the uh Azure communication Services uh series, uh so this is the the next uh part of that series.

A

I will be presenting uh the second part of the team's toolkit, learn path, so I'll be covering building a bot using teams, toolkit Visual Studio code and we'll have uh David Russo, uh who will be covering remotely debug your Microsoft teams, apps from any device using vol-on, Js, uh David I, believe over to you.

B

Yes, awesome. Thank you, Gary! uh Well, friends. All these areas to contribute, you might be like not quite sure where to start sharing is caring. Has you covered? This is a program that provides Hands-On safe space guidance. What does that mean means we're going to get together in live calls not recorded, so you can ask any and all questions you'd like uh and you're, going to learn together with other passionate, like-minded individuals within the community.

B

uh We had to reschedule some things, so we got some schedules coming up for March definitely check that out, I'll be on the lookout for those who signed up and we will get you emails and invites and all that jazz uh and we absolutely look forward to continuing to collaborate with you now once you have done that, we absolutely also want to recognize you for all the amazing work that you're doing so. We've got our recognition.

B

Program powered by credly, been seeing all those awesome badges a few more going to come out in the next few days. uh We've seen the new ones for Aces CLI Powershell list formatting. The list goes on see what I did there list formatting list goes on. Yes, we want to recognize you, we do need you to opt in AK, dot, Ms, slash, Community recognition only need to do it once and we will get you taken care of love everything you're doing it's our way of saying. Thank you. Gary back to you.

A

Thank you, David, and the latest updates on SharePoint framework facer over to you, yep.

C

uh Quick updates in here first of all, today is sixth anniversary uh for SharePoint framework General availability.

C

That means almost 10th anniversary when, when we went public uh with SharePoint framework, which was on May 4th 2017, if I remember correctly, let's go to the following slide: um the growth on the usages is well growing rapidly still, and it is actually insane to watch the charge because they are going to the right direction, uh which makes us obviously happy, and that seems to indicate that developers are pretty happy with spfx, because we see a lot of a lot of submissions even on the store and the growth and usages growing uh all the time.

C

Let's go to the following slide: a quick update on the on the situation. 1.16.1 is the currently recommended version for uh production, interesting little black box uh on there, um 1.17 preview release will happen actually later today and that's probably actually Emoji or I. Don't know.

D

C

So 1.17 our preview release will happen uh today, as we get the bucketeers rolling out and 1.17 will happen within I would say end of March early April with additional updates, and there will be actually a lot of updates, also rolling on the server side. So you don't actually need to update on 1.17 to get all of these goodies which are coming out and within spring, but that's a quick update on on the timelines and what's happening there.

C

Let's go to the Erp projects.

A

Thanks racer, okay, so let's cover the open source projects. Pmp JS. uh Do you have Julie.

D

Yes, we do hello, and so we have uh a couple, a double release going on, so we did release version 3.12 on the 10th of February. uh It had some uh General fixes in it they're all on this slide. I don't have to really read them to you all.

D

uh What we did have is one of the things uh that was happening is we had the new taxonomy apis in pmp.js and what we were finding is that the ad endpoints weren't working and what we realized is that they needed a token on them and at first we thought this should just work. We should be able to just add a token to all the calls, because we have the token, uh and so we rolled that out in version 3.12..

D

Unfortunately, that is not the case, and so some people were getting the unauthorized access reception when and creating or updating items, because that token was there and it uses cookie, auth and not token auth, and all that blah blah blah. So we quickly released 3.12.1, which reverted that situation, and so that is what that release a couple days later was all about. So, just an update for you all on that uh situation. uh If you need to check out a new PR that got uh merged in you can always check out our V3 nightly builds.

D

They will have all the latest and greatest from the previous day, whatever has been merged. So this is a way to preview. Those updates before we actually do our official monthly release as usual, follow us M365 pmpjs on Twitter, and that is all I have for today. Back to you, Gary.

A

Great thanks Julie, um so we have CLI for Microsoft 365 update. We have a new 6.3 uh Beta release, uh absolutely tons of new commands, there's actually 29 commands in in this Beta release, which is quite incredible to say that we're in February uh there's a lot of commands uh and then commands across Azure ID planner purview, SharePoint, including SharePoint framework as well. So there's new additions in there. If you want to try it out, then use the app beta tags.

A

uh If you want to get that from npm or from uh Docker check out the release, notes for the full details in there, there's lots more enhancements and book fixes as well. um But if you want to keep up with all of the updates on on CLI for Microsoft 365, then please follow us on on Twitter at CLI, Microsoft 365 or get involved in the conversation in the community on Discord as well.

A

Moving on uh so we've got Microsoft graph developer proxy. So this is for testing your applications that use Microsoft 365 apis like Microsoft graph and SharePoint online, but also any API as well, because it also supports uh testing uh any API that that you've got and we don't have any updates from the last release, which was uh the 0.4 release. We have updated some of the documentation, so we've refreshed our getting started tutorial um as well. So if you've not checked out the graph developer proxy, please take a look through the tutorial give feedback.

A

If, uh if it's not that great and we'll sort that out, but we do have a new release coming next week, so uh we'll have more to share in in the next call about the V5 release.

A

uh Reusable spfx controls, Alex.

E

Thank you Gary, uh so nothing new on this slide, but we are preparing our next releases. Probably they will happen either uh tomorrow or maybe on Monday, so uh check out our Twitter account to see when the release are there. They will contain many many issues for the last like issue fixes for the last few months. I believe uh that's all I have back to you. Gary.

A

Perfect thanks Alex favorite connections, toolkit for visual studio code, Vasa.

C

Yes, nothing too Dramatical in here either we're looking into having 1.4 version a 0.4 version out and then we'll do a blog post, an announcement uh on the preview we'll we are still collecting the feedback and usage uh on the tooling um and with and releasing some set of videos pretty soon as well.

C

It's been delayed a bit because of my family vacation and all of that, but we'll get them out soon as well, but that's quickly updates, and here it's really designed for spfx development all up so even though you wouldn't be using it for Viva connection Asus, it actually does provide you a great set of capabilities as such for any SharePoint framework solution. So please test it out and provide us feedback.

A

Christoph uh PMP, modern search uh so I, don't think, there's an update on on this side, but it seems like there's lots of questions on the GitHub repository. So usage is growing, which is all great, and so, if you uh wanting to build solutions that um that use uh search uh check out the uh the PMP modern search web parts for for your solution, building needs uh PMP, spfx samples, Hugo.

F

Thank you. So we have some uh SharePoint framework samples, web parts and extensions. We have four new updates. uh One is another chat, GPD app and it's uh it was written by joao Mendes and it it is done completely different from the other sample that we had. So it's always a great example of different approaches for implementing the same thing.

F

uh Martin linstool has updated his the copy view sample to add sorting to the lists and the views and Harminder Singh has created the new sample, which is a service health for Microsoft 365., so that actually allows people to be able to look at the webpart and look at what's the status of all the Microsoft 35 services without having having to be given Global admin rights or any special rights like that, which is a great example.

F

And then we have an update on the pmp.js sample by uh bo Cameron I guess he's a new person in the community never heard of him, uh but he took a sample that was already perfect because it was written by Julie Turner and that he upgraded it to spfx 116..

F

um We welcome new samples and we now have badges for people who contribute so uh please don't hesitate to uh submit your samples and then with that, let's pass it to David for spfx Aces.

B

Awesome, thank you. Hugo I, don't have a sample from bo, uh but uh maybe one day sadness, but we do have one from Harminder Singh on OneDrive information, so really cool way to use an a show that personal information about your total size and remaining size in the state, all that good jazz. Thank you harmander. We love new samples check them out. We too have a badge for this, so definitely uh take advantage of all these opportunities. Gary back to you.

A

Fantastic, thank you and we're now at picture time. Facer.

C

Yes, uh one second one, second, one. Second, sharing the screen uh once again, selecting the right screen. Yes, I did excellent. uh There we go and we're already at to together mode uh status. Let's wait few more seconds, um so we get all of the people in the room. I will actually enable my camera as.

A

C

Now that looks now, it starts looking good humor, free seeds, free seeds, I will do the recording on that's probably maxed out now. Is that looking really good and let's do some hand of having everybody awesome, let's actually get rid of the Hugo card there excellent! Thank you for everybody for joining good to have you on a call and yes Chris. We can see your face. Thank you thanks. Everybody.

C

Thank you for joining once again awesome to have you on a call cheers.

C

Let's then go to the actual stars of today right, Gary, yep,.

A

So, let's start with the demos, so first up we have Michael. Are you ready take the screen right.

G

G

Okay, can you see my screen? Yes, all good, great Okay, so hi Ron good morning, good evening, good afternoon, wherever you are around the world under the snow um today, I'm gonna show you a sneak peek about possibilities around SharePoint, rest API, but not booze who's. We know but who's. We don't know introducing the um SharePoint undocumented admin. Rest API.

G

My name is Michael I'm, a 360 developer at one point: I live in noun France uh you can reach out on Twitter GitHub and I also have personal sites when I share some stuff.

G

So, first of all, like I said this has said: happy anniversary to sharpened framework yay, so we all know about boost West apis, we're using them since the Stone Age or almost we played with list items with sites, user contacts, permissions, apps and content types and so much more, and we always wanted to provide more to achieve more from a client-side perspective.

G

So when using tools such as PNP Powershell or CLI for Microsoft 65, we know that there is a big one, which is called the client SVC, but we also know that it's hard to play with it, since it requires a bunch of unreadable parameters, but yet we try to play with it but to go further by still playing with your browser developer console.

G

For example, you see many and many many rest API calls made by by Microsoft 65, and we we can see that there are other features that can be reachable through API such as Microsoft 365 groups, Senate, Administration and site properties, team channels, policies and many more but okay I know you are going to change.

G

You're gonna tell me that there is already some arrest API documentation, which is called Microsoft graph right right, okay, but the thing is that um to in order to to to to to explore the Microsoft graph, you need Azure ID permissions with application, dedicated context which can be unreachable or difficult uh to obtain um for some developers, depending on their context on the company on the I.T uh governance security.

G

Um This can. This can be painful to to obtain, and also it's uh it's limited to specific options uh depending on what you want to interact with. So now. Let's talk about a sharpen and Main rest, API documentation or well. Let's not talk about it, since there is currently no existing documentation, but that doesn't stop us from um digging up.

G

So I was thinking um about the use case to um to to to to get involved into those undocumented admin. Rest API um I thought about uh the scenario where I'm, an I.T guy, which works with tenant admin on a daily basis and I'm working with the sharpener license admin user interface from which I can get sites information but um I. If I want to go further into working with sites, properties, I need extra commands, so I need to use third-party tools. I need to to use command line interfaces.

G

Also, the governance can be hard when you want, for example, to have a to have a list of all the site- collection, Hub, catalogs, or to get all the external users that are um declared in some SharePoint sites.

G

And if you are working in IIT departments with uh you with tickets submitted by users which needs you to make some repetitive actions it can. It can be really painful in the long term perspective.

G

So my idea was to provide the solution that covers those uh actions that can't be available through the user interface and without using a third-party tool that way I can take advantage of the those the undocumented rest apis uh without any back-end applications and with the current user context. So let's have a demo about this here.

G

I'm in my spfx teams web part app yeah, that's a bunch of buzzwords in it, but anyway, um I got this user interface when I can have access to all my sites that exist on my tenants and also my what I call the special sites with which are, for example, the redirect sites. When you have a renamed when you rename a sharpensite URL I can have also my the point. Publishing Hub I can have my internet app catalog here and um I.

G

Have my templates I have the information if it's a group connected site or not, which okay? This is something that is already available in the native user interface. But what what is not available is the information.

G

If my this site collection has the app the site collection, app, catalog enabled which here's the case for this site here, for example, um I also have the information about which site is currently configured as my home sites, and also a bunch of extra options here that available that are available or not, depending on the site's, uh the the site um targeted site. Sorry so, for example, um I can decide to uh State set a site as uh read-only, for example. So here, uh if I take my this site and decided to lock it.

G

Okay, bye, my site is supposed to be locked. This is to be in a reasonably state, so here, for example, I I can edit. My page I can add a new app new page if I just make a refresh here now my site is Unwritten States, and you have also this beautiful message bar that states that it's it has been. It has been updated as recently um so so. This is. This is something that is interesting uh from my perspective, but which is not available uh from the from the user interface.

G

I can also decide to hide the search bar, because you can have a specific need from from some users that in some company that for which they are using another search, uh search bar or another search engine, the other than Microsoft search, yes, it exists and I can also decide to block the file. Downloads and I can also have access to some extra options here, like, for example, um I can decide if I want to to disable the comments on site Pages, which is only available, for example, for the site for the force communication sites.

G

uh Also, if I want to set this site as a home site here, I can decide to disable the the the the the the options to run the flow, the power automate flows and also to disable the sharing capabilities, but only for this, the one side- um and this is this- is pretty interesting.

G

um Furthermore, I can, through always through uh admin rest apis I can handle the CDN, for example, which currently doesn't have an user interface, even if the private CDN will be handled by Microsoft in in the short term. um It's it's still an option that is available. I can also decide to add a new origin. For example, let's say that I want to add a master page.

G

Origin I have also the state of my lcdn, because it can. It takes some time to be fully enabled. So this is so. This is something that I wanted to to to provide as an extra option. I can also handle the uh organization themes.

G

um For example, um I I can add a new new theme with color palettes, as you can see I'm not using interface guy developer. So it's pretty ugly, but you did this. This. Can the idea was to give you a sneak peek about what you can achieve uh with um with with just a few few lines of code and apis?

G

um Of course, I can decide to edit my my theme or add add a new one here wow, which are available. Then, when you want to change the look of a site you have access to. These themes are organization teams and finally, I can add also my external users, which is um typically um an interface that is only available through the M365 admin Center. But here from sharpen online admin, rest API, you can access to those ex to to this feature.

G

So now, let's have a look at the code, so here I mean uh my web part definition definition file, which is called admin SPO web part web part yeah. The name is those is brand, is bring by the teams. Toolkit generator. Thank you um anyway, in my on init method, I'm uh creating two contexts: the um from with pnp.js, um which is declared here.

G

The first is with the current spfx context, and the second one is with some with um with Azure ID and MSL 1.0, because this is currently this version that is supported by pen, pgs and I, admit that I a little bit lied to you, because for some endpoints uh you have to request.

G

Some endpoints can only be requested through the um sharpen online admin.

G

Url I'll show you a little bit later, but uh that's why I uh declared two contexts so once uh everything is declared we're going to the main report here, uh which all only consists in the um in the Declaration of my main components through before, like, for example, the sites uh components which, when, when loaded I'm loading, my all my sites, but as you can see here, I've also loaded on in my in my console log, um all the available site templates, but also the existed environments, power-ups environment. Sorry, but here for my need.

G

I wanted to get all the site collection, app, catalog, so I'm going to uh request a search query with with this information and also getting the site properties for my SharePoint sites.

G

With this method, and uh once everything is ready, I got I'm I'm designing my table uh my sites table with all my extra options that I showed you before, like, for example, how to set a site as read-only here and for which I'm uh I'm, sending a site property and calling a genetic method which is called update, site properties and which um just calls a generic method, which is called sites where, from the tenant endpoints and with the site ID as a property I'm just sending the the site properties that I want to to to to update.

G

So now, if I, if I, want to uh block down block the download, the file downloads is, is pretty pretty much the same. And now, if I wanted to uh access to my uh extra options like, for example, set site as a home site here, a demo action components.

G

um We got some properties depending on the site, template if it's, uh if it's a communication site. So, for example, I can disable the comments on the side on side, Pages or uh or set a site as a home site. In any case, when I want to update site properties. I refer to this generic beta that I just showed you before and to set the site as a home site I'm going to work with the SPH sites, endpoints, which provides me a method to update a site as a home site. This method.

G

This endpoint also provide me the current home site for my tenants um and to uh to finish. I've got the create group panel here, which, um which uh request a group name, an alias and a parameter to state.

G

If the group is public or not, this is the case when I want to create a group for um a SharePoint team site, modern team site, which is not group connected, so I'm, calling the create group site method for new group site manager endpoints and send these three parameters, and that's it for the demo just uh work overview of some arrow that I met when I testing my meth, my my some endpoints I got, the authentication method is dotted out. I got the method. Operation is not implemented so, but it's a it's available anyway.

G

I got the specified method is not supported, but it's and again it's it was it's something that is available. I got the optional problems, which is not supposed but available as a parameter and I got this special one. The requested operations part of an experimental feature that is not supported in the current environment, which is what what I wanted to get the the query get on sites uh from the tennis Administration tenant endpoints. So maybe it's a new feature to come because it gets on sites.

G

I, don't know so a few examples of methods that are uh that you can query that that are available. You can. You have to create group that I showed before you had the site, free name jobs which, which is called when you want to rename a site URL you have to get available tax for sites into which is related to the compliance Center.

G

You can validate to group name uh through the ideas before creating it. With this method, you can get the members of Avengers 65 group. You can get the configuration of two of your Viva dashboard. You can get to recent list. You can have statues if you create a site as a parameter. Is a communication site or not, and you have many many more. So what helped me to achieve this so I I use.

G

Of course, the developer console I also make many requests with the postman uh through, with the access token, the sharpen access token that I got through PNP Powershell, but also deformed digest value object from the SP page context, info JavaScript object and a lot of patients.

G

So to uh to to finish um most comments, your only works in post requests and then for some comments. They only work with the X request, digest header and some others only works with the um admin and uh URL and some others request. The metadata object uh specified in the payload and, of course, all of these options depends on the API response, and that's it here.

G

What's really at me, um you have to sharpen rest API metadata Explorer, which was provided by Sega, which is a really really awesome, uh interface that um that that that um display all the um objects, all the endpoints available and also the um admin points provided by the pen pgs and my uh the repo for this, the the the the app that I use for my demo and sorry to take a little bit time. Thank you.

C

Thank you, Michael I will jump in and just remind everybody that any API which is not documented is not supported by Microsoft. So, yes, these are good exercises and and there's a lot of things where an apis which are not unfortunately, exposed for third party.

C

um You can call them, but they might be actually get updated without any further notice, because, if they're not documented, that means that they are not intended to be used externally, but there's a lot of things, of course, from these apis, which we can learn and also create reminder for Microsoft on on hey, we need this apis. We need these capabilities for our Solutions anyway, sorry for jumping there uh Michael uh sorry uh Morrison. You are next on the line right.

A

H

And because you know unsupported API is topic extremely close to my heart. I I have to point out one thing, because I've seen it was missing from what helped you on every tenant. You have this magical thing called API, slash metadata and, as you can see, this is an absolute huge Anonymous xml5, which defines everything you can use in API.

H

The same thing for API v 2.1, which is, for example, support contact. Sodomy. If you want us yeah a little bit more about taxonomy Support over this API. Here you can find everything and as a chat on the top, but maybe I will not show that you can have the same in audible portal. You have your attendance time, slash admin, dot sharepoint.com, you write, underscore API, slash dollar sign metadata and you get everything that there is to obtain.

H

So if you are looking forward to go with that, lovely lovely load of unsupported API have fun go map on that positive note back to Topic at hand which is using react query in spfx Solutions but, as you may imagine, as the name suggests, because it's redirect query you can use that. Only Solutions, you are using react so sorry today, nothing interesting for adaptive cards, only old school development, the answer, not myself, I. Imagine you can find me on social medias. If you want I highly encourage, let's have some discussion about code.

H

Having said that, what is interesting.

C

Question, sorry, can you do a a go to the presentation mode because uh it's much better when the reporting so.

H

I will try.

H

Okay, I hope you can see it yep, okay, okay, no thank you and that's me. Thank you very much. Oh, this is the actual query. Is that will help you with um by queries? I mostly mean queries to backend API.

H

The whole idea is that usually, if you have experience with period either punctual components or class components, if you do something for a shared point, you start every class or every functional component, the same way: either use effects and state is loading, State obtains data or you have component Dismount and in component it mounts you call for API, which of course is a lot of the repetitive being said.

H

You have to wonder about oh how I will deal with questioning how high I will deal with concurrent requests to the same endpoint and all of that magic which someone extremely smart abstracted into multiple party library before we move forward, because you can see it provides hooks for communication of the backend API.

H

The question is: what are the Glorious hooks and effectively react hooks our feature that we have to introducer I, believe we react 16.8 to help you manage component State, the biggest issue with with such approach with with hooks it requires biting binding context, so also I, believe since react 16.8 or in react. 16.8 react in introduce something like the ACT context which can help you but I, just study of common dependencies, punctualities and all of that magic. So you can shred it across other components, um I'm, not sure if that's the best way forward.

H

This is an open question. Also I believe this is important to note here that usually when I present, something on such calls, I can very confidently say that it will scale. This is a great solution. If you want go for it this this time, I didn't tested it enough in a big scale. To confidently say this will not break it's. Definitely a concept worth playing around with, but approach with cautious Kevin said that.

H

Why would we use that I mentioned a little bit of that before it? It has beautiful handling of literary policies- error, caching, concurrency also. It has amazing support for something called State requests, which I hope I will not forget to show.

H

It simplifies that we development quite a lot because, as you will see in a moment in the demo, you have only one book pen functionality and by that it also improves a little bit statement, not just for common requests and I believe the most common request is the request used for users, because when you render news, uh the bottom usually want to lender who created it when you landed items created by Modified by events who created so the endpoints related to users are very commonly used all across your application, and it is a at least in my experience quite common issue.

H

Not all of them are recording the same endpoint but separately, and you just duplicate the network. Throughput.

H

As I mentioned, we would need something called context provider to that context. Provider would have to provide or pass HTTP client, and this is a little bit of important Point. Usually it requires authentication as a service dependency, and this would be very often asking operation. So you cannot just clearly create this without any context. I would go into multiple details about this engineering demo.

H

Once we will have our HTTP client, we go with a rapid around our original component with context provided, so we can provide context for our provider so that we can provide context for our component. Then we implement the hook. That is electronic use. Square method and use Query method is the beef of our today's. My today's demo use Query is that lovely method from react. Query Library.

H

Finally, we consume that in child components in our good component, whenever we like, as long as it's below context, provided then the last step is enjoy and pure enjoyment of nice and simple solution for the complex problem.

H

Let's take a look at our demo in the meantime, I will check if there are any questions as.

A

We're running a little bit over um yeah. We want to make sure that Matteo has time to to do his demo. So um yeah. Keep that in mind. If that's, okay, absolutely pretty.

H

Fun for me it's okay, so, first of all, because that's the demo, you can see I have a spfx web part with one two, three four user cards. Those are new, your customers have cards will go in a second, but first of all, I wanted to show you that state functionality because react query will automatically detect. If you have some State. The requests I have to open this page for about four hours, and you can see that everything I've been done when it detects steadness.

H

It cause a react, not react, but graph to get new data about users. So this is how our web part. It looks like nothing too fancy, but, as always, the devil is in the details.

H

Let's go from the top. Our detect query sample our web part in our weapon. We have rendered and, as I said previously, we have our almost out of the box component and instead of rendering it and passing it here to the abdominal, and then we create a context. When we provide our graph client and our created elements, then we use their Dom to render our components. So this is the easiest way to provide context into our component.

H

uh We can't see what you are sharing still.

A

So we can say Visual Studio code, yes, lovely.

H

And and here on any type initialize the graph client I, don't want to go to into too much details about it, but I promise to you will see that I wait on in it is asking so here we can actually avoid the alternative authentication magic, which is lovely now, let's discuss what that context provider is actually actually is not context from edit actually is in context provided as as a some seconds ago. We provide that magical graph.

H

Client I will graph client is HTTP client, nothing to worry about here, but this query client, which, as you can see, is quite a client imported from aliac query. Here we can Define some interesting things like style time, cache time, retry policy again, don't want to go too much into details about it, because we have a short on time but effectively. That's it. Now the use use user query which returns U squared again, you square it from react. Query here you can see actually binds together a few requests.

H

We are batching it into one and we are returning the user object.

H

Now I mentioned that it will automatically handle concurrency, which I believe is the most important, because if we go to react, query sample you can see, we have four different users, but for for different components, but all of those components are actually using the same use user query here in another user, killing component with nested user and a simplest user. We every time we use only this use, Query method and in this enters all of that concurrency.

H

So either we had a rendering four elements of four components on a web page that are actually recording only. We are calling the endpoint only once on that, because skin listen could save as much usually talking about unit tests and how you can unit test stuff when there is this big context provided the tendency, so they surrounded.

H

First of all, we can provide actually the whole context and in our two-hour context, provider just pass mocked graph, client or which is even better for the isolation testing using just Mock You can actually mock the whole hook itself. So then, for our for our test, you will just render user as you would rendered anywhere else. You will just don't have you will remove during the attack dependency to context because you are mocking hook as a home. On that note, I hope that's enough. If that have any questions, I would love to talk about it.

H

Ping me, but I will leave some time for next. Presenter have a lovely evening see.

A

You soon sorry for them I'm asking thanks for uh pushing through that I apologies for pushing you, but yeah we're time is against us today. uh So let's move on to our next presenter, so Mateo, uh please uh share your screen and for everyone who's in the community call. This is Mateo's. First um speaking session on on the community call, so yeah show show a bit of love for the for new speakers uh and and Mateo.

A

Let's take it away, we can see a screen yeah.

I

Thank you veza. Thank you. Thank you all thank you for having me here today. um Let me, please tell me if you can see my screen. Yep we've got that. Okay, thanks so uh hello, everybody. Let me briefly introduce myself I'm I'm, Mateo I'm, a software engineer at and I'm going to show you today, a simple web part.

I

We based on a real case scenario developed for one of our customers, and so basically we needed a way to allow our users to provide feedbacks about all the features and and about all the tools they find uh in their SharePoint site. So we developed a simple web part, A, really simple web part that renders a button in a fixed position on the right side of the page. As you can see here and when the button is clicked it, it brings up a panel that shows up a form for a photogenetic feedback about the site.

I

uh There is a text area and there are five-star rating component and, of course, a button that sends the data to the backend um for every other web part within the page. There is an accordion that contains the form for uh for the related feedback. Now the the web part itself is is quite simple. There's really nothing I want to say about it.

I

um What makes this sample interesting from our point of view is the way the panel is built because there is no manual configuration at all and the web part retrieves all the content from the page directly from from the page itself, and this is done using uh the uh the client-side pages module of pnp.js that allows us to work on client-side pages, with the find Control Function that you can see that you can see here, we are able to find and iterate over all the page layout controls that we found within the page.

I

Here you can see a snippet from from the documentation and I will come back later to this when we, when we see the code, this is our sample of all the data retrieved for a single white part. We found on the pair on the page and, as you can see, there are a lot of useful information. There are info about the webpart position, the ID, the title, the description and and so on, and this is our is our actual implementation.

I

We retrieve all the content from the page for each web, but we got the title and the order, which is basically the the position within the page. All the duplicates are removed. We don't want to ask feedback for different instances of the same web part and, of course, the feedback web part itself is removed from the list, because in this particular case it doesn't make sense to ask feedback about the feedback feature, and let me show you a quick demo.

I

This is my SharePoint site. This is my own page and, as you can see here, I've added some web Parts in the home page. There is the new what the news web Parts, the YouTube web part some quick links, the younger conversation and being Maps, and, as you can see here, there is my my little feedback button. You know in this sticky position in the on the right side of the page.

I

If I open up the the sidebar I will find the the genetic feedback form, I can leave a comment here. Let's say: I love this site, I can rate it, let's say for star and of course, send my feedback and for uh all the weapons that I have added on the page.

I

There are all the all my accordions with all with the form uh for the related web part.

I

uh As you can see, there is the the form for uh for the feedback about news, the form for the feedback about the YouTube web part and so on.

I

Now, let's edit the page- and, let's add let's say the recent documents were part- sorry for the typo here it is my new web Port, let's publish the page again and this time I if I open, my sidebar uh I can see my a new form for my newly added web Port, which is indeed the the recent documents. Of course I can leave a comment.

I

I can rate it and I can set another feedback about my new section in the same way, let's edit again the page, let's remove the news. Web port, for instance, publish the page again and, as you can see, the uh the form related to the news web part is now gone because, of course, my web part is is not on the page anymore.

I

um Let's jump quickly to the code we saw before this meet this function, which is our build feedback from conf from uh from page and what's Happening Here, we. uh Basically we get the client the client-side page, using the page URL that we retrieve from the from the webpart context.

I

Then we iterate over all the page layout controls we found on the page. We create this simple object, which has only the in this case the title and the position of the web port and we push it in into into a list. Then we removed all the duplicates as we see before, and we removed the the feedback web part itself and finally, we sort the this list.

I

We sort these uh all the all the the page layout controls we find by by position in order to show uh the feedback forms in the same order uh of the web, part that the user found in its own page and the last scene.

I

The last thing I want to show you is the the function that actually send the feedback to the backend, and this is what you will find in the in the sample published on the sample solution gallery and, of course, this is just a sample and and as you can see here, the only thing it does is to print the the payload of the feedback to the to the console. Of course, uh you are it's up to you.

I

What to do with the with the data you collect uh from your users, you can save them to Azure Point list. You can send them to a database. You can lock them to Azure application inside and and so on. In this case, this function always returns a success. That is what uh what the form show was on SharePoint, with the with the success message and I. Think that's it. That's all. Thank you.

A

Great stuff Mateo. Thank you very much for coming on and and sharing that with us and obviously the first time that you've spoken on. This call hope it's uh the first of many uh and that you've encouraged other people as well to take that step like we talked about at the beginning. If you want to come and talk on the call like Mateo's done, then just send a request in and uh and we can get you on, uh but great example.

A

I love that uh particularly of the console.log at the end, uh I did make you chuckle a little bit um but uh yeah, leaving that open to everyone's uh kind of imagination, and you can take that further- um is. Is this available as a sample or or will.

I

It uh yes, it's available on the Microsoft sample solution gallery and on the pmp.js repository as a sample on the as a webpart sample. Yes, perfect,.

A

Thank you. So if you, if you've liked what you've seen go, go, take a look at the samples gallery right. Thank you. Thank you very much. Let's go back to the slides, uh so we're actually doing all right for time. uh We're a little bit rushed before, but uh yeah I just want to say thank you to uh to Michael, Martin and Mateo who have presented on today's call to close off uh so just say, thank you for everyone. Who's attended today for your uh conversation in the chat.

A

As always, it's been uh it's been informative. It's been hilarious at times as well, which is always good to see.

A

uh The recording will be available in 24 hours on the Microsoft 365 and Power Platform Community YouTube channel, so uh take a look, go along to the YouTube channel and if you haven't subscribed, then yeah click that subscribe button and make sure that you get all of the the videos and recordings from uh from these Community calls uh follow us on Twitter at Microsoft, 365 Dev and at Microsoft M365 PNP, the next Viva connections and spfx call will be on March, the 9th and our next Community call the M365 and Power Platform call will be next Tuesday on March the 2nd again.

A

If you want to get information on all the community calls go to AKA, Ms Community, slash calls and you will find all of the details for all of the community calls we have on offer and that. Thank you very much.