Microsoft 365 Community Community Demos, 6 May 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Adding support to add video with text to modern pages with this video banner web part

Description

In this 5-minute developer-focused demo, Mohamed Derhalli begins in the Properties Pane where one selects a video, adds banner title text and colors it, adjusts video brightness and banner height. This elegantly coded modern web part was built with SPFx using standard PnP property pane controls in less than 3 hours. Add the web part to the top of your pages. The web part has only one functional component named: VideoBackground. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 6, 2021.

Demo Presenter: Mohamed Derhalli (BDO Canada)| @MohamedDerhalli

Supporting materials:
• Blog post - Introducing React Video Banner Web Part | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/introducing-react-video-banner-web-part/ba-p/2329002
• Repo - Video Banner | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-video-banner

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

All right so modern pages, video banner in this demo, I will show you and prove how easy it is to build a nice looking group part with spfx and the pnp libraries. Before I start. My name is mohammed khali, I'm a microsoft, 365 consultant at bdo, canada, and if you want to reach out I'm I'm available on twitter and linkedin.

A

So that's it for these slides I'll, just get right away to the demo. So here's the web part I'm talking about and the reason I built this web part is.

A

um I had a client who was using another platform other than sharepoint and it was for marketing purposes, so they're focusing on media marketing and they have flashy things. They have animations on their website and one of them was a widget that looks exactly like this so and they were like no we're not going to take our site to our intranet to sharepoint. We want to use our own website for our marketing purposes and so on. So I'm just okay.

A

I can just go and build something in couple of hours or like maximum three hours and it's going to be ready. Like this, so that's how it easy to to build our parts so I'll go edit and show you how it works.

A

So here in the basic properties, I can select the video, so you can upload a video to sharepoint to any library and then you can link to it and let's say I'm gonna choose another one. So this one open now you can change the title. So here is awesome and then I can change the styles so, for example, the colors, the brightness and the height of the the video itself and as you see here, I'm using the file picker from pnp and the color uh the color control as well.

A

So how long would it take to build a wood part like this with beam like with spfx and pnp? It's pretty easy. So if I show you in my code right here, so I have the properties the uh for the wood part. So I have the part title: video, uh the color, the brightness and the height, and here I'm just using the controls.

A

So, at the very top in this area, I have the pnp, reusable property, pane controls right here and I'm just passing things normally uh like I'm just defining the property, uh the properties normally right here, except that I have a label that would show the current video url for the user right so and then I'm just having one functional component right here- and this is all the code that I'm using for the woop part.

A

So I'm just having the the title here and this div um it just um absolutely positioned and it's flicks with the css.

A

So I can just position this header in the middle of the the control itself, the video and then here I'm just controlling with css, I'm controlling the brightness using the folder I'm having the video url right here and if you notice I'm using the react, use effect and the use riff in order to get a reference to the video control right here and if the video changed, I'm just gonna load the video control again so each time I change the video I'll, just uh it's just gonna re-render and here in the in the css side of things.

A

uh As you see, I'm just like having this one, absolutely positioned with the uh with the header inside and I'm just having the video. The video styles right here with object, fit cover. So a wood part like this, with the use of the pnp controls with just modern uh development techniques, you can just build really powerful and nice looking wood parts in just a couple of hours with spfx.

A

That's it was a quick, really quick demo, but it's uh it's just to show how how powerful it can be.

B

Really cool by the way I have to uh as a better design we're trying to unmute the pathfinder unmute button as well. But that's that's a simple thing like I said, but it's really really powerful and I love the the simplicity of the code as well. So, like I said, shows the power of the spfx for extending things and whatever you have here is certainly something what marketing people every now and then once to their internet, so makes perfect sense. So.

C

Yeah, that was a fantastic demo. I love the simplicity and I love uh that's. I think that's a great example of working within a framework like using the capabilities of react and spfx and all the things together to make a very powerful solution without having to do a ton of work. Awesome, awesome stuff. So thank you for sharing that.