Microsoft 365 Community Viva Connections & SharePoint Framework, 20 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 20th of April, 2023

Description

Viva Connections & SharePoint community call on April 20th.

Three demos: The Canary in the coalmine or how to keep an eye on the SharePoint Search updates, Building Service Health solution for Microsoft 365 with SharePoint Framework, and Introduction to hTWOo v2.0 - a better Fluent UI framework.

Six project releases: SPFx v1.17.1. PnPjs v3.14, CLI v6.6, React Controls v3.14.0, Property Controls v3.13.0, and Viva Connections Toolkit v0.4.4.

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
07:41 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
08:56 – PnPjs Client-Side Libraries – Julie Turner (Sympraxis Consulting) | @jfj1997
10:40 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
12:33 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
13:36 – PnP SPFx Controls – Alex Terentiev (Microsoft) | @alexaterentiev
14:16 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
14:55 – PnP Modern Search – Garry Trinder (Microsoft) | @garrytrinder
15:32 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
16:06 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
17:19 – Demo – The Canary in the coalmine or how to keep an eye on the SharePoint Search updates - Kasper Bo Larsen (Fellowmind) | @kasperbolarsen
23:43 – Demo – Building Service Health solution for Microsoft 365 with SharePoint Framework - Harminder Singh (Nagarro) | @Harminder_Sethi
33:23 – Demo – Introduction to hTWOo v2.0 - a better Fluent UI framework - Stefan Bauer (N8D) | @StfBauer
52:34 – Closing

Learn more
• See the full blog post for this call in the Microsoft 365 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 Platform Community - http://aka.ms/community/home

A

Foreign to uh this week's Viva, Collections and SharePoint framework, bi-weekly sync, my name is Gary trinder I will be your host for today and on today's session, we're gonna have the latest update on the SharePoint framework. We're going to have the latest updates on all the community projects as well, uh we'll all then get on camera and have our picture time uh session in together mode, and then we have this real stars. For today we have three demos for you.

A

We have Casper Bo, Larsen who's, going to be telling us all about SharePoint search updates and how to keep an eye on those. We have haminder Singh who's, going to show us how to build a service, Health Solution for Microsoft 365, the SharePoint framework, and then we have Stefan Bauer. Who is going to give us an introduction to the H2O UI framework, uh a better fluent UI framework. So there we are it's a bold statement. So how can you get involved in the community? Well, there's lots of different ways of getting involved.

A

There's lots of content um as well, that's produced by the uh the community, um the Microsoft 365 and Power Platform Community videos. So every recording of this session and all of the demos are put on the community Channel. We have a LinkedIn group, LinkedIn group for discussions. So if you're on LinkedIn and you're not part of this group, just pop along, uh join as a member you'll find lots of articles that are being shared, but also people starting discussions as well.

A

So get that get involved, uh get participating, get answering questions, uh and you know, if you have friends who are not part of that group, tell them about it as well, and we have tons of Open Source initiatives as well and we have PMP repo. We have the office repo with the SharePoint repo and the Microsoft graph repos as well.

A

So, if you're looking at about getting involved as a contributor and that's a great place to start and if you're looking for um some samples as well so things that people have already built in the community and they've they've shared it with the rest of the world, so that you can find out how to also build cool things like them and even use it and start of your own projects.

A

Then we have the the unified sample Gallery, um where you'll find all sorts of samples, SharePoint framework, Microsoft teams, uh Microsoft lists, you name, it you'll, find it there um and if you can't remember any of the links uh the best place to go to is to the uh the landing page of the Microsoft 365 and Power Platform Community, which is AKA dot, Ms, slash, Community, slash home you'll, basically be able to access all of the resources uh that is is available for you through the community.

A

um We have a number of calls that take place as well. um Not just this call, but we have other other calls and taking place. We have the weekly Microsoft, 365 and Power Platform uh call, which has just Microsoft speakers, so that is every Tuesday, um and then we have regular bi-weekly uh Community calls for Power Platform Microsoft identity office at add-ins, um as well as as this uh call that you're on today.

A

uh If you want to get all the details for these calls and to be able to join them and add them to your calendars, then go to AKA dot, Ms, slash, Community, slash, calls and you'll be able to find all the invites there and all of the links to uh to join the uh the the calls as well.

A

um So next Tuesday we do have the regular weekly call. So we've got three um sessions uh for you uh coming up. We have Stuart McCarthy and Marcus Castro, who are going to tell us about why we would build Power Solutions in teams.

A

um You'll have myself go trinda I'm going to be talking about how to bring your existing projects to teams toolkit for visual studio code, and we have Ahmad mosifar. Who is going to basically demonstrate a uh a project that won the Microsoft graph uh hackathon? That was uh recently run, so it's a magic note app to plan the day efficiently with AI and Ms graph, which sounds absolutely fantastic.

A

um If you would like to come on this call- and you would like to present then by all means, get in touch and the easiest way to to do that is through the yeah through the link, AKA, dot, Ms, slash, Community, slash, request, slash demo fill out the form um and we will make sure that we can get you on the call for you to uh to present and share your knowledge with the rest of the community.

A

um So uh David's not on the call today, um but uh if he was here he'd be telling you about how the PMP Community helps you get started as well. So there are numerous several sessions um that are available for you to get started as a first-time uh contributor.

A

We have uh sessions for writing for the web, getting set up with SharePoint framework how to use the samples um how to use the vs code for not just uh not just code um first time presenter sessions and of also the Microsoft 365 model practitioners sessions are are all on there. If you go to aka.ms sharing, is caring, you'll get all the full details and they are looking for volunteers. So, if you're interested in helping other people uh get into the community, then uh definitely reach out and I'm.

A

Sure David will be happy to talk to you about that.

A

Which of the community see? We want to recognize all the good work that everyone is doing as well, so there are several badges that are available to you as a community contributor. These are the same badges that you would get for. Passing like Microsoft accreditations is powered by credly and we're always adding more. So if you are looking for, you know recognition uh for for your contributions, then we'd love to give that recognition as well, and so, if you want to find out more details, go to AKA dot, Ms, slash, Community, slash recognition, face search.

A

You want to take this slide. Yes,.

B

uh So uh quickly being cautious about the time again, so Microsoft 365 conference happening in May, 2nd to May 4th. We have an awesome set up there and we have multiple Keynotes uh and a great great set of announcements actually coming up on that conference as well. So it should be really really interesting. If you have an opportunity, hopefully we can meet you there. Let's go to the following slide: I think Broadway is going to quickly recap this one.

C

Yes, hi I was visiting my grandma in the countryside and she said that all her Azure applications could use a lot more usage and a lot more collaboration. So I invited her to this great webcast, which is a week from today, uh which is Microsoft teams.

C

App Camp extend your Azure solution to Microsoft teams, so it's all about Azure and teams development and actually how to extend your Azure existing Azure investments in to become Microsoft teams apps, and um so please join us uh teams, app Camp, AKA, dot, Ms, slash teams, app Camp is the registration I'll, be joined by Robia Williams and we'll have a surprise guest of Gary trinder.

C

So back to you,.

A

Here's that 'd be great to join. You sounds like a great session. Okay, moving on SharePoint framework updates, they said.

B

Back to you, so the latest version which is available is 1.17.1 uh that that is kind of a small patch release. We we found a small thing which is not actually critical in 1.17, but we wanted to address that immediately and you might actually see similar kind of updates in the future as well. Let's go to the following: Slide. The growth curve of SharePoint framework is is awesome. uh It keeps on just growing uh all the time, so we can see an adaption across the Microsoft 365, which is awesome.

B

Now, let's go to the following slide 1.7 day one. uh It's the current version, which is the ga for production 1.17, is fine as well. 1.791 has bit more adjustments, and this is really targeting Microsoft, Viva, extensibility and spfx within the team, so we're aligned on that storyline with spfx applications. Then you can easily extend them to office.com and and for Outlook.

B

If you want to do so next, we'll uh get some details around what framework power to give a connection cards uh which is going to be in public preview prediction and then 1.18 I will come to preview. That's it for my site from engineering site. Let's move to the open source protections.

A

Let's talk about the open source projects and move on to pmpgs Julie, yes,.

D

So we uh did the release for version 3.14 on Monday the 17th. We had to move it because I was on vacation. uh Anyway, we had a bug fix for some missing quotes in that recycle bin get by ID method so that got fixed up. We did a big new ad for a Azure identity, JavaScript client package, so that is a new package uh in our uh packages, library for pmp.js that allows support for Azure identity, most useful for node.js project development projects, but it does support a lot of different things.

D

So, if you're wanting to get started using managed identity in your Azure functions or some of the other Azure properties than you definitely want to check that out, we updated uh taxonomy documentation. We have updated our graph default and SP default, node behaviors to deprecate the m cell parameter, and this is in relation to that Azure, identity, client thing, and so that is deprecated check that out and fixed and added the tenant, app catalog property to the SP. The root SP object and and got the web app catalog working correctly.

D

So those all fixes happened definitely check out that V3 nightly builds for any PRS that are merged in between monthly releases. You can see those uh those things there and test them out ahead of time and always remember to follow us M365 pmpgs on Twitter back to you, Gary.

A

Thank you Julie and stay alive for Microsoft 365.. uh So we've had a new release. We have the version 6.6 release. uh This is an interim uh release um because of the release of uh SharePoint framework 1.17.1. So we've released this version so that you can go and upgrade your projects to that latest version. uh You don't have to get the beta version for that. We've also updated our project uh doctor and spfx doctors commands as well, and just to kind of do uh diagnostic checks on your environment as well.

A

Just make sure you've got everything in place to uh to build on the new SharePoint framework version and we've got new command for Power Platform. So that's the ability to update your tenant settings and something we're really excited about. So we have added AI chat, powered search to our documentation, so this means that you can use natural language to explore the documentation. You can ask it.

A

Questions like how do I upgrade my SharePoint framework and uh project and you'll get a natural response and you can keep having a conversation uh with the with the chat as well really excited about that we'd like to thank uh folks from mendible uh who have worked with us to to get that in place. So please check it out uh and let us know how it works, and if you want to get hold of the new uh version, then you can get that from npm using the at latest tag.

A

um And if you want to use Docker again, we've got the latest tag on there. um If you want to get involved in our community best place is to join our Discord server, uh so again really excited about all the activity that we've seen on on the server.

A

um And if you wanted to know more and ask you know the community about how you can use the the CLI and then that's a great place to start as well as following us on Twitter as well at CLI, Microsoft 365 for all the latest updates.

A

Okay moving on so we have Microsoft graph develop proxy. um So uh last month was the uh early. In the month we released 0.6. We don't have any uh updates really um to give you, apart from the next version, is due for release, uh but next week actually- and we've got a few things that we're we're going to be looking at so um being able to run the tool in cicd uh graph, batching guidance, spot for expiring tokens and just some general improvements as well.

A

If you haven't used the proxy, then go along check, it out, go to AKA, dot, Ms, slash graph proxy, slash, download and you'll be able to download the tool go through our getting started, tutorials as as well and basically start testing your applications and make sure that they are resilient for when uh Cloud apis, uh either fail or or have behaviors such as throttling, uh which is obviously difficult to to recreate on on your own machine.

A

Moving on I think we have Alex here for the reusable spfx controls.

E

Yes, thank you very so yesterday we released three fortino for react. Controls and three 1504 react property controls. uh Both libraries now support spfx 117 1, and they also have some enhancements and various fixes for uh different types of components. uh Thank you. Thank you. Thank you for all our contributors who made these releases available. uh You can check more information about the libraries on GitHub and also on the Twitter. Thank you back to you. Gary.

A

Thank you, Alex uh Vasa update on the toolkit.

B

On the VR connection toolkit, we do have the latest version, which went actually live earlier today, updated to your SharePoint framework, 1.71 and CLI for Microsoft 360 at 6.6, behind of the scene. So basically, this is an abstraction wrapper on top of those out of the uh the the out of the box in production, SharePoint framework, human generator, and then the awesome CLI for Microsoft series is fine. We also do have a new maintainer in the team. Who's Adam, voichek who's, going to help on uh improving these things, and we do welcome contributions.

B

Absolutely that's it from that side, fantastic.

A

A quick update on PMP, modern search, um so there's lots of questions on on GitHub and the usage is growing. There is the 4.8 version, um so lots of contributors uh getting involved and adding new features, um but more contributors are wanted. So if you're a developer looking to get involved in open source- and then you know definitely, this is a project that is yeah screaming out for new people to to help so uh so go along there and uh start contributing um quickly, PMP spfx samples.

A

So uh fortunately there are no new samples to to talk about. uh However, if you do have something that you are building- and you think this would make a great sample I want to share this with with other people and then definitely think about contributing uh your sample. And then you can get recognized on this call as well.

A

So if you go to AKA dot, Ms, slash, M365 samples and you'll be able to see all of the samples that are available, but also find out how to actually submit your samples as well, and with that we have that we had picture time.

B

Gary I have to call out on the SPF examples. There were a lot of contributions but they're pending for final processing, because the theme has been incredibly busy with MFA Summit and all of the other conferences, but that's on us we're trying to get uh jump on them pretty soon. Now, let's get in here. Let's do the crew photo. Hopefully the pixelation gets better. I will double check my network, which should be okay, uh not that the pixelation looks really really really bad. Give me one.

B

Second, I will stop my camera if that helps, I will pop away from the picture and it doesn't help now from a time in perspective, it's okay, we can see everybody to to wave their hands. I will put the one two three running and we'll grab AK FUNimation. Out of that, no can do it's pretty pixelated today, thanks everybody for joining awesome to have you in a call, and hopefully we can see you in the in-person conferences later this month. Okay, Gary already took it away. Okay, cool.

A

Sorry, gotta keep okay pick time up um so uh on to the main part of uh today, our our Superstars, our three Superstars. First, we have Casper Bo Larsen and he's going to tell us about SharePoint search updates, Casper. Indeed,.

F

I will do thank you.

F

So what I'm going to talk about today is about the very famous Canary in the coal mine um or the subtitle is how to keep an eye on U.S SharePoint search updates, uh because, as some of you might know, we don't really have an SLA for any updates to the search index and a lot of us are creating a lot of solutions which are based on search, and we can't really see anything in the M365 Health dashboard about how well the search indexes is actually performing. So that's what we're going to to discuss today.

F

My name is Casper Larson and you can contact me on Twitter using that handle, and you can find me on GitHub as well and I'm, primarily working on the PNP, modern search and PMP script, samples repositories and I'm from Denmark and I work in philomai Denmark.

F

So the reason for this initial version is that I had some outages on search, and you can't really see that anywhere. So I had to figure out how to make a early warning system, and this is exactly what I've done here: I just use brute force.

F

So what I do is that I have my SharePoint list, always use SharePoint, that's uh that's where I grew up and the only thing I have is basically a single list item where I update the value, but the only thing I do is basically I. Have my list item and I update that and then I have a nature function which will trigger. Let's just saw there. It triggers every five minutes.

F

That's the interval I've decided on in this case, and so every five minutes I check that the value I have here match the ones I have in the search index.

F

If it does, then I'll just update this one, it's just basically a date time tips and so I'll update that on if it doesn't match yet, which I don't expect within five minutes. That's that will be exceptional if it doesn't match I'll just try again later and once I uh do this I just put that into my login list. So in five minutes, I update this list saying whether I either if I found the same identical values or not.

F

So it's um it's a pretty simple warning system and if it exceeds some threshold, it could be like 30 minutes for the item to be picked up and put into the search index. I can issue a warning or put on a red light in my internet or whatever I want.

F

But now at least I know that the solutions that I have built working on search might have an issue, and I can warn my um my users that they might not rely that much on what would they see right now, but I hope it will be better later on and I can also erase a service request for Microsoft support just to let them know that we have an outage right now. A sort of like an ouch is because we don't have an SLA.

F

So at least we have a bad performance right now on the search index and that might raise awareness so that they might be able to allocate some more resources for it, because the search index is sort of like a priority based. So if somebody on the farm are doing a lot of heavy duty work, you might get a throttle. So sort of throttle, basically meaning that the search index doesn't update that often the problem is that the farm Concept in Office 365 is basically a number of tenants.

F

We don't even know how many tenants are in a farm. It could be thousands, so we don't know who is actually the culprit here, who's actually doing a lot of heavy duty, work and slowing us down. So basically we just have to learn to live with it. So that's why, at this early warning system might be a good idea.

F

Just put all of this into my repository, which is of course available for for download, and you can use it as you please, but, as you see I'm, just using basically my SharePoint any SharePoint site a list for the the container. The target of my uh comparison, where I use, search and I use, get the list item and then I just had just logged into any kind of logging list, and this one says I said in the Azure function. Some people might be concerned about the cost of this asset function. It's hitting this.

F

It's triggered every five minutes, so it must be pretty expensive. People might guess, as far as I could tell and I've been running this for more than half a year now it cost me about two dollars each month and I would like to spend two dollars in order to sleep well and know that if something happens then I know it. First then, before my end, users are starting to to call me uh early in the morning.

F

So that's for. For me, that is important, but all I do is basically uh down here. I just get my list item looking at the tick value, I request the same item again using search, compare those two values and if they're identical everything is fine, I'll just reset, if it's not fine, I'll log it into a to the logging list and if it exceeds some kind of threshold I can do something in this case is just that: I send an email to myself, um but that is completely up to you and I'll.

F

Make sure that the link to this repository is in the in in the show notes, sort of I think that was all for. For my presentation so have fun with.

A

That fantastic, thank you very much for sharing that Casper um shark, sweet, but fantastic, see the reaction in the uh in the chat with a lot of people excited about what you've just shared. So uh thank you very much for uh coming on and talking about that today.

A

um Okay, so, let's move on to our next presenter, um Harminder Singh is going to tell us about building service Health Solution for Microsoft 365, with SharePoint framework haminda.

G

Thanks Gary today, I'm gonna show you the spfx weapon which I created with the help of graph API and the idea I got when we had a outage a couple of months back, and that was a major outage and nobody was having any clue what's happening so in case. If someone is uh admin, they could go to the service health and they could check what's happening because service helps provide us. The current status and all the issue, laws as well so I got that idea.

G

I thought, let's make that work for everyone with the help of graph API and I. Did it before I move on uh myself, Harminder Singh I am M365 solution, developer I'm, working with nagaro in India and I live in a city, beautiful Chandigarh.

G

These are my handles where anyone can contact with me and I'll, be happy to connect and share my knowledge and we'll see my uh other feedbacks, also so moving to demo.

G

If we want to see this service health of any of the Microsoft 365 service, then we have to go to the admin Center and in the health section we have the service Health option available. Where we see the current health status of all the services we have in Microsoft 365.

G

and as of now, what we see is exchange online is having three advisory and Microsoft 365 Defender is having one advisory so similar way in case. If someone wants to see all these status, then I created this web part, which looks similar to the service Health. We have in Microsoft, 365 admin, Center, so look and feel wise and the functionality wise I try to replicate everything similar to the Microsoft admin Center.

G

If I click on this three advisories, it shows the Tableau structure with all the advisories we have with the issue title and the issue type. So if I click over here, it will show the same table and in case, if I click on any of the item, it will show the status with all the updates, similar to the one we have in the Microsoft 365.

G

and in case. If we have only one advisory or one issue, then it will directly go to the detail section and it will not show the table which is similar again to the one we have in the Microsoft. 365., so to make it work, I'll move to the code part to make it work. What I have used is the The Source Microsoft graph, and the scope which I set is to service healthread.all and from the web part perspective, and this is the entry point for the web part where I have used very minimize properties.

G

So I just have the title which sets the web part title, and on top of that, what I do is I create a graph service which is a kind of reusable service, and my normal practice is that I create all these services in a common folder outside the web parts. So in case in future, I need to add any new web part which will be using the same graph. Service.

G

I will be referring this service from the common folder, which is in the services, so whatever uh Services, which I think is common across all the weapons I put that in a common folder over here and I initialize that service in this on init method and pass that instance to my main element, react element which is M365 service Health in the form of property. So it receives the title property, the context of the web part and the graph service which I initialized over here.

G

If I typically move to the graph service, it simply has a two methods. One is a private which helps us in getting the client, the graph client and the other one is the end point which provides us. The health overviews, which also has the issues detail expanded.

G

So that is all from the service perspective and if I move to the web part or the main element, then it has two sub element which are again very simple. First simply shows the title and other contains the actual logic, and if I move to the uh the main element, I would say, or the component I would say, then it has a very simple return method which either show the spinner when the form loads.

G

So graph API takes some time to provide the actual data, so I simply show the spinner, and then the detail is from the fluent UI, which shows the uh the title and the status of the services- and we have two panels over here. First is showing the tabular uh structure when we have more than one issues or advisory.

G

So if we click on that, then it shows the table and the other one is the detail thing which we get when we have only single advisory or if we click any of the item in the table from the first panel and the idea to create the two panel was that in case, if someone opens the uh table or the or the panel which is having the table, then they can go back by clicking on the back button.

G

So it's better that we manage it in separately, so that uh I can show or hide one of the panel at one point and all these components which I have designed, except this, the main webpart.ts file are based on the functional based, react components and in this react.use effect hook, I am calling the graph service gelt get health overview function, which provides me the service, Health response and based upon the response which I received I create the list view items, and this list view helper service. Again.

G

This is a local service which I have created in this web part, and it gives me the code or the functionality to provide the count and show whether it is a advisory or incident or if it is healthy, then it will simply show the healthy. So basically it will create the structure of the item and then the detail list will show that item to me over here and once we select any of the item from the detail list. If it is having more than one advisory or issue, then it is.

G

It shows this panel and in this panel I again have the table structure created and it's again stateless component. It doesn't have any state, it simply Returns the structure of the table and the other component, which I have is, which shows the complete detail of the issue. That again, is a stateless component.

G

Now the good thing which I got is that this issue, Service uh Returns the proper HTML for the detail, issue logs, so I just need to iterate through all the post and those are again HTML and I simply set it in the div element. So I don't need to design any of the CSS or I need I, don't need to provide any of the styling except these uh Miner Styles, which allows me to set the margin and white space area.

G

So I think that was all before I close this one I just want to show one more thing that I try to break all this uh web part into multiple sub component and for each of the component I try to create these stylings at the component level, so that I have a a very manageable code and in case, if I see any issue, I simply need to go to that component at and I I can fix it uh back to you. Gary.

A

Fantastic I mean that that's great I loved, looking at your code by the way nice, nice and clean and love the use of the stateless components there, um as well as the dangerously set in a HTML of property, which I've not seen for a while, but I've used myself in the past. uh Definitely but uh fantastic solution, great use case as well.

A

um So you know if you're, actually a question is this: has this been put in the samples Gallery? um Is this available or where people you know, can people get to this? Yes, it is fantastic. So, if you've enjoyed what you've seen uh then take a look at the samples Gallery uh and take a look and have a look through the code yourself and uh maybe even contribute to it as well make it you know, add to it, make it better uh than it already is uh fantastic.

A

Okay, uh let's move on to our next speaker and we have Stefan Bauer who's going to tell us about H2O 2.0, a better fluent UI framework Stefan over to you. Thank.

H

You Gary give me a second I share my screen in a bit, so it show a better fluent UI. um This is some project that we already created two years ago, which was the goal to uh back. In the old days we had the office UI fabric, which was just HTML and CSS, and so this was some at some point deprecated.

H

So we wanted to go back to this, and this was really the first draft of H2 was really a weekend project, so it was two days coding and then I had the most of the fluent UI components uh done in HTML CSS and a little bit of JavaScript. We need this in some cases. Another thing or another motivation for each show was accessibility. First, so I wanted to learn more about accessibility and I built H2 directly with all the accessibility in there. So we are currently testing for the web content. Accessibility.

H

Guideline 2.2, which is is Rec, is the recommended state for um since last year and double a means. The quality standard that we have there so we're in the middle there's just one Higher, which is the AAA, but the AAA is- is the minimum that you should aim for when you want to make accessibility applications. So we also support the EU standard in there, which has an own uh standard and then the US Standard 500, or a section 508, which is defined by the U.S government.

H

There is also a link here also, uh if you want to know more about accessibility, a link to your uh put your link that gives you more information on that. uh So H2 is, is basically for SharePoint teams and any web application. So we are completely independent because we just use HTML at the core level right.

H

So the way we build H2O so and we have two flavors there of the water as it will. So we have the first H2O core is just really the HTML uh CSS and JavaScript implementation, which then will be taken 101 into react components.

H

So, if you're not want to write HTML and CSS only or use the components in an HTML CSS only way, then you can still use the react components, but whenever we build something, we first build an age so core in HTML CSS only and yeah, and also what you'll have in there in H2. We also support the H2O icons, which are the fluent UI icons, and there are 3000 that you find also in nature with a dedicated sample.

H

If you want to know more, if you want to find the npm packages, so then the simplest way to do it, go to npmgs and search for for H2O.

H

Like I said we currently have the version 2. and we wanted to get HTML and CSS right from the for right from the start uh correctly, so that we don't have breaking changes and since version 1 and version two, there are really no HTML and CSS breaking changes and no react breaking changes in there. uh So there's no complicated upgrade policy. You simply use your older application that was built with version 1.0. You just simply can use it.

H

The only thing that we did, we write, we wrote the the complete Library internal, the CSS, that is built out completely in SAS start, which is also supported uh nowadays in SAS, 116 and onwards, and we also have in there. If you upgraded your your solution not yet to 116.1, then you still can use all the CSS in there. So there's no breaking changes in this regards as well.

H

Let me show you a little bit go out of this documentation, so we have our completely new revamped website. Like I said you have the H2 icons in here, which are the fluent UI icons, so you can search, for example, uh for truck and then select this one and then you can download it. So there are two stars in Here, regular and filled and can download those files this this svgs as one file and then use it in your applications.

H

What else do we have so we have here the documentation in here atoms molecules, organisms, template and pages. So if you go search for bigger components and you go to pages and then they gradually go down so what I see here is is, for example, for the Microsoft teams kind, it's a splash screen with three Splash screens across, and you also have the description here uh when I go in here then I see this is one component that is built out. What is this component built out?

H

So I can say: okay, what is the footer built out and I can then see here? Okay, we have a primary and the standard button in there and how it is built out. So you can really dig into and and redirectly code in the system, so we don't need to spend any time extra effort and documentation uh on documentation, so we build it right in there.

H

This is how we build out all the components, so there are some components. So what you also seen here, for example, this pattern is now the standard SharePoint teal and you have a switcher in here. So you see, for example. This is how it looks on the regular standard teams client. This looks how it looks in high contrast mode- and this is how the button then looks on on the Dark theme in Microsoft teams.

H

Another thing that we have in here, or invested a little bit that maybe you're not aware of there are so many things that currently working in in HTML already. So what we have in here is a validation uh for for the input Fields, so over here, I specified a pattern which says a to c small uh lowercase letters and I want to have four to eight letters in there with the pattern directly in there, that's native HTML and then I when I type in one two three four.

H

It gives me the red border in here and says uh this is incorrect. So you this this field is invalid. Of course you can also request this with JavaScript, but then, when I write in here, A B C, D, E, F G I have six characters now in there and now it's a valid field. So a lot of things in there where we invested. So we have all the input Fields like email, password phone uh input with prefix with URL uh prefixed with Fields like that and yeah.

H

um If you have time, then look look around and what you find in there. So the question is now: how do I get this into my SharePoint framework project right and let me switch over to the code. The first thing that you need to do is we have the on in it. This is documented, so you get the stream provider back from from Microsoft, so you have all the semantic slots in there, the uh the if defects in there and and then you create out of that CSS variables.

H

So there's one simple. So what we basically do is we add? Where is it? We add custom properties to the Dom element of the web part, and then we have all the colors that are coming from the theme from from SharePoint into a CSS native way and have all the all the color slots in there, which then will be used for from from H2O directly.

H

um We had some problems with semantic slots, because sometimes the semantic slots doesn't match exactly what the name of the semantic slot is. So we choose in in version one already that we switch over to to pellets the other thing. What you have in in the effects is, you have in there the roundness of the buttons, as you see here on the right side, uh this is also something um that that comes that's directly defined by SharePoint out of the box, so the major breaking change. What what I told you before this SAS start?

H

So we you see when you create a new webpart project. You have the ad Import in here and you, it Imports those style sheets from somewhere from the node modules folder from the at Microsoft folder. This is currently in SAS mark this deprecated and they shouldn't use this anymore. Instead. What you should do is the first thing is.

H

The use statement can be compared to the import statement in in JavaScript or in c-sharp, so it Imports a library uh which is the meta utilities from SAS, as you will, and then we have here the web part, which is the surrounding class, which is prefixed or or post fixed uh with a random string, so that we don't have uh that we don't plead somewhere else outside of SharePoint, but since we have all H CSS classes in there, which doesn't support it. This this scoping that Microsoft does in the spfx web part.

H

We do a small trick here, so whatever we import here will be automatically prefixed with the H2O showcase class and what we also have in here, the global style. So it means the pseudo class means, don't touch my CSS that we have in there okay. So now we have all imported all the stars in there and it you see this button as it looks right now.

H

um What one thing that you can do here is, or what I did here is simply I went over to H2O, go to the buttons but um and then search for what is it primary go to buttons directly?

H

It works um buttons and then I here's the primary button. Then you can switch over here to HTML and you can take this one out and directly copy it into your render method in the HTML. So this is how this button was created and, as you see it automatically, all the CSS will be applied automatically. So this is not really a smart way to do it. I'll show you another way. What I did also in here so I have the components in here. Another way is I, create a new component, which is a static component.

H

Zest has a function here: primary a passenger label or when there is no label defined, then return me back the the uh the button label, as you will, and what I can do now directly in the HTML is I can go in here. Paste this into the template. Literal call the function passing. This is a primary button for the break. Afterwards save the file, and if the demo gods are with me, then you should see immediately the right side refreshing as far as when it has built. So this is the primary button.

H

This is one thing that I can use another thing that you can do with use in the button, and this is a little bit more complex written, so it this public, static, standard button creates a standard button. It has a you can pass in the label. As with the button above, you can pass in the Callback function, which then will be called automatically.

H

Then what I do in here, then it Returns the HTML button, so I create the button in here with document.create, then I add the H2O button class to it, which is the class of the standard button set in HTML. What I want to have in there with the spam as a template, literal and then register. If there is a callback register automatically the button and then return it. Of course, in my code here, I need to do a little bit.

H

Different I need to now say this dot dot, Dom element, first element, child prepend, H2 pattern, standard with event and then I pass in this click function, which does nothing else than just sends out an alert, save the file, and we should then see in a couple of seconds. The button appear on the right side when the build is done.

D

Hey Stefan, can you zoom your code in a little bit sure better.

H

C

H

I have to now I have the button. I can also zoom in here. Let's click the button, and it says hello world, that's how you can do it, but you can also do more complex stuff, and this is probably what so the PMP reusable component has already an accordion in H2O itself. I also create we also created in this version, an accordion which completely doesn't use any JavaScript. So these are just standard elements in HTML, so this is how it works in H2 uh we have the HTML over here.

H

So this is built out of molecule accordion item. We have here a details which is a standard HTML tag, and then we have a summary in there, which is the header, and this gives you this fancy accordion out of the box with no extra JavaScript involved. The other thing that we did in here in the accordion summary. We set an icon there and have some CSS that rotates this automatically once it is open. So we can do this also bring this over to our uh spfx solution pretty easily.

H

So what I did here is again: I created an accordion item.

H

S so where what I do in here is just it: retrains the template, literal, it's just this details with the classes, then I have the summary. I have the icon directly embedded this in SOG I have my header again that I pass in and I can pass in an HTML content in here, or otherwise it Returns the lorem ipsum.

H

What I can do now in the web part code itself?

H

I can create a function which says, uh get accordion and then I do the same thing. What I did already with the button so I have the H2O accordion item say: I want to create a new item with this title, and this was with this context. In there the same thing I want to create a new accordion item, new accordion item and so on and so forth. No JavaScript evolved just recognize that I miss here, a section.

H

Load it down and what I can do now with this function, with the get accordion I simply add it to my code in here directly in the HTML.

H

And then it after the compilation you see under direct when it's compiled, hopefully.

H

Not that time 46 oh yeah, this was the section was too much. Maybe.

C

H

It works so you have here an accordion, a nice one which has the text that are pushed in here. H2O was built on HTML and CSS. First documentation I have here the lorem ipsum, which are the defaults ones when they're, when I don't compile anything in and again what you saw in in h2r with H2O core is also available as H2O react component.

H

So if you want to know more about it, there is also a Link in here, a QR code, so npm install at NAD, slash, H, show core or when you want to use the ho react component. Npm install at NAD H2O react and follow us on Twitter, but there are some questions.

A

uh There was a question about browser support which I think a good one to answer.

H

uh Yeah browser support uh the first chromium edge browser no Internet, Explorer and most likely I mean for the accordion stuff. This is pretty it's already five. Six seven years old browser will still be supported by the better summary details.

A

So all modern browsers, then essentially right yeah, exactly.

H

Modern browsers, a couple of generations back so I think uh CSS variables is now out for five years six years or something like that. So if you have all the browsers, then I would upgrade those perfect perfect.

A

And and of course, you can use H2O outside of SharePoint framework right, it's not yeah exactly.

H

It's absolutely not dependent on sharement framework. The only thing that you need to do is we already have, so we have standard objects which gives you the root class or what I use in in H2 and HTML documentation. There is no spfx involved, whatever I just have a simple file which contains all the theming slots that are defined in the in the fluent UI fabric palette and- and you pass this into your website, set the CSS variables and then it automatically pass through all the components.

A

Yeah, it's uh I, I think it's great uh personal opinion. um I've used this for a sample, app that we that we have in the uh Microsoft graph developer proxy uh repo as well. um So we just use that as the uh uh as the UI framework for for just a you know a basic HTML JavaScript uh website and it yeah it's it's great. It's nice and lightweight as well.

B

A

The job uh it looks nice as well, it looks, looks beautiful.

H

uh Speaking of lightweight the gcept version of the complete CSS that we have in, there is 15K, and the unzipped version has a 60 uh 68k or something like that, which is everything in there.

A

You won't even notice it it's it's that small yeah fantastic. Well thanks, very much Stefan thanks for telling us about H2O uh I know it's version. Two. It's been. It's been out for a little while gone through some iterations, but yeah I. Think what you've shown today just uh shows uh what our great uh UI framework uh that you and the team have been able to to put together.

A

um Yeah I, I love, it and I'm sure other people love it as as well yeah.

H

Who does the react? Implementation of H2O core.

A

Curious to Julie- that's great team, uh so well done well done to everyone. So uh I think that kind of really concludes uh today's uh call, so I just want to thank Casper, Harminder and Stefan for the the demos today and and sharing their uh thoughts and and knowledge uh with us. uh So thank you for attending. uh Thank you for being a part of this um this session and engaging in the chat with all of your questions as well.

A

uh The recording of This call will be available in 24 hours on the Microsoft 365 and Power Platform Community YouTube channel and, as are all the other previous uh weeks uh recordings and demos as well. So if you want to uh check out the uh the the recordings And subscribe so that you get a notification for when the uh for, when this call uh is uploaded, go to AKA dot, Ms, slash, Community, slash videos um keep engaging with us after this call uh give us a follow at Microsoft, 365 Dev and at m365pnp on Twitter.

A

The next Viva connections and SharePoint framework call is going to be May. The 4th and uh the next uh Microsoft 365 and Power Platform call is next Tuesday uh April the uh 27th, and if you want to find all the details of how to join those calls uh put those calls in your calendar as well as all the other calls that we have available, go to AKA dot, Ms, slash, Community calls and you will find all of the details uh there. So.

A

uh Lastly, I just want to say thank you to everyone, and we will see you next time.

C