Microsoft 365 Community Viva Connections & SharePoint Framework, 13 Jul 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections and SharePoint Framework community call 13th of July 2023

Description

Viva Connections & SharePoint community call on July 13th. Recap on news and updates from Microsoft and community projects, followed by demos.

Call included three demos:
• Aimery Thomas - Using Microsoft Graph API to create a web part report
• Hugo Bernier & João Mendes – SPFx Web Part – My Dashboard

Q&A takes place as always in chat throughout the call.

Screenshot summary for this call | https://warner.digital/pnpsummary07132023/

Please see the blog post for details on demos, project updates and activities.

👏 Host:
•Hugo Bernier (Microsoft) @bernierh

✨ Presenters:
• Aimery Thomas (Avanade) | @aimery_thomas
• João Mendes (StaffBase) | @joaomendes and Hugo Bernier (Microsoft) | @bernierh

📃 Agenda
00:00 – Intro – Hugo Bernier (Microsoft) | @bernierh
05:25 – SharePoint Framework - Alex Terentiev (Microsoft) | @alexaterentiev
07:20 – PnPjs Client-Side Libraries – Julie Turner (Sympraxis Consulting) | @jfj1997
09:42 – CLI for Microsoft 365 – Garry Trinder (Microsoft) @garrytrinder
11:30 – Microsoft 365 Developer Proxy - Garry Trinder (Microsoft) @garrytrinder
13:10 – PnP SPFx Controls – Alex Terentiev (Microsoft) | @alexaterentiev
14:05 – Viva Connections Toolkit for Visual Studio Code – Hugo Bernier (Microsoft) | @bernierh
15:56 – PnP Modern Search – Hugo Bernier (Microsoft) | @bernierh
14:22 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
17:50 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
18:15 – Together mode picture
19:34 – Demo – Aimery Thomas - Using Microsoft Graph API to create a web part report
31:02 – Demo – João Mendes (Avanade) | @joaomendes and Hugo Bernier (Microsoft) | @bernierh – SPFx Web Part – My Dashboard
48:20 – Closing

📝 Learn more
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Web Part report https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-dashboard
• Jotai Primitive and flexible state management for React https://jotai.org/
• Microsoft 365 developer Proxy https://github.com/microsoft/m365-developer-proxy
• Web Part My dashboard https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-dashboard
• Microsoft Graph toolkit https://learn.microsoft.com/graph/toolkit/overview
—–

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

Sharing is caring! You are awesome! 🧡

A

Foreign, hello, everyone and we welcome to the Viva connections and SharePoint framework by weekly sync. My name is Hugo Bernie and I will be your host for the call. Today we have an action-packed agenda. Today we have the latest updates on the SharePoint framework, we're going to be showing some Community project updates we're going to have picture time where optionally, you can share your camera and we can show people.

A

You know the awesome community that we have, and then we have two demos, one by Amory who's, going to show using Microsoft graph API to create a webpart report and the other one is by me. But it's a web part that was written by joao Mendes, which is the spfx web part. My dashboard.

A

We have tons of resources for you. The first thing is: if you want to watch videos- and you want to learn- you have access to the Microsoft 365 Empire platform, Community videos. So all the calls that we do all the demos that we do are available on our YouTube channel. You can subscribe if you don't want to miss out on anything. We also have our LinkedIn groups for discussions, so this is a great place to keep active with the community and have great positive conversations.

A

We also have many many open source initiatives where you can use resources, but also contribute to these resources. These are open source and they're open to everybody. We have sample galleries if you've got some cool stuff that you want to share. You can absolutely share in the sample, Galleries and there's great ways to learn how to use the various technologies that we talk about, and we have more and more. You can go to aka.mslash community home to get access to all these cool things.

A

All in one link, our Microsoft, 365 and Power Platform Community calls are as follows: we have the Microsoft 365 Empire platform, which is on summer break right now and we'll be back on August 22nd.

A

We have the Power Platform monthly, call where we actually share all the latest with the Power Platform and we we celebrate the work of others in the community that show us how they've used the prior platform and really cool and creative Solutions, and we got the office add-in and the Viva connections and SharePoint framework call and that's the call we're on today. You can get to all these invites to. By going to aka.ms community slash calls and the Microsoft 365 Empire platform, which is on break until the August August 22nd.

A

Again we we love everyone, but hey. We need to recharge this the summer. So we'll see you in August. Now, if you'd like to present on our many Community calls you're welcome. Everyone is encouraged and welcome to present on the committee calls. All you need to do is to go to aka.mslash community, slash, request, slash demo and to talk about what you can do if you're interested in presenting or contributing to the community. We have an initiative and David can talk about that. David.

B

I can thank you Hugo. So friends, we all know and love sharing is caring and it's finally back. We have constructed a new way, in fact, for you to register for these sessions and what are these sessions? These sessions are live, Hands-On guidance sessions, which means that we're going to get together in a team's call and we're going to figure some stuff out. For example, maybe you don't know what GitHub is or what a pull request is you want to contribute, but you're not sure where to get started.

B

You got these awesome samples and you don't know how to submit them we're going to work through it. Together. These sessions are free. They are safe space, which means they are not recorded and we have started setting them up using the new teams. Webinar feature, so it's super easy to get registered. You sign up. You immediately get an invite. It all works, just fantastically so go check out. Ak.Ms sharing is caring. We've got more coming soon, we're going to start creating videos for some of these, so they can be on demand. Big plans, Big Ideas.

B

We want to help you do more in the community community wow choking on my own words all right now, once you do contribute to the community, we want to recognize all the amazing work that you're doing and that's where our recognition program comes in. This is not going away. This is a credly powered initiative, meaning that you will get those accredited and official badges for all.

B

The amazing work that you're doing we just upped our subscription with them to do even more so we are excited for what the rest of 2023 brings in 2024 and for those that have been waiting for their badges, we're going to process them.

B

There was an error in the credly system, actually more on the Twitter side, when you try to share your badge on Twitter, shocker I know, but it's working again, and so now we're going to see all those badges coming out and you can share them on Twitter share them on LinkedIn print them out put them on the fridge, send them to Mom, send them in your cards at the end of the year, you're good to go. So we do need you to opt in AK, dot, Ms, slash, Community recognition and it's easy.

B

We use MailChimp to keep track of all that all right. All those chimps are doing all the work for us. You go back to you.

A

Awesome, thank you I'm, not sure how to follow a chimp impersonation from David.

B

Oh, that was a.

A

B

Stay here with me: oh.

A

That's why I was so accurate. That's right all right! So let's talk about the SharePoint framework, so here's the latest from the Microsoft engineering uh for Microsoft, Viva, Microsoft teams and SharePoint extensibility, and to talk about that I believe we have our friend Alex Alex.

C

Yep, thank you uh So. Currently, we have SharePoint framework 118 uh in preview. It's a better one. We are working on the next better as well and hopefully to release uh somewhere in uh August or uh September and uh next slide. Please.

C

So here are the examples of what we are doing for spfx18. So uh we are mostly focusing on adaptive card extensions and new capabilities in there and especially new components. So we are allowing uh text inputs in the cars and the whole new search card template. So this is basically what we are working on for this release next slide. Please.

C

Steady growth, the best community in the world. Everything is because of you and that's why less perfect is so popular and we are still growing. That's nice next slide and the road map, so uh current uh latest GA release and what is 1174, uh and this is the production ready, as mentioned 118 is a better one. Right now main uh features are around Aces, but we also updated the fluent UI to be V8 by default, and you know all new projects and, as mentioned GA is planned to be somewhere in August or September and I.

C

Believe, that's it from the slides right. That's it.

A

Thank you, Alex and now, let's talk about the various open source projects that we have uh at our disposal and the first uh open source project we have is the PNP JS Library.

D

A

D

I am here um not much has changed since uh two weeks ago, when we presented this uh we're still on track version. 3.17 is to be released on July 17th, uh just a heads up for those who follow this Library, religiously. We are moving our release date from Friday, the third Friday or excuse me, the second Friday to the third Monday, so just two days out around to the Mondays, uh because that works better.

D

Now that we have three people on the team, Bo Cameron joined us uh several months ago, and this just works better for the team, so we're gonna release on Mondays. We have um some bug fixes for batching that had a very, very specific batching scenarios that had an incorrect header, we're going to be addressing a OneDrive analytics changes in the graph Library. There's a bug fix for a graph content, type ad copy from content type Hub.

D

If you have not used that endpoint, that is a very useful one for reusing content types in your SharePoint sites from the content type Hub. That is better than copying them for various reasons for back-end stuff and obviously some various documentation updates. We're always trying to do that also version 4 is underway. Now, if you check out issue number 2678, that's pinned to the top of our GitHub repo it links to the project planning board. If you have any feedback for us, certainly add it to that issue, as always we're doing the nightly build.

D

So if any updates get merged in you can test it out with the at V3 nightly, build, follow. Follow us on M365 pmp.js, on Twitter or LinkedIn the M365 platform Community uh PM PMP Community check that out on LinkedIn, I, think activity as that platform sort of has taken off with the trials and tribulations of Twitter, so that is all I have for today. Back to you, Hugo.

A

Trying to say that three times fast, all right and now to talk about the CLI for Microsoft 365, uh let's pass it to Gary.

E

Hey Hugo, uh thank you. Yes, so CLI for Microsoft 365 version, 6.10 uh beta, has been released um so not as many uh kind of new commands. Well, no new commands, but lots of updates, um so uh one notable uh book that we fixed.

E

um So this was an issue uh creating service principles using our Azure ad commands, um but as Alex already mentioned, as well uh with the new uh beta version of SharePoint framework, we've upgraded uh project upgrade project doctor and Doctor commands to now support that that new um release and we're also working uh heavily behind the scenes to update a lot of the the code base as well. So um you'll see a lots of of changes that we're moving from then to async awaits.

E

So if you are a contributor, um you may have already seen this already, but we're in this kind of transition state and a few minor command update dates as well, which you can see in the in the release, notes and the release notes. You can see AKA dot, Ms, slash, CLI, hyphen, M365, slash notes. But if you want to try this beta out, you can get that from npm and Docker by using the uh the next tags.

E

And if you haven't done or done so already uh best place to talk about CLI for Microsoft 365 is joining our Discord server and you can get the uh the join link by going to AKA dot Ms, slash, CLI, hyphen 365, slash Discord. You can also follow us on Twitter for those of you who are still on the platform um at CLI, Microsoft 365. uh next slide, uh so Microsoft 365 developer proxy.

E

We actually do have a Beta release, so uh we uh we were going to uh just release at the end of the month, but actually these uh updates um fantastic feedback from uh from James love, um who has been clearly testing the uh the proxy uh highlighted it and a few issues, um but we also added support um as well for for new features so that new feature was um we've extended, the minimal permissions plug-in uh with support for batching.

E

So this is the plugin which will track your uh requests going through for your app and return. Hey. Here's the minimal amount of permissions that you need uh from Microsoft graph to to actually use them as well um yeah little improvements about excluding uh dollar value, from the select guidance where it was showing up incorrectly um and issues when generating um the uh the summaries. uh When you were retrieving minimal permissions as well.

E

If you didn't call the graph and so again thanks for the feedback, if you want to go and try out this Beat Release go to AKA dot, Ms, slash M365 proxy and go to the releases tab on there. You'll see the pre-release uh download um for Windows for Linux for Mac OS and yeah we're working heavily to make sure that we've got our uh new release version at 0.10, ready for the end of the month. uh Hugo back to you.

A

Thank you, and for those of you who are thinking gee I, wish that we had more time with Alex here's Alex to talk about the reusable spfx controls. Thank.

C

You Huga and uh yeah so shame on us. We hope we released our latest versions uh back in April, but we are working hard to release the next version, either, maybe tomorrow or next week, with a lot of new stuff coming there and sorry about like uh not really fast releases, but we are still looking for the right Cadence based on uh our possibilities and amount of issues, PRS, etc, etc. So, if you contribute more to our components, we will release more. So please, please, please.

C

We are ready for new contributors and new contributions back to you, Hugo.

A

Thank you and the reusable spfx controls is definitely a fantastic initiative. I urge you to go, look at it if you haven't used it yet all right. Let's talk about our Viva connections, toolkit for visual studio code.

A

We have a new minor release version 1.1 and we have a roadmap for version two, where we're going to have code Snippets for svfx Solutions, we're going to generate the CI CD pipeline for spfx projects using the CLI for Microsoft, 365, GitHub actions, and then we'll have things like actions that will allow to rename a project which is super awesome.

A

Instead of having to use the the CLI you'll, be able to do that directly with Viva connections, toolkit you'll be able to deploy the solutions to the site using the app catalog and extending the environment details view as well as granting project permissions. So you can install the Viva connections, toolkit from Visual Studio code for visual studio code from the visual studio code Marketplace or directly from the vs code, extensions tab.

A

You can get to the location at aka, the mess Viva vs code and I'd like to thank also Adam for noticing that we didn't have the Viva connections toolkit on our PNP home page, and so we've added it. So you can find it from there as well.

A

We also have the PNP modern search which can be found at aka.ms, vnp search, and it really it's a bunch of web parts that you can use to build a modern search experience using flexible webparts, and you can configure them to do many. Many cool things I encourage you to go. Take a look at that we're currently at version 4.9, and we are adding some new things.

A

For example, preventing uh these The Click Jack security fix or ensuring The Click, Click, Jack security fix I guess is what I should say and we've added a few scenarios as well. Now we have a repository. In fact, we have multiple repositories where you can contribute to SharePoint framework samples. uh We have spfx extensions and spfx web parts, and these are the updates. Over the last two weeks, we have two new extensions.

A

One is a sticky feedback uh by Sandeep PS, and so it actually has the cool feedback button and in the bottom, lower right corner and it pops up a dialog box on every page it to you can so you can connect feedback, there's also an update or sorry a new extension by Martin, which is a dynamic site form and it he adds the ability uh to add Dynamic fields, for example, location fields and things like that. It's a it's a form extension as well. We also have a tenant-wide extension manager by Dan tuft.

A

uh It's amazing I. You know I wish that that was built into the product, but it's a great web part that allows you to manage your extensions and uh damn Dan actually had noticed that vesa was having a problem using extensions in one of the community calls, so he decided to do something about it. Thank you, Dan and Amory has actually created an update for the webpart report.

A

Trying to say that easily, and so what we've done is we've actually done some general improvements on the web part, including top action icons. uh You know that's a new feature. That's been introduced a few releases ago, but a little button on the upper right corner of your web part to do some cool things. We've added some basic list features such as search impagination and we've improved the code in general. Now we also have adaptive card extensions and to talk about those samples. Let's pass it back to David.

B

uh Thank you Hugo, not a lot of action here, friends, but plenty of room for Action. So if you would like to submit a sample, please do so myself and dare cash Peterson work together on handling this. So please definitely submit some samples and that's back to you, Hugo.

A

Awesome David, if only there was a way for us to you, know, show people that we're an awesome committee. um Do you have any suggestions you.

B

Know maybe we could use together mode, so why doesn't everybody turn on their camera uh and I will take on over the screen there? Unless you I, don't think you did? You have a nope.

A

You're ready, okay, yeah got.

B

It all ready to go here all right go ahead and turn on those cameras. Everybody's still got some more seats ready to go now, while we're waiting for everyone to completely show up uh at the end of this teams has a weird issue where it leaves together mode on for everybody. If one of the hosts turns it on so you'll have to manually turn it off yourself uh when that happens. So all right.

B

Well, let's give it yeah right now, for whatever reason it does that all right, let's give a wave to the community, everybody still can pop in. If there's room feel free. There are some seats, but let's give a wave Stephanie's, looking very stoic I think her camera may have frozen, but she looked great. That's.

F

Okay, all right.

B

That's right: she's, like I'm, smiling to the world all right, excellent thanks! Everybody Hugo feel free to take on back over awesome. Thank you.

A

I will then okay, so now it's time for our demos and the first demo is by Amory who's going to talk about using Microsoft graph API to create a webpart report. Amery the floor is yours or should I see the screen.

F

Here you go, I'm gonna share my screen.

E

F

Okay, let me know when you, when you can see my screen, we.

A

Can see it, we can hear you go.

F

Ahead, perfect, so hello, everyone, my name is emery Thomas I'm, a Microsoft 365 developer at avanado.

F

You can reach out to me on Twitter or LinkedIn, as you can see, um I've been contributing to this great Community for some time now- and this is my second demo on this call.

F

And today, I'm gonna talk to you about the webpart report.

F

So what does it do? This webpad displays a report of all webcasts used in a SharePoint site using either a list or a chart.

F

Why did I build this webpart and why it could be interesting for you to use it well, because you can get a get a quick view of all web parts used in a shop on site, and you can also easily identify the use of custom weapons.

F

To do that, it uses the graph Microsoft graph API with the pages and web paths endpoint. The MS graph client and some PNP react controls to display the data.

F

And now, let's switch to a quick demo of the web part.

F

Okay, so here you, you have the the web pass report so with the the list of all the web parts used in this particular SharePoint site. So for each web part you have the web path, type, the wordpath ID and the title of the page where the web part is used.

F

You also have the site ID, so here it's always the same. But if someday we add a new feature to this application to get web parts from other sites, then the the site ID could be useful.

F

You can use the search bar, for example, here if I search for PNP here I know that on this side some PNP modern search web parts are being used.

F

And now let's say that I want to switch to a chart view to have a more uh it's a graphical view of my webparts, so to do that I'm going to click on edit to edit page, and here wait. Wait! Sorry, instead of clicking here to edit the web part and display the property pane of the web. Part I'm going to click here on this drop down to select the chart option and then here I have my uh my chart.

F

My chart view I'm gonna click on refurbish here, so the child view displays a web part in a more let's say, aggregated way. So, for example, here I don't have the list of every single web part, but I can see easily that on my site, I have four events. Web parts.

F

Now, let's go back to the slide to see some code.

F

So the first thing that I want to do when I'm loading my application. My webpart, is to get to get all the web paths on my site, so to do that, first I need to get all the pages that I have on my site. So with the pages endpoint of the graph, API and I, only I only need the ID and the title.

F

Once I've done that, sorry for all the pages that I got I'm gonna get the web path on this page, so I'm using the page ID for each page and the web Parts endpoint to get the web parts and once I have all the web pods I can display it using first the list view controller, which is really really easy to use now. I want to. If I want to hide my lesbian control to display the child view, foreign.

F

And to do that I'm going to implement the get top action configuration function.

F

I want to use a drop down top action with a list option for the release, View and a chart option for the child view and what's going to happen, if it is when I click on the chart option, it's going to update the display option property so that the the list view will be hidden and the chart view will be displayed.

F

And the child view is using another great PNP react control the chart, control.

F

So the child control was a bit more tricky to use because, as I said earlier, it displays the web paths in a more aggregated way. So I had to um to reorganize a bit my data because, as you can see here, it will. It requires labels, which is an array of strings and data, which is an array of numbers.

F

So to do that here, I've used a map data model to have for each webpath title, which are my strings.

F

A dedicated number, which represents the number of web Parts I have on the shopping site. For example, here I have two oops sorry, two text web parts on my site and once I have the data like that. I can easily build my array of numbers and array of strings to use in the chart, control.

F

So the last thing I wanted to talk to you about is not directly linked to the to the web part itself, but uh it's the Microsoft 365 developer proxy, that I've used for the development of the webpart and that I'm using right now for the demo, because one of the feature of the of the proxy is to be able to mock API responses.

F

For example. Here, if I try to get pages for this specific site, which is my demo site.

F

It will return this set of pages instead of the real pages that I have on my site, and I can do the same for the web paths, meaning that for each page, I've created a set of web parts to return.

F

So instead of creating many pages and for each page, adding many web paths, I just have to create all the data in uh in a in a Json file and then launching the proxy, and it turned out that the proxy was even more useful to me because the page Microsoft graph API is being updated right now.

F

So, if I launch the web part without using the proxy and mocking responses, I might I might have some errors and the the web part might not work properly.

F

So I'm not very lucky, because I've developed the the web part a few weeks ago, but just before demo, the the updates are rolling out. So anyway,.

F

That's it for me. Thank you very much. I hope it was interesting. Let me know in the chat. If you have any question and back to you, you go.

A

Thank you that was a fantastic uh sample uh and I have to say I kind of feel bad now, because I'm about to demo a web part and I wish I was using the proxy, but uh I did screenshots like a jump. So thank you for the cool go sample and let me share the screen all right. So hopefully everyone can see uh today I'm going to be talking about my dashboard, webpart and I.

A

Guess I shouldn't call it my dashboard webpart, because the it's really Jo's web part, so it's Raul's, dashboard webpart it was written by joao. uh Joao always prefers that uh and and likes for us to uh demo his contributions for him. So I have the honor to be showing the work that Joel has been doing.

A

The web part that I'm talking about today uh here is the link for the web part you can find you will be able to find it on the spfx web part sample repository after this call, but it's called my dashboard and it actually Aggregates things like your files. uh Your feeds your people, and it is actually quite fantastic. Now, like every web part every sample that joao does so always spends the time to make sure that the sample looks really professional and looks complete.

A

You know if you don't know that it's not an out of the box web part. Sometimes it can be very hard to to tell them apart from the web parts that Microsoft has built and that's a great approach when you build your own web Parts, it's always a good idea to make sure that your webpart fits in and and looks professional. It really does help people adopt and trust your web part a lot more.

A

In fact, there's a user experience principle called the aesthetic usability principle that makes people believe that the prettier, something is the Predator. A user interface is the more usable they will believe. It is so here's an example here of the web part as it is running in my environment, where I have, for example, my.

B

A

My to-do's I have I, don't have any to-do's great I. Don't have anything to do. um You can also look at your files, so it shows folders and files as a separate different entities, and you can obviously open each one of them, but you can also look at the ones that you recently used as well as the ones that you recently shared uh now. I haven't shared anything because this is my demo environment, but this is where these things would go.

A

You also have the fees so, for example, the company announcements and all the news can actually be found in there, as well as the people. So you have the relevant people here. Those are all sample uh fictitious people, but you know this is a great way to get give you access to all the people that you need to have access to, and you can see here right away. uh That's it uses all the built-in capabilities, for example the hover effects and things like that.

A

It's a it's a great web part, and you know the the style that draw chose to use and the the information he chose to use is very cool. But how the web art was built is probably something that's, that's even more important because you can make this dashboard what you need it to be, and let me show you some examples here. First of all, the web part Works uh differently. If it's running in SharePoint, it supports dark themes.

A

It's designed to work in teams and teams and dark theme as well, obviously, and again, you'll see how the code is designed to do this, but it also works great or well in a mobile device where it's actually just adding some different sections for each for each kind of tab that we would see here. So it makes it it's not a reduced experience, it's actually a best experience for each platform or for each profile. If you will now, the code is probably why we're here so the code here. uh Actually what Chihuahua does here?

A

He uses a very interesting structure and, if you're just getting started with creating spfx extensions or xpfx web Parts, sorry, uh this might be something that might inspire you, but he's actually really made it easy to understand what each part does. So, let's zoom in a little bit and the first thing that the that we have is the atoms and atoms if you're not familiar with with atoms. This is something that is uh used to basically to to abide. Jotai um and Joe.

A

Tai is a state management uh library that makes it super easy for you to manage. State uh here, I'll put the link here to Joe Tai with jodi.org. It's a great library and State Management is something that allows you to actually store information, for example, settings or information, you've, retrieved and what you can do is you can help control how you repaint your your screen, based on when the state changes, and so the cool thing about that is that you don't have to worry about.

A

Okay, which component do I have to update the state controls which items get re-rendered and Joe. Tai is great at making sure that you don't re-render the screen uh unnecessarily, which makes the web part or any solution you use. You using Joe Tai feel a lot more performant, so the App State atom that draw uses. He just keeps track of all the state information like the themes and things like that.

A

The next folder that he's got is the components and you'll notice here that he's really any element that you may have noticed in the in the screen itself. They're actually created into individual components and the components are very descriptive. So you know exactly what each component does so, for example, here the dashboard control is the one that renders the actual dashboard and will actually dig deeper into that, but you can also see I got the center, the header, the left, um you know, so it gives you a great idea of how this information is rendered.

A

So it makes it easy for you. If you said, hey I would really prefer to have. You know the agenda on the right side. It's pretty easy for you to to figure out how to make these changes.

A

We also have the constants and the constants. We have a tendency, as developers sometimes to to hide the constant somewhere, but what Joel does is he creates a folder for constants and all the constants are stored in one place. It's a great way. If there's anything, that's hard-coded like Heights or uh theme rules, and things like that or types of people, as he's using here, he's able to do that. So again, you can find the majority of the constants in a single place in the sample.

A

We also use react hooks, so react hooks are a more contemporary way to if I could say that it's a more contemporary way to use react by actually simplifying how we we use things like, for example, image utilities, uh pap.js and other utilities, and, for example, here draw. Has some code on how to use the local storage right. So the local storage is when you want to set information in the user's browser temporarily, so you don't have to you.

A

Don't have to refresh that info or re-obtain that information every single time, you're able to use the local storage, and it's usually a few lines of code to use local storage, but by using a react hook called use. Local storage Joelle was able to actually make use of the local storage without having complicated code throughout his webpart same thing, with using pmpgspnpgs, as we've seen before, is an awesome library that makes it easy for you to retrieve uh you know.

A

I would call the apis the SharePoint apis and uh by using USB and pgs Joel has wrapped, basically all the calls for pmp.js in a single function, and it's really cool the models is how we actually describe the data that we're going to be retrieving, and so joao again has has combined all the models into a single area. It's easy here to see all the types of things that he's capturing, for example, file, information and things like that.

A

We also have the pmp.js configuration and we have some utilities and the utilities here uh I would actually download this webpart just for these utilities. Here, there's actually a shim to handle changes to the themes from version 8 to Version, 9 and so to actually make themes a lot easier and a lot cleaner in your web Parts. uh Definitely this is worth this should be moved into a separate Library by itself and then finally, we have the dashboard webpart itself and uh dashboard webpart, obviously is rendered by the Dashboard webpart class.

A

But the main component of the dashboard is really this dashboard typescript file. Here, let's look at the code because the one thing that we are now able to do by by breaking down the information or the the components cleanly like this we're able to write really clean code.

A

So, for example, here what Chihuahua does when he renders the dashboard control itself is he's using the fluent provider to actually capture the theme and to set the theme information so that he doesn't have to worry too much about what color to render things it's actually built in as part of the the fluent theme provider, and then all he has to do is really call within the provider. Is dashboard control and pass the information about uh what he wants to do in the dashboard and all the properties.

A

Now another thing that um I wanted to point out, because not everyone, you know some people are just getting started using react. Is he's got this weird thing here: where he's using uh open uh angle bracket and a closed angle bracket, and that's because when you render elements HTML elements in react, it always needs to have a single parent element.

A

You can't return a whole bunch of elements you need to return a single parent element and so well, there's there's work rounds for that, but uh what you are, and what most people would normally do sorry is that we would say well: I'm gonna, you know, create a div and I'm going to put all the the the stuff that I need to render inside that div, but the problem with creating an extra div. Every time you have a component is you're, creating just random, padding and random elements that don't really need to be there.

A

So what the? What it's a good trick to use here is use this kind of this empty element- that's not going to introduce any random HTML elements. uh React will understand that, basically, all the children of that empty element are going to be rendered so cool trick here. Okay and then, if we look at the dashboard control itself, that's the thing that gets called you'll notice. Again, it's very easy to understand. I got my left section, which shows my day.

A

I got my Center section and I got my right section, which shows my list of people now I'm not going to go into every single component, but I want to show how every component is built the same way. So, for example, if I look at my day here, let's click into my day, I have an element that actually returns tabs and for each tab. It says either I have the uh Microsoft graph toolkit agenda and the Microsoft graph toolkit to do now.

A

You may say: what's the Microsoft graph toolkit well, the Microsoft graph toolkit is actually a great, uh uh well I. Guess there, the web elements that you can embed in your solution to make calls to the graph a lot easier and it's not just making the calls to the graph. It actually also allows you to to authenticate to actually render the the data you've received in a nice clean way in a consistent way and again making components that look professional are going to help syntactic sugar I, like that.

A

So here's an example: let's actually dig into this component here, which is one of the components we're using the agenda component.

A

So that's you know. The one thing that you can see in the in the graph tool kit by the way is that you always have the ability to open the samples directly in a sandbox. So let's go into the sandbox and here's the agenda component.

A

Now the sandbox is cool because it actually has two components: it's got kind of the the preview window and it's got the code window and, let's again, take a look at this is what we are rendering with these two lines of code right here we got two components: one of them is the login component, which makes sure that we are authenticating the people, obviously that are using the component- and the second part is basically rendering the agenda and in doing that actually render.

A

Is the agenda in a clean way now there's lots more components in the Microsoft graph toolkit, not just the agenda you can see here. I do have the agenda that we are using for this sample, but the one thing that you should also know is: every component has kind of different ways to call them and I'm not gonna spend too much time into digging into every single component and every single configuration because we'd be here for hours and hours.

A

But it's important to see that there's lots of different samples and lots of different templates that are available, and you also have the ability to overwrite the template or your component. So, for example, here uh this is. This is kind of a um if I. Actually, if you see on the screen here, I'm actually using a different template to render the default data the loading data and when there's no data to show well guess what that's actually what we use in Duo's web part now, the other component is the to-do component.

A

We're not going to dig into the to do component too much but again same idea. There's different ways to call the to-do component. So now, if we go back to the code, you'll see that drow actually uses the, for example, in the my agenda or the MTG agenda, he's actually using the agenda component from the Microsoft graph toolkit react and then he's actually simply calling the agenda, where he's actually specifying here. How many days that we want to show- and he specifies the class.

A

But then he's got different templates for how to render the loading code how to render uh the default element. When we actually have data, that's been retrieved and how to render what to do when there's no data and that's the one that you saw I think on my screen.

A

That's very cool right and all that is actually controlling uh the agenda component, which is again on the web part right here. So the people there are very similar approaches for all the other components. So to do the myofio, the feed, the people, some of them he's actually retrieving the data directly using pmpgs and rendering uh doing custom rendering. But those are all great ways if you're learning how to get started uh using the pmp.js, the Microsoft graph, dual kit.

A

It's definitely a great example here again because it works in all the scenarios that you you might be looking for within teams within spfx. uh You know I strongly, recommend you go, take a look at it all right, so that's joao's, dashboard webpart and you can find it after this call at the spfx web part sample Repository all right. Thank you. Everyone Let's!

A

uh Let we had a demo from Amory today uh using the Microsoft graph API to create a web part report, webpart report web part, I, guess I, don't know, uh and then we had the Zhao sample uh using the my dashboard.

A

If you have any feedback on these calls, we'd love to hear your feedback rate, the call rate, the content. You know, let us know how we can improve, you can go to aka.ms, slash Community, slash, calls slash feedback and we also have an official Discord server. So if you want to connect, learn collaborate, you want to share some some thoughts. You have ask questions and stay up to date. You can go to aka.ms, slash, Community, slash Discord, and we have a handy dandy, QR code right here and that's it for us. For today.

A

uh Thank you for attending the recording will be available in 24 hours on our Microsoft 3c5 and Power Platform Community, YouTube channel and go subscribe, go to aka.ms, slash, Community, slash video and you can follow us on Twitter uh at Microsoft, 365 Dev and at Microsoft PMP. Our next Viva Connection in the spfx call is going to be on July 27th at 7 A.M Pacific time and our next Microsoft 365 and Power Platform call is going to be on July 20th.

A

It's already the end of July, that's amazing, and with that, thank you. Everyone have a great day.

B