Microsoft 365 Community Community Demos, 18 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SPFx Extension for Copying and Moving List Items

Description

In this 6-minute developer-focused demo, Sudharsan Kesavanarayanan shows how this application customizer displays a command button named Copy/Move Item(s) in custom lists. Using this option, the items can be copied or moved from one list to another within the site. User maps source and destination fields. Supported field types – Single line of text, Choice, Number, DateTime, & Yes/No. Uses batch method to copy/move (50 items) at a time. Download extension from AppSource.. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 18, 2021.

Demo Presenter: Sudharsan Kesavanarayanan (NTT Digital Business Solutions) | @sudharsank

Supporting materials:
• Repo - Copy/Move Item(s) | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-copy-move-items
• AppSource - Items Replicator | https://appsource.microsoft.com/en-us/product/office/WA200003307

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

Hi everyone, my name, is sudhasan kesavana raina. I am a microsoft mvp working as a software architect at ntt, and these are my couple of my social links and my youtube channel. You can follow me so today uh we are going to see a extension which is called a copy or move items where this extension will help to copy more items between the list which is not available by out of the box.

A

So I have just made a sample extension of this and I have also uploaded this package uh in microsoft app store, so whoever wants to try it out. They can directly download it from the apps too. So a couple of uh features, so this extension will work only within the site. As of this is the first version. It works only within the site, cross, site copy or list items is not supported and automatic mapping of fields.

A

When you choose the destination list automatically the fields if the fields are having internal names are same, it will automatically map and based on the data type, you can also choose whether which which are all the fields to be copied or moved, and not all the field. Types are supported.

A

Only single line of text, choice, number daytime and snook fields are supported and for copying or moving the list items I'm using the batch method. So it is performance related. So it's quite uh performance.

A

Some of the supporting artifacts I have used pnp, sp and pnp graph npm module, and I have also used react and react hoops and low dash. So these are all some of the supporting artifacts.

A

So now let us move on to the demo.

A

So, as you can see, I have already installed the extension. Sorry about the name.

A

It's called items replicator, so this extension will work where you can copy all the items in the list or you can also select a particular list items and then you can copy it. So I have already created a sample list, which is the duplicate of this list, which is called the customer list test, and this is customer list.

A

So when you click on this items, replicator it will display with the source on the destination info the source info. It will display the item count.

A

So the color code is based on the number of items present in the source info if it is below 4000 or between 4000 to 5000, and if it is greater than 5000, there are different colors and likewise, if you choose the destination list, so I'll also displaying the item counter.

A

So once the destination list is chosen automatically the source field, whichever the supported field types, will be mapped to the destination fields.

A

As I said earlier, if the fields have the internal name and data type matches, then it will automatically gets mapped and if the specific field is not present in the destination list, it will automatically be disabled and you will also be able to map.

A

You can also change the mapping based on the type, for example. If you are just mapping more than one field, then you will get a warning so once you have mapped the fields just confirm the mapping and you will be provided with two options: copy or move.

A

So when you click on copy so automatically the items are copied over to the destination list. So, for example,.

A

So here the items are copied, so all the values everything is copied here mo is pretty much uh same on the back end. I am just copying the item from the source to the destination and then I am just deleting the items so in case. If you want to restore the items the items are available in the recycle bin so that you can restore it to the source list.

A

So, as I said, I have also uploaded this in the microsoft app store, so you can just get it directly from there.

A

So moving on to the code, so just a couple of information first thing is on execute method. uh I'm just passing a couple of information like a list site, site information and the number of fields, and if the items are selected, I am just sending the item. Ids selected item ids and here I have used the app base creating a dialog class.

A

So here I have used the base dialog and created my uh own dialog with the custom component, and the main thing is the helper file where the copy or move items I have just.

A

Given the batch size as 50, so, for example, if if you are copying more than 50 or thousands of items, then each and every batch it will run in a 50, it will run in a batch per batch. Only 50 or 50 items will be copied or moved.

A

So I'm just breaking the items in chunk and then for each and every chunk. I am just updating and then passing it to a badge. So this is how I have done it for copy and also for the move items.

A

So that's it back to you, david.

B

Awesome sudarsan. Thank you very, very much that is very well uh received. Some some applause and thumbs up uh well thought out on the on the uh double usage there. So thank you for sharing that and again it is available uh in the app source, as well as the repository for the spfx extension, so multiple ways to take advantage of that. Thank you for putting it in both locations.