Microsoft 365 Community Community Demos, 17 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Fluent UI 9 in SPFx solutions

Description

In this 14-minute developer-focused demo, Nick Brown shows viewers the new Fluent UI version 9 controls and theme provider in a SharePoint Communication site and Teams site. The UI framework has native theming for Teams, SharePoint and Windows. What is Fluent and Fluent UI 9, how are Fluent UI components configured. Fluent UI 7 currently ships with SPFx. UI 9 – Windows 11 styled react based, merges 8 and Northstar (Teams) into 1 library. Controls and source-code are available to you now. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 17, 2022.

Demo Presenter
• Nick Brown (Jisc) | @techienickb

Supporting materials
• Sample - react-fluentui-9 | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9
• Components - Fluent UI React Components v9.7.0 | https://react.fluentui.dev/?path=/docs/concepts-introduction--page

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

I'm, a senior 365 developer and architect at jisk I've been working in the education sector since 2008 I do not look as old as I am in any picture or in real life. I've been working on the platform for 11 years now yeah. This is the probably the second year that I've actually been contributing to the community and absolutely loving it and hoping to do some more demos. So, let's get into the actual grip, so I'm going to talk about what is fluent UI.

B

What is the current version of fluent UI talk about the new version version. Nine! Give you a demo of what that looks like and go go into some of the codes. I'll try and make this as quick, because there is another demo after me, uh so yeah what is fluent UI? It's a collection of UI Frameworks, created by Microsoft, to bring platform together, it's developed by Microsoft uh URL um that you should all know if you're developing anything to do with uh SharePoint is the URL.

B

That's on screen um yeah built for one platform uh yeah, it is the currently fluent ui7 is what ships with spfx and um in total, with fluent UI, Knight, eight and there's 128 or so components in the library. So it's a very, very extensive, Library, um seven and eight. So what is difference of well sorry, let's have a quick video of where this is.

B

uh So yeah for those of you who don't know about the fluent UI website, this is where you can go and find all of your controls that you want to use in your lovely spfx um packages. Your buttons and everything. You've got your code that you want to use. If you want to use it, you drop downs, and these are all using what I would call the SharePoint style of controls, which is very good for SharePoint, but it's getting it. It's actually starting to show that it's not quite The Styling anymore, especially around Outlook.

B

It's getting a bit rounder with their boxes and with their buttons, but there's stuff in the old in the fluent UI, seven and eight that you can't get in the new one which I'll go through in a second but absolutely amazing controls and the source code is there. You can literally just go into the source code, Tab and drag and drop so fluent. Ui 9 is the new version that Microsoft is making uh it's Windows 11 styled react based, it merges, and this is the big one. It merges eight and North Star together.

B

So anybody that's developing stuff for teams still no very heavily about Northstar, and this is merging that into one Library. It's an ongoing project and currently there's only 60 components. So you've got a lot more in the older version of fluent UI, but they are heavily developed and fluent UI, 9. and yeah. The big thing there is: it merges eight and North Star into one mod one thing so quick little video now of um the fluent UI 9 react website.

B

um Conversion is 9.7 as of when I recorded this on Monday. um There are like I, said: 60 plus components. You've got all your standard components in there, as well as the very useful tab list. One. No um just seen that in chat, no spfx 1.16 is not using fluent UI 9, it's still using fluid ui7.

B

uh So this is what it. What it looks like um these are. The buttons are a lot more styled around um Windows, 10 and 11..

B

um Yeah. You've got your compound buttons, your split buttons, your toggle buttons. uh You've got your tab list in here as well. Wait and, as you can see, it looks a lot more like what you get with. Windows 11 and The Styling around that uh what else have I got in here? um Yeah we go through what the vertical appearance looks like and yeah.

B

We've got the sliders uh we've got the dialogues as well, and you can see that they look a lot more like Windows 11 than they would um the older style um a lot more in keeping with Outlook and that so I set the demo and show you the fluent UI 9 demo that I've put together. um This has actually been updated thanks a vesser for um releasing 1.16 a couple of days ago, it has been up to I, have updated my um the module.

B

It probably hasn't hit the repo, yet uh so yeah I've added this into um a com site here just installed the app in the normal way and we'll go and see where it is now so uh go up to the fluent UI Tab and you can see now. It looks very, very similar to The Standard fluent UI package and that's some of the magic that I'm doing in the background. But you can see subtle differences, especially in the buttons the corners aren't more rounded. In fluent UI 9.

B

you've got your tab controls and they were in more of the windows 11 way of doing things and yeah you've got your card controls in here, and your inputs.

B

Yeah you've got your inputs, the inputs are again more windows, UI Windows, 11 UI based- and this is one of the other module one of the other source codes that we have I've made, and it's actually made using fluent UI 9, so um yeah. The last part of this demo is just going to show you quickly that uh I'm hoping that they're going to merge, merge all the fluent uis into one but fluent UI, 9 isn't probably where I would say at a state that it's good enough for swapping over to yet it's getting there.

B

It is. um It says it's a lot faster to use um and using more of the modern paradigms for coding. So you can see here I'm showing off that um I've used the table. Control um I've used the SharePoint dialogue information for who somebody is. You can see here the search box and text input. So you can see that's more in the windows 11 star, where it's um you get that animation on the end of the line and Jeff.

B

That is, that is the quick demo of that, um but I would be hesitant and I'll show off some of the cool features of fluent UI 9, and that is around when you move over to teams and uh with the magic of spfx whenever the team's functionality came in, but also you'll, see in a second the uh 16 stuff.

B

So you can see here it's picking up the style, colors from teams um and yeah, there's not much more to say it's picking up the style color from teams, but here's the big thing that happens when you go into dark mode. It's pulling across the dark mode theme for teams and that's native in the I'm doing a bit of code. Interaction make that happen, but the themes are actually native and fluent UI.

B

Nothing and we'll go now into something that I recorded probably an hour before this demo, and that is I managed to get my outlook.com functionality working in this uh thanks in part, two um obviously SPF x16, and you can see there that even toggling into dark mode. The theme is changing inside of Outlook as well.

B

So let's have a look at some of the code, so the first thing you'll need to do is actually install the flute. Ui react components. That's done using the standard, npm stuff, I'm doing the short times here, optionally. If you're doing this from the get from start, you can actually uninstall the older version. The office UI fabric react components because you don't need them foreign see if this is going to work properly.

B

So this is the code and so in the web Parts the actual webpart itself. We need to import the providers. The theme providers, as well as the I'm importing here, the team start the team's light and the web light and dark themes.

B

I am also pull it. I've pulled in a shim from the dots that Microsoft's released to map across the theme. This is slightly different from the code. That's currently in GitHub. That pull request is currently going through to move over to this. It's something that um the fluent UI 9 team has released. I've used an enum then to actually set what um app mode the app's running in and you can see there that's been updated for spfx 16 1.16.

B

We are just obviously setting initializing some config variables there and then the one of the big bits that's going in is using SPF x16, obviously pulling across from the team's JS SDK. Well like what app, what mode the app is running in, if it's, if the SDK isn't there, it's actually in SharePoint mode, so we're just picking that up and popping that into a local variable, so yeah the actually rendering the components were actually still in this here.

B

But what we need to do is wrap uh wrap the actual control itself in the fluent UI provider. So this is just us initializing it, but instead of passing that directly to the renderer, we're saving that in a variable and then we're wrapping that we're creating a fluent provider.

B

Variable then- and this is where we're doing some of the magic around setting- which theme we want to use depending on which app mode we're in so, if we're in teams we're going to set it either into team stock or teams like, depending if it's in dark mode, if it's in sharepoints we're going to set it either to use the web Dark theme or use. The theme that has been set in the SharePoint site itself fail in that we're going to fall over to using the web dark and web liked themes.

B

So that is an addition that I did today to get Outlook working and then on the renderer, we're actually passing through the fluent UI elements rather than the actual element itself. The element itself is getting put in in as a child on the Flint provider um and then on the theme change.

B

We just need to do a bit of work here just to- and this is where the shim comes in- we're passing the theme that we get through as a read-only read-only item from spfx and passing that through to the shim, which is mapping all of the colors onto the new fluent UI framework um and I believe I share the shim in the next one yep, so I've slightly concatenated this and remove some. um This is available from the fluent UI docs site.

B

There they've got a TS file with the shim actually in I've, taken that uh stripped out to some of the bits, because the effects and fonts um I couldn't get work in so I've just done the colors in this one using their mapping file and that gets mapped onto the standard theme and then in the actual demo, I've just concatenated this down again uh I went forward too far.

B

There uh we're pulling through the buttons and I'm just showing off how it works with a tab list and then the um how dividers work and some of the buttons work. uh Full Source codes, I, think David or somebody has already probably shared the link to the repo for this um one thing to note is Stacks currently do not exist in fluent UI 9, so those that are very familiar with using Stacks um they're, not influent, UI nothing. Yet they may not come to your own line.

B

So if you want to do it, the simplest method I've found to do this is just to use a bit of CSS too. Do it, but there are some shims available as well, and that is it for me. I think I managed to Rattle through that. So thank you very much links.

A

Thanks a lot Nick, that's uh that's a great overview of fluent ui9.

A

um Definitely something for all developers to know about. If they're not uh using some sort of standard controls, they certainly ought to be. There are a few other options out there if anyone's interested too.