SharePoint Online Modern List - Export Selected Items to Excel
It has become a kind of tradition for me to write this component to export selected items to excel, whenever there is new model or approach of development in SharePoint. It all started with the SharePoint 2007 version. Here is the list of components for various versions and development models.
- SharePoint 2007/2010/2013/2016 - Full trust code component can be found here
- SharePoint 2013/2016/Online - Provider hosted addin - NodeJS based for classic list.
- SharePoint Online - SPFx based list view extension for modern list
Lets look into this list view command set written in SharePoint Framework, it exports selected items to excel spreadsheet in xlsx format, with the columns from the current modern list view. This Listview extension utilizes SheetJS xlsx to create spreadsheet in xlsx format with the items selected from the view.
This extension illustrates the following concepts:
- Export selected items to excel
- Works across platforms
- No need for additional plugins
- No browser dependency
- No IQY files
- No additional sign-in required to render rows in spreadsheet
- Exports only columns you see in the view
Where is source code
Source code is available here, at my github repo - https://github.com/rjesh-git/sp-dev-fx-extensions/tree/master/samples/js-command-selecteditems-export
Also created a PR to add it PnP SharePoint/sp-dev-fx-extensions hopefully it will be approved soon, and will update the above link accordingly
How to test in debug mode
- Clone this repository
- In the command line navigate to js-command-selecteditems-export and run:
- npm i
- gulp serve –nobrowser
- In a web browser, open any custom list
- Append the below debug url and press enter
- Choose Load Debug Scripts when prompted
- Add some sample list items (Be sure at least 1 item)
- Select the item, and export from toolbar
- Generates and downloads the xlsx file
How to deploy
I have not included any deployment scripts with this project, it’s a two step deployment process. Adding ListView Command Set - You can use feature framework, PnP provisioning template, or Office 365 CLI for adding the list view command set to the site Deploying SPFX Package - follow the steps as given here - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page
Exports previous view columns, even after the view is changed. This is due to the limitation on using the legacyContext viewID property. Thanks @alexaterentiev for pointing it out.