Microsoft 365 Community Community Demos, 7 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Jump to Folder Application Customizer extension sample

Description

Does your customer love folders? People and processes are often aligned to folders. In this 8-minute developer focused demo, Joel Rodrigues shows an extension that both showcases a customer solution for finding folders and also demonstrates how SPFx reusable controls can be leveraged to quickly create an extension or web part to address a customer need. This “React Jump to folder extension” sample, available in the PnP SPFx extension samples gallery, can be deployed to every document library. The extension uses PnPjs to quickly render a very easy to drill into Folder Filter panel. The panel renders within seconds upon selecting the “Jump to Folder” button in the top ribbon. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 7, 2020.

Presenter: Joel Rodrigues (Storm Technologies) | @JoelFMRodrigues

Supporting materials:
• Sample: React Jump to Folder https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-jump-to-folder
• Blog: SharePoint folder filter SPFx extension https://www.m365-dev.com/2020/03/13/jump-to-folder-spfx-extension/

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

A

This is going to be a very quick demo, because there's this is very simple- isn't much to show so.

B

Concentrate: it's not a good great we're studying presentation.

A

B

True, that's fair point, fair point as well, but it is actually pretty nice way of demonstrating the usage of the control son and the functionality is pretty cool. So it's.

A

B

For that, take it away so.

A

I'm, a SharePoint developer, who work remotely for storm a company raised in Dublin. If you want to follow my blog or on Twitter, feel free. You have the details there. So why this simple extension we did a migration for a client who just loved folders. They had the shared drive with thousands and thousands hundreds of thousands of folders there.

A

We did manage to convert some of that structure into metadata when migrating to SharePoint, but there was a lot of things there that they wanted to keep his ugly as it was because it related to other business processes they had and their whole teams were just used to work in that way, and they that was not for discussion, and so when we make migrated to SharePoint with the first complaint we had from users was that they could not find the folders they wanted unless they will just scroll forever on a document library, because we're talking about two or three thousand documents per level and sometimes sorry folders per level, sometimes five, six seven levels deep.

A

So, as you can imagine, that's a lot of scrolling. So I have a document library here with two thousand folders. If I want to go to folder like for Android, as you can imagine, we load 30 items at a time and I will be here for a while. We can also go here and use the search box, but actually in this example, it showed what I wanted to show you. You just couldn't find it and there, even though the search is great, it doesn't hollow.

A

It gives you what you want when the for example, if you have naming conventions which are very similar between items which was their case, so the search was not very useful. So we built a simple extension that we deployed to every library. You click here. He is his peon PJs, of course, to load all the folders and it's super fast.

A

So this is two thousand folders being loaded and he takes two seconds and then the only thing we had was- and you can also come here and scroll super fast, because he wasn't the only thing we had. It was basically a filter box, I go to folder 400 and then, if there was more folders here, I can show you. We will just keep loading the tree and you can go back and forward we're using the bath gram and then selection, and it just simply allows you to go straight to that folder.

A

This might sound very simple, but it was a massive time saver for them and definitely would give to other people. So I asked them two for permission to share the code and the solution is now available on the samples gallery for extensions. Go there and do whatever you want with it. I'll show you the code. It's super simple I also wrote a very simple blog post, where I have a demo here.

A

If you can have a look, why some of the reasons and I will show you this one in a second, so let me show you the code, so the extension itself is on the execute. We show a panel which is basically a custom component. We have here and pass it some properties. Basically, what is the root folder?

A

We are exploring and the default folder in this case was the same, but we could open the file explorer in the different default location if we wanted to and on our custom panel, we basically have a panel to folder Explorer and the buttons. So when you select a folder, we put that folder in state.

A

If you click on the go to we just redirect you to that folder, that's simple as that, of course, there was marcos here when I first created it, which was a logic to reload folders and go back and forward on the bread crumb and a few more things like. If I go here, you can house so.

A

Surely not in this one, because it's disabled writing yeah, so you also have the option to create a new folder by switching a property to true.

A

And that all the logic is now wrapped in a reusable control, so I extract that control submitted to the PNP reusable controls, which is wrong way.

A

There so it's very easy to use. You can have information here. If you want to do something else you this was also the control that was just released on the few previous slides on the call, so that control just uses the same uses a folder Explorer to just have a picker around it. So just reusing the same thing again here and I created a copy and move extension which also used this control to copy between share of different SharePoint locations or onedrive.

A

So if you have similar needs that used to folder structure, a lot feel free to go and get it. That's me versa. Now,.

B

Can we go one more time the process get encoded a folder and then the reason? Why don't you don't down I your demo, because the reason why this is really cool is that this is really polished, a sample addressing a real customer scenario and I'm sure it is taking advantage of shape and framework and those extension point. But it's really polished and the champa folder looks right like it should be right next to the other buttons. It opens up.

B

The panel like ladder to box experiences as well and I, and this basically is one of those things with like a lot of the developers are still looking into. How could I do this in a polite and a nice, let's say in a polished way, so having a a sample which, yes from a implementation perspective, might be a simple. It really demonstrates the simplicity of this model, and then people can adapt. Oh, this is how I do it panels, and this is how I actually to return to others. So therefore, really great demo. So this.

A

Works just a small amount of time to create and it's a massive time saver and for the company, because the people just on to its time navigating around yeah. So it's.

B

A

Investment and.

B

It's a really good example why, in shape on framework, is really powerful, because now we're save time from from the customer and obviously Microsoft will probably never implement this kind of things by natively, because that's not a typical use case, but then for this particular customer. It makes perfect sense so having those extensibility points in buttons and many years. This makes a lot of sense, but thank you Joe for that. One. A lot of good feedback on also on the chats are really really great stuff. Thank.

A

You, if someone has any questions, just I will go to the shot now.

B

Excellent excellent thanks Joe.