Microsoft 365 Community Community Demos, 17 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Workbench customizer for improved debugging experience

Description

In this 10-minute Developer focused demo, – Joel Rodrigues introduces us to SharePoint’s Workbench page (specifically the Workbench Customizer web part) and how it can be customized to mimic - render a wide view modern SharePoint page using CSS overrides on some of the page styles, without negatively impacting your site. The web part allows developers to set properties that control customizations and to switch the page to Preview after the page is loaded - useful when doing UI work. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 30, 2020.

Demo Presenter: Joel Rodrigues (Storm Technology Ltd) | @JoelFMRodrigues

Supporting materials:
• Workbench customizer | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/js-workbench-customizer
• SPFx Workbench Customizer | https://www.m365-dev.com/2019/01/18/spfx-workbench-customizer/
• Build your first SharePoint client-side web part (Hello World part 1) | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

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

My name is joel rodrigues, I'm a sharepoint developer for storm technology and I'm a mvp in office development for the ones who don't never seen a blog post of mine. Please go there, give me one click and follow and feel free to also follow me on twitter.

A

So what I'm going to show you today is a web part to improve the development experience on the workbench.

A

You can carry away with not using the workbench but as it supports web part personally, I prefer to use it because it feels a lot cleaner and I don't need to worry about anything else other than my code and before I get my code to be tested on a normal page.

A

Unfortunately, when you work on the workbench, there is quite a few limitations. So let me start.

A

Just the solution.

A

So this is just an hello world solution has nothing special about it.

A

As you can see, the only difference is that I removed the max width that comes by default. So one of the things that you might notice when you start using the workbench is that there is a significant limitation in the space that you have by default.

A

So you, for example, you even though, out of the works web parts, you can see that you don't even get a similar experience as if you were on a normal page. So this is out of the box. As you can see, the area uf is much wider because of that I tried to find ways to improve it and, as probably many of you, I end up having like small blocks of css, for when I was on the workbench to try to remove some of the limitations and then before shipping the web part.

A

I will just get rid of all that, so I decided to try to find something that was slightly better experience than that, and I end up picking grabbing that code from different projects different fixes. I was doing and put it all in a single web part what you can do with this is now you can simply come here.

A

The workbench customize it to your page, and it immediately takes the width of the of a modern page.

A

You can, of course, customize some things on the properties you can by default. You apply the styles and it sets it to preview mode. I'm not really sure why we we have the edit mode by default. I personally tend to spend a lot more time, building the ui than actually the web part properties because of the pnp reusable controls.

A

The properties generally are something you do quite quickly.

A

So I also had a switch to show uh pre in preview. By default. You can see the experience is not perfect, you can see the switch, but at least it's slightly better. You can also.

A

Make it follow it? So this is a an extra option. I added recently and uh I just to try to simplify the logic of the web part, because when I show you the code, you will see that this is extremely simple.

A

uh I removed some of the logic where I was trying to understand when the page has to be refreshed or not, and I just have a message you just press apply and then you refresh the page. If you want the changes to be reflected and there you go, if you are developing uh full width pages uh the web, the workbench couldn't be used for that before. So you can simply add to workbench customizer web part, and that's it.

A

You have full width oops like on a modern page, and you can test your interface according to that.

A

So this is basically it in terms of to workbench online. What you can also do is you can also run it from the local workbench.

A

So if you want to run it locally, one thing you can do is you can go to the paid webpart documentation where I have some information out on how to run it locally and in summary, it's copying some information from the dist folder from your webpart customizer to your solution, and I will show you that now so, if we so, this is the work, workbench customizer solution- and this is my list folder. We can simply come here paste into my test project and then go to leave web parts.

A

Grab parts paste it here and now, if I stop that start again,.

A

This time I want to go to local workbench. You can now see that you have both web parts and now you can also add that one- and this is serving from your project because we copy the resources there.

A

What is this fine to do? Yes, because if you do call bundle or package solution, the workbench customizer files in your solution will be completely ignored by the build process and you can- or you can simply, if you're, not very confident about that about that. You can simply come here and go call clean and egypt wipes out everything and your solution.

A

Oops now. Third, one.

A

ah One second so delete the leap, and these folders are gone, so here's all the files we copied there and we can now package um and ship the solution. If you want, um if you have, for example, the tenant, you can simply deploy the solution globally and add it when you need it.

A

uh One thing to take into consideration: is this solution basically injects css on the page and overrides some of the out of the box? Styles?

A

Yes, that's a very bad practice if you are doing it on a page, uh but I don't personally don't think that's a problem at all in this case, because this is just the workbench it's for developers, you're, not gonna, break anything. The glass case scenario the way part one to what you need and you just get rid of it.

A

So let me show you the code uh and.

A

This okay, so in the code, uh this is as simple as three pop three proper properties uh that we have on the web part and then for each property.

A

We have. We are importing um a style sheet, um that's probably not the best way to do it. I was playing with dynamic imports at the time. I never got to change it, but it works. So probably don't bother that much with it and for the preview I'm going really dirty here and I'm just simulating a click on that button.

A

For the styles, as you can see, there isn't that much going on. So this was the main one to.

A

Remove the width limitations, um there are some.

A

Playing around because some of the controls were on toolbars were getting on the way so just doing some adjustments there, so everything works fine and then on the full width. We just do again some small adjustments to make to take everything out of the way and allow the page to fully stretch and that's basically it so two css files and click simulation, and that's it.

A

If you find something you would like to improve by all means, submit a pull request or drop me a message I can give it a try to wear parties on the pnp samples gallery feel free to make any updates to it.

A

Thank you awesome. Thank you.

A