Microsoft 365 Community Community Demos, 20 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to hTWOo v2.0 - a better Fluent UI framework

Description

In this 19-minute developer-focused demo, Stefan Bauer reminds us that there are 2 flavors of hTWOo 2.0 (hTWOo-core (html/CSS/js), and hTWOo-react (components)). Changes from v1.0 – no breaking changes, completely rewrote the library internal to CSS in SASS-dart, completely revamped website, and more. See how to get hTWOo into your SPFx project. Step through pulling a button and an accordion item into your project. Q&A - modern browser support, using hTWOo outside SPFx.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 20, 2023.

Demo Presenter
• Stefan Bauer (N8D) | @StfBauer

Supporting materials
• npm – htwoo packages | https://www.npmjs.com/search?q=htwoo
• Guidelines - Web Content Accessibility Guidelines (WCAG) | https://appt.org/guidelines/wcag
• Documentation – hTWOo | https://lab.n8d.studio/htwoo/
• Blog – n8d | https://n8d.at
• Items - Quick Links Compact and List Items | https://lab.n8d.studio/htwoo/htwoo-core/?p=organism-pnp-search-grid

Learn more
• 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

B

Ui, this is some project that we already created two years ago, which was the goal to 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. 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 done in HTML CSS and a little bit of JavaScript. We need this in some cases.

B

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. Guideline 2.2, which is, is the recommended state for um since last year and double a means. The quality system that we have there so we're in the middle there's, just one Higher, which is the a uh but the AAA is, is the minimum that you should aim for when you want to make accessibility applications.

B

So we also support the EU standard in there, which has an own uh standard and then the US Standard 500, oh a section 508, which is defined by the US government. There is also a link here also, uh if you want to know more about the accessibility. A link to your uh put your link that gives you more information on that. uh So H2O 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.

B

So the way we built 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.

B

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 built an H 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 three thousand that you find also initial with a dedicated sample.

B

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.

B

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.

B

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.

B

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 thousand Here regular and filled and can download those files this this svgs as one file and then use it in your applications.

B

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?

B

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.

B

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.

B

Another thing that we have in here I 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 specify the 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.

B

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.

B

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 in there and and then you create out of that CSS variables.

B

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.

B

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've told you before this says start?

B

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 shouldn't use this anymore.

B

Instead, what you should do is the first thing is the you 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 with a random string, so that we don't have uh that we don't pleat somewhere else outside of SharePoint, but since we have all H CSS classes in there, which doesn't support it. This.

B

This scoping that Microsoft does in the spfx web part. 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.

B

So now we have all imported all the stars in there and it you see this button as it looks right now. 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 button and then search for what is it primary go to buttons directly?

B

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

B

It says, has a function in here: primary a pass in a 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.

B

So this is the primary button. 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.

B

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

B

Different I need to now say this dot talk a 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.

A

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

B

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

B

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

B

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

B

S so where what I do in here is just it re drains the template literal, it's just this details with the classes, then, after 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.

B

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

B

I can create the 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 that mysterious section.

B

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

B

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

B

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

A

B

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 the when I don't compile anything in and again what you saw in in h2r with H2O core is also available as a show react component.

B

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 H2 react and follow us on Twitter, but there are some questions.

A

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

B

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 by the summary details.

A

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

B

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 older browsers, then I would upgrade those perfectly.

A

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

B

It's absolutely not dependent on Sherman 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'll 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 Microsoft graph developer proxy uh repo as well. um So we just use that as the 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

Is the job uh it looks nice as well, it looks, looks beautiful.

B

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.

B

Who does the react? Implementation of H2O core.

A

Curious to Julie, so it's a great team. uh It's a well done well done to everyone, foreign.