Microsoft 365 Community Community Demos, 17 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a Copy Views SharePoint Framework Web Part

Description

In this 14-minute developer-focused demo, Martin Lingstuyl delivers a solution that copies views from one list/library to another using either his new web part or extension. Copy columns, sorting, group by, view formatting and filtering. Web part displayed on specific site/page for view management purposes. Extension is a dialog opened by ListView Command set extension on any list/library - tenant wide or site scoped. Code - see component structure and PnPjs copy functionality. Explanation of what’s currently not supported and why. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 20, 2022.

Demo Presenter
• Martin Lingstuyl (I4-YOU) | @martinlingstuyl

Supporting materials
• Sample – react-copy-views | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-copy-views
• Library – PnPjs - @pnp/sp/views | https://pnp.github.io/pnpjs/sp/views/
• Documentation – DOMParser | https://developer.mozilla.org/docs/Web/API/DOMParser
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

B

From the Netherlands speaking I'm, a micro 365 architect at a small company in Holland, called r4u Business, Solutions I'm, also an Microsoft MVP since, like two weeks now, which is an awesome, awesome being honored in that way, for what I've been doing in their Community I'm a family man I love cycling, and if you want to contact me, you can contact me through Twitter GitHub or using my blog, hey, welcome to ask any questions.

B

uh I've got this I built a an SPF example recently and I'd like to demo for you uh how this is working. So the idea is that uh SharePoint currently has this great features to create new sites based on existing sites, which is awesome functionality, but we had a customer that would really like to allow users to copy views across sites and across all the lists and libraries to watch other lists and libraries.

B

So if you have, if you're a user- and you have changed a single view, you would you would like to be able to copy that view, and you know get your changes on the other lists as well. So um the question was what it will copy. Well, it will copy which columns are visible.

B

It will copy a sorting mechanisms grouping by a group group by if a copy view formatting it's a copy filtering stuff like that, but when a column is missing in the Target list, so, for example, you've got a list with a lot of columns and one of those columns is on your view as you're copying, The View, and if that column is not available on the target list, that part of the view must not be copied.

B

So the the Target The View must of course, render valid and not invalid, because there's some view or some column missing. So this is basically the scenario uh we've built it I built. Let's say that, like that I built it as a web part and an extension, so there's a lot of shared code in this sample.

B

You can use this webpart just to you know, set it in the central place to uh to allow people to manage their views or you can just use it from your lists and libraries and copy your views just very quickly. The let me just show you how it works. I'll just switch to my other screen. This is my Dev tenant and I've got this sample site with a sample document library, and this document library has got a very nice view. I've even called it a nice view.

B

It's got a choice, column and it's got some view. Formatting and I. Have this copy views button right in the command bar? This is the list view extension sample. So if I click it okay, so the demo goals are not really favorable to me: I'm, not seeing any errors, it just won't open.

B

Let me just drive again: do it like this? Okay, so I've got this uh web part right on my screen, as you can see uh not as an uh as an extension but there's a web part and I. Have my current site selected I can select a list or Library. Let's call, let's select the documents. Library and I can select a view that I want I want to copy. So let me select a nice view.

B

Let me select a Target list and click copy as I'll just copy The View, as you see, and it will give you a nice view on the status of the actual copying. So this is basically what you can do with it.

B

So for the uh the list view extension Works in exactly the same way, but it will open a dialog and I've literally used this uh hundreds of times last week, so this bit all that it wouldn't work on the call today, but well, let's just uh if you'd like to try it download the sample and try it out yourself. Let me get back to the uh to the slides.

B

So um let me talk a bit about the component structure, so I'm, using for this sample, I've used the class components which is like the the classic way of using react in typescripts the class components and there's this big component. The parent component is called the copy views container and within the copies use container. We've got a few uh child components, The Source list View and the target list view form and within those we've got a few Pickers. So we've got a source site, picker Source list picker.

B

This shoe picker, switchbox and Target list speaker every time. I change, one of the values of one of the pickers they'll communicates the value of that figure back to the central copy use container and when I click the copy button, which is right on this on the on the right left, it will start copying the tasks.

B

So, basically, if you've got the structure of the of the react components, we are passing props and default values down through the pickers and we're passing the choices back up through our functions and then in the end, if you click the copy button, which is a primary button from the fluence UI repository, it will start copying stuff.

B

So as soon as you click the copy view button, another another component is rendered is to copy status components and it will show a list of all tasks and it will show also the status of that list using all kinds of default, fluent UI components so important to notice that one view one copy task equals one source View and one target list.

B

So if you, if you're copying, two views across to two uh to two lists, you'll see four tasks in this screen and you can also click through uh to view how it's updated your target list.

B

So, let's get to some code. So this is basically what happens when you start the copy process.

B

So as soon as I'm clicking the copy button, there's a list of tasks that will be created and it will start a parallel execution you're using the using a parallel you promised at all and as soon as the task is, is successful, it will just update the state of the task and that will immediately be visible on the on the screen by you know. Nice check check marks so now on to the on to the what's really going on below the below we're using pnpgs to copy to do the actual copying.

B

So the first thing we do is to get everything we need. So we need some information from the source list. We need the view. We need the the fields and we need some information from the target list as well. So we need to know what fields are on there to be able to exclude fields that are not available on the target list.

B

um We need the to see if the, if the view is already available, so we can update it instead of edits as soon as we have all the information we're going to build uh properties, objects and, as you can see here, if you've, if you've worked with uh with the rest, API or with bmpgs or with any uh any uh SDK against SharePoint you'll notice, and we recognize a lot of these properties. So there's a lot of classic view.

B

Properties like row limit hidden includes root, folder, all those things that are being updated on the Target or those all those things that are being updated on the target list and there's also some more modern properties like custom, formatter and few type 2 which are being updated and but the the most important. One, of course, is the The View query, because that's uh that's a camel query and that's the most complex one to update and I'll. Show you a bit because view filter.

B

Query is basically camo query, so that might have the following structure: it shows a bit of XML uh Group by part and order by part and a condition, apart with the condition- and this might be very very long.

B

Of course- I mean if, if you have multiple ends or or conditions, there might be a very deep structure visible uh here and in the end, if you know, if, if we have some column that only exists on my source list, then this view query needs to be parsed and needs to be changed and needs to be changed.

B

For example, if that column, some column that only exists on Source list, if, uh if we have to remove that, it will need to look like uh The Following on the right hand, side of the screen, you know the the eventual view query that we use needs to be cleaned up and things field references need to be removed, Etc. So how can we do that?

B

um I use the Dome parser for it? So I looked into a lot of of options. uh You've got a few things like XML to GS, which can parse XML, but in the end, I decided because we're in running in a browser, and we can use a dome browser API, which is a regular browser API and you can parse a XML string and and update it. So basically, what we're doing is just parse the XML of the view, query I'm, adding a root element because that's not available by default in the field.

B

Query property of The, View, I'm, parsing it as XML and I'm going to you know, remove some references and update the structure of the view query. So you can do a lot with it on parser, for example, if you've got the reference camel I'm doing things like get all elements by tag name so that I have all the field references so so I can check if fields are in the camel that are not on the target list.

B

I can check you know if I've got a field ref. Is there a value, a value node right next to it using next element ceiling, I can remove those elements just from the from the camel from the from the XML elements, and I can also replace things. So, basically, what I? What I'm doing?

B

Let me what I'm doing is I I check out what field references are in the camo I remove the field reference that are not available on the target list, I'm also removing value elements that are not that are the sibling of those field, references and then I'm, just cleaning cleaning it up and now, of course, if you've got an an end or an orc Edition, you need to uh to you know, there's an Android or condition always has two children.

B

So you need to check if one of those children is removed, you need to collapse the structure a bit, which is what I what I did as well. So, basically, if you've got some column, that is missing, the entire camo is being reformed into a very simple and more simple demo, and it will just work. It will just show how it should be.

B

So that's basically what I did using the the dawn parser um and well, if you've got the the properties object. With the new view, query, we can just uh call SharePoint using pmpgs and add the view or update the view and after adding or updating, we also have to update the view fields, which is a separate action.

B

So we uh we update, we create a list of fields and we just remove the existing fields and adds the new fields to The View. So uh what's currently not supported for this, uh for this web part is the mult, the more modern, kanban and modern calendar type of views.

B

um I'm thinking, uh you know, if you like to contribute, do uh do. Maybe you would like to pick this up. uh Kendan boards and modern type boards, I I did not support them from in the first version, because they they require you to add a field as well. For example, the kendan boards uh depends on a column with a few values in this case test buckets, so it will. It will manage the the buckets of the of the view, so you would need to add the field as well.

B

Instead of you know what we're what I'm currently doing is not doing anything with Fields, just just only creating and updating with yourself, but I'm open to uh I mean we roll open to contribution. So uh if you'd like uh do pick it up, uh that's that's all. For now, I've got a few resource links. If you'd like to look at it.

B

uh The samples in the samples repository here pgs, if you haven't worked with it, do try it's a very it's an awesome library to use to communicate the sharepoints and well some documentation for the Dome parser API. That's it Gary back to you.

A

Excellent demo, thank you very much. Martin uh lots of claps and love hearts. uh It's definitely gone down very well. uh Thank you for coming on and sharing that with us.