Microsoft 365 Community Community Demos, 11 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building React Taxonomy File Explorer experience with SPFx

Description

In this 15-minute developer-focused demo, Markus Möller shows viewers how they may easily render and manipulate files (Drag&Drop), folders, sub-folders organized in a hierarchical view, based on managed metadata. Web part built with SPFx v1.15 and PnPjs. One can Move, Copy and/or Link to files in folders and also enables moving documents into library from an external location. Uses PnPjs to retrieve terms. File hierarchy is collapsible. Step through React component structures including the master TaxonomyFileExplorer component. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 11, 2022.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article - A SharePoint File Explorer based on Managed Metadata and SPFx | https://mmsharepoint.wordpress.com/2021/12/23/a-sharepoint-file-explorer-based-on-managed-metadata-and-spfx/
• Samples Repo - React Taxonomy File Explorer | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomy-file-explorer
• PnPjs taxonomy – getAllChildrenAsOrderedTree | https://pnp.github.io/pnpjs/sp/taxonomy/#getallchildrenasorderedtree

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Today I want to present you a little sharepoint framework solution on a taxonomy file explorer. This is a file explorer-like view based on its sharepoint framework, managed, metadata and, of course, pnp js short entry about me who might have forgotten me, because I think the last time I was presenting was a while ago. My name is marcus muller, I'm a microsoft, 365, developer, expert working for avernot in germany and since last year, I'm also a microsoft mvp for microsoft, 365 development. You can reach out to me on twitter or via my blog.

A

If you need some further help on this or other samples, I provided, let's now directly jump into the demo. Let's render manipulate hierarchical view based on managed metadata and do it with drag and drop options of html5.

A

So what I've prepared is a list with uh some plain or easy documents, and what's important here is the fifth color. It's a custom, the fifth column, a custom, one called folder structure and this column is based on managed metadata. As you can see- and I have tagged all my documents with at least one folder of a hierarchical structure and this hierarchical structure- I can now run up in the custom web part.

A

Therefore, I have to switch, and this is how my structure looks like and how it is rendered and what you can see with the figures on the right is how many documents are recited below that folder, including subfolders. So this is an aggregated thing, but, for instance, let's have a look in the subfolder one, one where we can find three documents in and now what I already introduced, what we can do, we can manipulate the managed metadata column simply by drag and drop operations, so we can pull.

A

We can drag this document here.

A

We can drag this document here in a free, empty folder and what we see immediately, we have it inside here and behind the scenes. There was a simple um file item operation, simply adding this meta data to that file item.

A

When we compare this to file explorer, what we did is we did not move the file, but we did place it additionally in this folder, because it's still here in the source folder, this is like in the file explorer. You would do like with a link to a document. Yes, you have a document and one folder and you put a link or place a link to that document in the second folder. But this is my default operation.

A

I declared that way, but it's not all what you can do in the file explorer, for instance, as well, is, of course you can work with the secondary mouse button or with the right mouse button in most or at least for right-handers.

A

This cannot really be done in html5 with drag and drop, but what you can do is work with additional keys.

A

So what I cannot show you really live here, because my camera does not show my keyboard, but you can simply trust me that I will now press the ctrl key and do the same operation again put it in my subfolder here now I get a context menu and what we had done by default is the third one yeah, and what we can now do is we can do this one, for instance, we can move the file and the result is our subfolder 2 does not locate the document 4 anymore, but the subfolder still does and the third operation what we can also do now.

A

I have to press this ctrl key once again. We can now drag this document once again into another empty folder, and now we can also copy it, and this really duplicates the file. So now we have a second file with the same content, and this is what we can see here from the name.

A

We have now a document for copy file and last, not least, what we can additionally do is from outside the document library we can, and this document coming from outside.

A

And this we can also drag into our folder and there we have our brand new document also in the list. So this works the same because our drop zone is able to detect between coming a custom item from my uh sharepoint framework web part, as well as from a standard trial item, and this now let me show you in the next thing or but finally, what I can also show you this is what I did in an update is also what was a request was to have expand and collapse all button.

A

This also should work, expand. All is okay, but collapse always also possible here, as you can see, and this also how this works, I can show you in my next slides, so first a little overview how this is rendered. We have one big parent react component, and this is you can see uh with the outer region. Is the taxonomy fire explorer and then the tree is consisting of many many components called term label.

A

I it did only highlight a couple of them just to make it precise, but in fact every folder subfolder sub subfolder is an own term label and they are nested or cascaded, and I will show you how to render that in a minute.

A

On the right hand, not that much important, but also important for the drag and drop operations are my file labels, because they also consist the information about which document it is which grade it has which url and so on and so forth.

A

What I all need for the file operations later on and the methods to do all this are all, and this is what you can see at the bottom located in the parent taxonomy file explorer component, and we, you will see the connection in between in the code snippets on the next slides, but this has a little overview on the how the structure of this whole solution works.

A

Let's start with some pnp js magic. How to retrieve the terms in the very beginning. This is the magic method is get all children as ordered tree. This will get from our term store. The given term set all the terms in an ordered manner and also with children I'll show this here in debug mode. How this looks like what you can see here when you start at the top, we have three items: one is uh or two are collapsed. One is expanded. The folder one is expanded.

A

Folder two and three are collapsed at the bottom and folder. One, of course, has additional children where the first one is expanded as well, and the second and third one are collapsed, and this is how the data comes from pnp js directly, and this is a fantastic option, because you don't have to take care for that anymore.

A

You simply have to build your tree with terms by simply transferring all the items into your custom data structure, nothing else, but the only difference is you have to do it. Recursive yeah, because every parent terminal consists children and so on and so forth, and this is how I'm going to render all that what you can see here only my term knot is a recursive function. This works as long as my depth of leaves is uh this getania.

A

In my case, I have three, but in other cases you might have four five six seven would work as well.

A

Now, on the next two screens, I'm differentiating you can see this by the horizontal line in the more or less in the middle of the slide, between my two components.

A

In the upper side, I have my parent taxonomy fly explorer component and at the bottom you can see the term label component what's happening there now. So the term label component, which is rendered at least the the base ones, is rendered in the parent one on the upper left. You can see how it's using some functions there and the first functions. What we need in the parent component is render files and reset the you have seen that in a demo that was not working perfectly at the moment. Don't know what was happened.

A

There is when I highlight one clicked folder. I have to deselect and unhighlight all the others, and this only works in parent components, because I don't know when I click one component, which other component might be highlighted to simply drop that off. So this is why I will check off all of that and uh started. This is in the term label component. This is what you can see at the bottom. Once a knot gets selected.

A

I reset all the other check ones potentially, and I will render files to show which files are located under this subfolder sub subfolder. Whatever.

A

Highlight it once again same way, I'm doing with the term operations. These are also done by callbacks. So, for instance, we have uh all the different methods here. In short, we have the add term which, which was the default one. We have the replace term, which was the move operation. We have the copy file or the upload of a brand new file.

A

These are all handed into the child components, and this is done what you can see on the bottom left in the drop operation and in the drop operation you can see in the if statement above the highlight is. If I do not find files, then I don't. I then I know I don't have to upload something from outside and then I distinct between my if I have an event control key.

A

This was the context menu or, if I don't have that clicked, then I will simply run my default operation called add new term, which is also shown here on the bottom right. How I do that and how I call it and the real file operations in my sp service. I will show later on, so the difference I already introduced is how do I handle the special drop from files outside this is when I find in my data transfer object when I find the default files.

A

This is always how it comes in then I will catch them and simply proceed them in an upload operation. What I have additionally done is some contextual styling there. You also might have some seen some mismatch, and the demo, unfortunately, is what I'm doing here on the drag, enter or drag leaf events that I'm changing my style.

A

This is better to find the attitude to place it otherwise really can see which folder currently my mouse is on and where I would drop the file- and this was the green background you have seen yeah and here I think, once at least once you've seen it twice, and this was of course a bit buddy sorry for that last, not least, the file operation itself with sharepoint rest api.

A

The symbols of all of them is the move operation or the item by replace, because here I'm simply overwriting whatever was there with the new taxonomy value, and this is that one coming from the drop operation on that folder, I dropped the file. This is, I will overwrite two lines more. I have my default operation. This is the update, because here I have to build before I have to build a construction of my existing field, value, which might be one two three more terms and add the new taxonomy value coming from the drop operation.

A

The rest is the same. I will only only update my file list item or my corresponding list item to the file. Nothing more much more complex are the real file operations, and here I only want to show the item by copy, because what I'm here, what I have to do here now, of course, I have to create a new file name. This is you have seen I'm only inserting, like microsoft does by default as well, inserting an underscore copy into existing file, name and based on that new file.

A

Name, I'm creating a destination url and based on that one, I can copy my existing file bypass to a new one and that's it mainly, and then I will also update the list item. But this list item update, I already shown that's quite the same way than done previously yeah. That was from my site. That's not least, as you might remember, from all my presentations some resources.

A

I wrote a detailed blog post about how I implemented all this stuff. I of course shared the sample with the pmp library yeah. I have to add that my blog post is a bit outdated because I updated the sample already to sharepoint framework version 115 and including that I was also introducing. I did not mention that in the code uh forgot about that.

A

Sorry that I introduced, for instance, the act react use callback hooks which makes the whole solution much faster in reacting last, not least also the magic of get all children as order 3 taxonomy function in the pnp ad pnpjs documentation.

A

Thank you for listening. That's on my site,.

B

Awesome great stuff, really neat to see the use of the taxonomy there really great control is a perfect example that folks could pick up and expand on for their solutions, so fantastic, stuff, marcus thanks. So much.