Microsoft 365 Community Community Demos, 18 Jul 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - ReactJs SPFx block quotation that uses editable HTML and cutting-edge CSS

Description

This community demo is taken from the SharePoint Summer camp community call on on 18th of July 2019. In this video, Stefan Bauer (N8D) is showing how to build great looking React based block quotation with SharePoint Framework.

Presenter - Stefan Bauer (N8D) @StfBauer

You can find more details around SharePoint Framework can be found from following location - http://aka.ms/spfx

Code sample used in this demo is available from following location - https://github.com/StfBauer/blockquote

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Basically, our marketing has set up this nice page here. You see your summer motive filter something else in here, and we have here a traffic right, but this is actually not a graphic. This is actually CSS and HTML, and it's actually real that part that they can modify. So let me first show you how this works and then I'll show you how to code and how this always built up. So when I go here to the Edit, Page I have here, text and I can say here new line and then thank you for for being.

B

A

And it's also hosted not only by an internal and community okay, so I can directly edit all the content of this back part here on the page. And what do you actually see here when I edit, the content? Add more content here, you see their image shines behind the text, which is actually the same image that we have in here, so what it actually does when I edit here this. The content here and I'll show you to some properties. It sets in the background here, the Batpod properties.

A

So, when I look into it here, I have you breaks in here and I have here hosted by Andrew Connell and the community which automatically, whenever I change, something in the web part context. It will automatically propagate it to the quote. I just have this properties here enabled for demo purposes to show you where they end up that they are really used in the in the regular network. Properties and I can even go in here and remove those, because we have a two-way binding on this web part.

A

Whenever you edit here something directly on the page, it's it's will be set here. As properties and finally, I would actually hide this from a real productive use, because there is a small gap in here, because you can insert here all kind of HTML what you don't want to have the user to enter here. So the trick to do this is actually pretty simple and I'll. Show you how this works on a demo web parts here, another instance in my work pension by local one, which has black road again.

A

Can you change my text and after two text areas here with the main content and here below for the author of the of the comment, and this is actually not an text field or an input field or anything else that you use normally in a form. This is basically in a react component, just a block root element and inside here for the author. I have a future element. Okay to make.

A

Actually these content available I only have to pass in a property which says, content editable and set the value, therefore true or when I don't want to edit. It then I'll set it to false. So basically, when I go back to the web part and go to the publishing published page.

A

Now, no one is able to change something on the page, okay, so how we get dis values in from from a webpart perspective. So these are actually regular react properties that are passing here and from the main web part type script file I initiate these pluck wrote an ad and then I give him some properties like the quote. That action should be displayed on the page, the author or the edit Abel, and this is something that comes with the web part context.

A

So you have this display mode equals 2, which means you're in edit mode, so it automatically passing the true value and when you're on a preview or on the display mode- and it actually is you- have it set to false this sim similar, like you, have it headed in the old base, where you can actually execute some Java scripts in the classic experience.

A

Only when you're on display mode and not an edit mode right and then a passing here, two properties, two functions which I actually stored here in the web part directly, and these properties actually makes the two-way binding to save the new code. That has been changed by the user directly to the web properties. So inside my component, the constructor is loaded.

A

It gets the properties in here and when you're in edit mode, it's automatically place in here the content a little true, so I'm able to completely edit whatever like in here, and there is one gap here, because normally you would expect when you change something and if it's the unchanged event, but because content edit table is by default on the input field, types used, it's an unimportant that you get in here so and let me show you this in the sample web part that I added to workbench so going here and I can change here.

A

Let's say important, and you see here on the right side that the event will be fired on input change. On the other hand, when I would have read this event, won't change, nothing would happen. So what do you see here?

A

It's the inner text that I get from from this element from this block, wrote directly without using an eco-tour text field I have Ian in a text with actually has them already the break in here and I do some cleanup here, because normally with the content area table, you are able to paste in directly HTML code, which I don't want to allow so I completely clean up all the HTML tags and the easiest way to do this is when the event is fired. There is a the when the block Road actually changes here.

A

The easiest ways I get the target, which actually has is my my element where the event is registered on, and this has an inner text property. So I only get the inner text of that web part and all the HTML elements that are on there are already removed.

A

The only thing I need to do because I get new carrier newline in here I need to replace them to regular breaks, break elements then I for one thing, update this state here and what I also do I pass this safe code property with the clean HTML up to my web part and then I save it here in the growth properties. So whenever something changed in here, I actually passed the clean up HTML directly to the web properties. Okay and I also do the same with the when they look down here.

A

I have the future, and this is also at a table in edit mode. It has a place alone here and also here another on input event, which says change, block route all for applying find this, and what I also doing here, I replace the new lines with empty planks, because I don't want to allow actually the user to enter new lines in for the author field. Ok, so this just should be a single line of text and then a person again or call this function from the block rotation.

A

N80 webpart file, this method with the innertext. What has been entered in the in the author field in this case? Okay, so in this, is basically all how this this webpart works internally, how you set the properties, how you save the properties? That's all from from this side, and that's all that the the the reaction magic in here or age actually HTML mate, because it's this content edit table is not really only specific to HTML.

A

So, basically, you can do this with every HTML element for for one, and you can also use this in a regular HTML there. Poor just put content edit able on there and and make sure that the the right state, if you're, an edit motor and display mode, has been passed into the component, so you can use them blue, angularjs or whatever, so it doesn't always have to be a diff element. It can also be filtered, can be a spawn.

A

The reason why I added entered here in the block route, actually a development or put in here the element- is because I want to have two separate zones that I can edit independently so because I want to save for one time. I just want to save the quotation. The quote and the other thing I want to say fee and future is actually the author and when I do regular block wrote, you might not have to do inside and then you just would have just would put in the text in there.

A

But then you're actually are a disabled of the whole block quote element, and this was the reason why I split up between future and different okay. So.

A

Let's go now to the CSS magic that happens in here, and how does this image actually, as was shown so translucent through the front? Okay? So first what I did in here? So in Chapman framework projects, you can use any font they defined on the web when you registered it like this, because you what he actually does I go here to google fonts directory and just download the font from there. What I get in here is as well is s script that will be embedded in my web parts users.

A

The only thing you need to be careful is when you register a font to read part, this font will become available for the whole page. So it's when you have custom code like this, with my quotation or my author and and saying I want to display a different from there. It's completely okay, but this shouldn't start to override some out-of-the-box Microsoft things in here. So my quote: has a CSS class which says font families, Pacifico font size is increased by 3 a.m.

A

line, 8th and so on the force and then I have an Asterix, because everything which is in my quote, should when the attribute is set to true of the content, edit able I want to have a different style applied to all my elements in there, and this is something you see when you, when you go to the web part in here so now, I'm in edit mode. So you see this border around it to give the user a hint where you can actually edit your code and when I click here to preview.

A

This is all gone. So is this is something a trick to work with this, these property selector with the with with this bracket, so content editable? True, so when the properties actually on this element or on any element, this is what the Asterix means inside the block. Mike wrote then apply some style on it. I also have here a small trick which is see the selection, so the CSS selection comes with css3.

A

So when the user actually goes in to the red part, let me show you this and tries to oh it's not working now, because I'm, not in in edit mode I need to switch back in edit mode. So what I can do in here? I can change the color how you, edit, how you mark your code.

A

What I also can do here is, for example, move this out to my throat web part, one level up, then let it rebuild and refresh a little bit and then I should be potentially able to mark whatever Texas in here, even in the preview nope, not working in the color of the car nope there's something wrong. Maybe you forgot something anyway, so the real magic and what you've seen here is.

A

Actually we have here not really a solid color, so there are some little bit of blue on the right side and when I start typing here, so it gets more bluer and even more blue, and so it's a it's a gradient. What I have in here? Okay, so you have here an orange you have in the middle a red and then a blue, and how this is set up is with a simple trick.

A

First of all, the font color here is set to transparent when I, remove this transparent and the background clip and load the web part. What do you actually see is some red text on the gradient, and now you see actually the gradient that is will be applied on the font. Okay, so.

A

When you use this property background, clip what it actually does it clips it, it actually paste the background and what I have here, the linear gradient directly on the text. So instead you have it not as background, but you have it directly on the text and when I do this just with a background clip here and then save it and reload to that part and should be new. It.

A

Then you actually see here just the red color, you don't see the gradient yet. So let me make this a little bit bigger. You don't see the gradient yet. The problem is because you clip a background on it. You don't want to have a back a color for the text and the easiest way is to do this.

A

Let's say: color, transparent, okay, so this transparent color actually makes my whole font transparent and let the background that is action on the quote element shine through and when you look here now, we have here again- and let me add some text in here- the blue on the right side and the orangish on the on the top left, and this is actually exactly the same thing that happened to you was a background image.

A

So the only thing I did here is I just specified a background image then set background clip to text and then I make the color of the font transparent. So that's all fancy news. This part here is all fancy new 3ss free code right. What if I have to use still Internet Explorer 11? So let me show you this with this example and let me fire up my internet explorer 11 and what you see here. Actually it's.

A

Just show first comic sense: when you specify cursive on your font family, then you will get first to Comic. Sans, no I think because it's a little bit.

A

So it should I actually load. Now we have two font. Actually that is used to, and now it looks the exact same way like here in the black hood, but without a background. The reason for this is because Internet Explorer 11 doesn't know anything about the background clip, but what you see here is, instead of displaying nothing or say, hey this browsers, not supported I just display a different version of the web part which is not so fancy not so cool and there's an East really easy trick to do this.

A

So in css3 there is a support, a support at support like you use at media queries, and then you can pass in a CSS property which says background clip text, for example, and if the browser supports this, then it will run the CSS statements that I have in here.

A

If the browser don't support it, the benefit of CSS is the all the browsers like Internet Explorer 11, ignores everything that they don't understand so supports is a really new tech and just supported by the latest Chrome Firefox edge and other process.

A

It will only apply these CSS property, so I don't need to check with moderniser or anything else. So I can do it directly from from at from from CSS to make sure that certain attributes are only applied by by the latest browser. So and what you see here, Internet Explorer, l11 I, can still read the text. I would choose probably a different color instead of red I would go for yellow but I.

A

Also I can use the text and I don't really care about what Internet Explorer or what browser you have just give you a premium experience at the modern browsers, but I still make sure that everything it will be displayed. Is this this will be displayed on older process as well. So that's basically how this web part works. So three takeaways for you, you can use content editable to just make every HTML element at a table.

A

You just need to be a little bit careful with the HTML state that will be produced and from our recommendation is just use the inner inner text to get the value that have been stored with the web part out of it.

A

Another thing is, you can do really fancy web parts and let the user and allow the user to edit directly content on the page without referencing any third party web part or rich text editor that might interfere with the microsoft rich text editor. So you can do it just with a simple block code like this or any other element that you want to put on a page and that's basically it for my demo.

B

Awesome, it's a cool demo step on hey we do have. We did one question that came up yeah during your demo. They asked. Can we change the background image from a property? Can you do that as well with what.

A

Yeah yeah, you can't do it from a property as well. I haven't done it yet now, because it was just a demo to see if it works. If I get this running in SharePoint, but you, what do you actually would do? Is here and they you would different up here, property and if you have I'm not sure, if there's a reusable control that that gives you a picker or something like that. So you can basically choose the picture directly from that library or something like that and you have to picture library near.

A

What you would do actually, then is is from a rendering perspect, if you wouldn't render it or apply it directly in the CSS. But what you actually would do is in the component, where this is the component.

A

No, that's! That's not the component, so what he actually would do use would define here on the block vote, a background image, and this works exactly the same way when you have background clip attached on it, just render it out here's HTML or register custom. Now, don't do it don't register custom style books, so the easiest ways just for the style up here and and safe background image, is background and put the URL in that you get from the property cool.

B

Very cool: that's a cool demo man. It was very cool. We did never. So we get a lot of people giving you a lot of good feedback on it as well.