Microsoft 365 Community SharePoint, 13 Jul 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building my dashboard for Microsoft Teams to aggregate relevant daily information with SPFx

Description

📺 In this 17 minute developer-focused demo Hugo Bernier walks us through the "My Dashboard" sample of Joao Mendes. Sample looks professional and complete which makes adoption of web parts easier. Utilizing Microsoft Graph Toolkit V3 RC, this SPFx app allows quick access to user agenda, To Do Tasks, Files and News and Relevant People related to user. Hugo also provides an overview on Microsoft Graph toolkit.

This demo is taken from the Viva Connections & SharePoint Framework community call - 13th of July 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Hugo Bernier (Microsoft) | @bernierh & Joao Mendes | @joaomendez

📖 Learn more
• Sample shown in video: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-dashboard
• Getting started with SharePoint Framework: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant
• Building for Microsoft teams: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview
• Use Microsoft Graph in your solution: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
• Publish SharePoint Framework applications to the Marketplace: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development: https://pnp.github.io/
• Fluent UI version 9 - Converged Fluent UI components: https://github.com/microsoft/fluentui/tree/master/packages/react-components

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform 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 today I'm going to be talking about my dashboard, webpart and I. Guess I shouldn't call it my dashboard webpart, because the it's really Jo's web part, so it's Rouse, dashboard webpart it was written by joao. uh Joao always prefers that uh and and likes for us to 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 art 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 agenda, my to-do's I have I, don't have any to-do's great I. Don't have anything to do.

A

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. 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.

A

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 Joe chose to use and the the information he chose to use is very cool, but how the web part 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.

A

If it's running in SharePoint, it supports dark themes, it's designed to work in teams and teams and dark team 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.

A

If you will now, the code is probably why we're here so the code here. uh Actually what Joe does here? He uses a very interesting structure and, if you're just getting started with uh creating spfx extensions or expert FX 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 uh that we have is the atoms and atoms if you're not familiar with with items.

A

This is something that is uh used to basically to to by Joe Tai um and Joe. Tai is a state management library that makes it super easy for you to manage. State uh here, I'll put the link here to Showtime with jodi.org.

A

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. Okay, which component do I have to update the state controls which items get re-rendered and Joe.

A

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 jual 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 by actually simplifying how we we use things like, for example, image utilities, uh pfp.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 pmpgs pmpgs, 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 pmpjs in a single function, and it's really cool.

A

The models is how we actually describe the data that we're going to be retrieving and so, as well 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.

A

The dashboard webpart itself and dashboard webpart, obviously is rendered by the Dashboard webpart class. 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 his 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 renders the agenda in a clean way.

A

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 for 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 that to do to my file 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 webpart sample Repository foreign.