Microsoft 365 Community SharePoint, 11 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Add Folder Command Extension for easy doc library structure management

Description

In this 15-minute Developer-focused demo, Michaël Maillot steps viewers through a sample SPFx list view command set extension that allows users to create a parallel or nested folder hierarchy simply by typing names of folders into extension pop up and pressing the create folders button. The extension uses Sergei Sergeev’s spfx-fast-serve, React hooks, and ADS for adding folders. Code delivers folder naming error checking and on-screen user guidance. Extension issues, workarounds and improvements are called out. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 25, 2021.

Demo Presenter: Michaël Maillot (onepoint) | @michael_maillot

Supporting materials:
• Articles by Michaël Maillot | https://michaelmaillot.github.io/
• Bug - SPFx ListViewCommandSet Extensions are no longer being loaded when switching list context in side navigation! #5704 | https://github.com/SharePoint/sp-dev-docs/issues/5704
• Teams UserVoice - Show SharePoint custom Command Set extensions in Files Tab | https://microsoftteams.uservoice.com/forums/555103-public/suggestions/40152034-show-sharepoint-custom-command-set-extensions-in-f
• Repo - Add Folders Command | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-command-addfolders
• Post - SharePoint Framework fast serve now supports library components | https://spblog.net/post/2020/06/18/sharepoint-framework-fast-serve-now-supports-library-components
• Office Support - Invalid file names and file types in OneDrive and SharePoint | https://support.microsoft.com/en-us/office/invalid-file-names-and-file-types-in-onedrive-and-sharepoint-64883a5d-228e-48f5-b3d2-eb39e07630fa

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

Thanks to the pnp team for giving me this opportunity to show my first sample, my name is michael: I'm, a mg65 solution developer. At one point I based in north france, and I originally contributed on pnp projects such as cli from microsoft, 365.. You can reach me out on twitter, github or check on my personal website when I share some cool stuff.

A

So why did I make this sample for those who are confronted to to customers who that use libraries and lists with folders in a daily basis? You can face a common issue like oh. I want to structure my folders like on my computer or it's a lane to create folders after folders. Can we just display the library in windows like we used to and sharepoint server server, and thinking about that, I wanted to provide an extension that would make that common task easier for you or your customers.

A

However, in my opinion, and unless you have thousands of files to handle, I think that the best is to use metadata to organize your data rather than folders. Here are some key features of this extension. You can quickly add multiple folders at once, using keyboard with tab or enter keys.

A

You can select the way you want to add folders at the root of the same path or one after another, and it works on both lists and libraries based on the permissions of the current user and the availability of the add new folder option and before showing you the the demo, I would like to show you some pieces of the code.

A

The first thing I wanted to show you is that this sample looks quite different from a standard human spfx, projectile template.

A

You can see here and here that this is something unusual and that's because of the tool made by mvp sergers, agree called spfx faster that I highly recommend every sp fx developer to use, because it's a huge time saver when constantly developing updating, saving and retrying your developments.

A

So if you want to do details about how does it work, how to use it? But you can go on his repo and just try it. The second thing I wanted to show you is more an issue I faced um when I was developing the extension.

A

um The thing is that if you want to check asynchronously, if the extension should be displayed or not, you have to declare a class property, um make the sync check on the init method and update the property and finally check it. In the only view updating method, the fact is that actually the unlist view updated is not a promise, return method and there is no way actually to make a sync check to set up the visibility afterwards.

A

There are some open issues about this problem that you can find on the s on the sharpen github, slash, sp, dev, docs issues. The first thing I wanted to point out is the use of hooks for those who don't know. What's this, it's a pattern available from react, 16.8 that allows you to manipulate states and simplify your code by improving your components, lifecycle for this sample.

A

I wanted to experiment the the user folks, so I use some of provided by react like the use states and the use reducer dispatch, but also use the ones provided by microsoft. Through the npa package called at ui fabric. Slash react dash hooks like, for example, they use boolean.

A

The combo use reducer dispatch was for me appropriate because I was playing with an error of objects that I wanted to easily update, even if I just could use the use state. If I wanted to the use, boolean is cool when using some toggle and checkbox actions when display or hide something without mentioning the true force property and using an appropriate method for clarity.

A

Next comes the use effect. It's another approach to manage the components lifecycle that you use to know through component in mount and component did update. For example.

A

Here I design free use effect, and the first is for display the code, the display of the coach mark when the model of the extension is displayed. So during the mounting event, you can see the brackets line 77.

A

The second is for managing the folders when interacting um with them, through the actions like adding and deleting folders on during the folder creation process in sharepoint. That will show the progression to the user when the folder state is being updated, and the third use effect is for displaying warnings that occur when working with folders to add when the photo state or the creation method, toggle state are updated.

A

Now show you a demo. So from this tenant example, I deployed the extend the sample extension.

A

If I go to a library, for example, you can see here that there is the extension which is displayed like this, so the first time you're, you arrive on your your display, the the model extension you have, this coach mark that uh show you some guidance about how to use it. um So at any time you can close it and when the page, refreshes uh you'll see the couch mark again or you can click on on the guided button, and it will be uh there's a parameter that would save in the local storage that checks.

A

If two coach marks must be displayed or not, so you have just an input box when you can type your folder name and then I can click on the button or I can type the tab.

A

Etc, and so the default display is for adding uh the folder one after another nested, you can also choose to uh add them um and at the same route on the on the current location, which is the root of the document library.

A

So once you choose your the folders, you want to add, um you can decide to delete any folder here and to add it again.

A

And once you're ready just click on create folders, you have the correlation one after another, once it's created, you can choose to go to any folder. Where you want here, you can see that the menu folder has been created.

A

So if I go there, you can see that I'm in my folder so from there I can go for example here and I can choose to add new folders.

A

So oh coach mark again, okay got it so from there. I can choose to add other photos if I want so a b and for the c, but this time I want to add them at the same time.

A

So here they are created and we'll see in a couple of seconds that here you can find them. If I want, I can clear section and add folders again.

A

Last thing I wanted to show before going to the code: it's the what I call the bandwords, um for example. If I type this word, oh, if I I can, I can click on the button. I can, if I type tab or enter, keep nothing happens, and if I go here, I got some info that indicate me: what are the characters that aren't allowed and the words that are are banned?

A

It's based on the official documentation from microsoft that you can find here about bonjour and chapel file, names and file types. So here, if I want to type.

A

There another folder I can- I can type this I can all I can. I can create folders, but I can't add this one here: it's just plugging the addition of the of the folder to the list so now to code here, some as you can see, uh we are back and uh in in in the component that I showed you in uh in the department before um I would like just to show uh two last things. The first is the add, folder method that is down here.

A

This is the core of the component, which is the method that adds the folders. You can see that if we choose to add the folders on the same level, we'll use the pnpjs patching method.

A

So here the first step is to the edit, the the batch, and, if we go here in this part, when we are um adding the folders on uh the same path, we just mentioned the in batch to uh to to you to to the execute for executing the the method, so I'm using the article, add subfolder using pass and last when everything's ready you just have to execute um whatever the way we choose to add folders it will.

A

It will be with the help of alias parameters that you can find here, and here it's used for getting the getting first, the current location before adding a folder uh to it. um This is because, as you can choose to add a folder from anywhere in a list or a library, you can face some use cases when a customer wants to add multiple folders in a deep nested pass.

A

So if you don't want to be blocked during the addition of the 13th nested folder, for example, you have to use ads parameter if you don't want to face the 500 error issue.

A

The other thing I wanted to talk about is it's the rendering of the of the breadcrumb that you can see if you choose to to add uh folders after after photos, the chosen display is broken like and at first I used the fluent ui component once, but then I realized that it was difficult to fit it to my need, as I didn't want it, to be, overflowed and stacked to the dialogue. So I decided to make my own behavior easier to manipulate and to update during the progression of the process.

A

You can see here that um I call the custom stateless component used only for rendering the folder to add as a button you can here. This is the component that I talked about, which renders the default button. If it's the display is nested or an action button, if we add folders at the same path.

A

There are now some issues that I wanted to mention here to let folks know about if we want to develop their own extensions. The first is the navigation problem.

A

If you use the quick launch, the fact is that, if you go to, for example, you go to to a list that doesn't have the extension uh enabled for for development reasons, and you go back to the library that is supposed to display the the extension it won't work. There is an issue about that.

A

I know that tony paul also mentioned it and it's in investigation actually, and the second issue is to display the extension in the native teams files tab. If you want to see your extension in teams, you have to add another tab that points to your library, because by the the default files, tab doesn't display uh the spfx extensions- and I know there is a user voice about this- about the future improvement to allow to to display the specific extensions to the files, tab and, finally, some improvements that I thought about.

A

After deploying the extension, the first would be to drag and drop the folders to uh when you want to add it, add the folders and and one after another, and you want to change the order of the folders instead of deleting and adding again and another improvement would be to display error messages in the other. In the message bar using the message bar component in front way. Instead of the browser console log- and maybe maybe you guys would have some more ideas to to submit- why not thanks everyone and back to you, patrick.

B

Fantastic. Thank you very much for that very awesome demo. A lot of great comments there in the chat for you.