January 21, 2021

How to export information to a CSV (Comma-separated values) file in SharePoint Framework (SPFx)?

Introduction:

We recently implemented a customized Learning Management System (LMS) in SharePoint Online using SharePoint Framework (SPFx) for a Postal and Parcel company based out of Melbourne, Victoria, Australia. We also implemented a simple tabular format report in SPFx that will allow the admin user to see which user has completed which training and which training is pending. The requirement was also to allow admin users to export this tabular report to a CSV file. In this blog, we will learn about exporting data/information to a CSV file in SharePoint Framework (SPFx). 

We will be using the below npm packages in our SPFx solution.

Office-UI-Fabric-React:

  • The “Office-UI-Fabric-React” package will be used to develop different user controls.
  • This package gets installed automatically when we create an SPFx solution.

React-CSV:

  • The “React-CSV” package will be used to generate a CSV file.
  • We will run the below NPM command in CMD (Command Prompt) to install the “React-CSV” package.

 npm install react-csv –save;  


Below are the steps to convert simple data into CSV format:

Step 1: Import the “CSVLink” class from the “React-CSV” and the “CommandBarButton” class from the “Office-UI-Fabric-React”. 

 import { CSVLink } from "react-csv";  
 import { CommandBarButton } from 'office-ui-fabric-react';  


Step2: We will be using the “CSVLink” class and “CommandBarButton” as shown below.

 <CSVLink data={csvList} filename={'UserInformationReport.csv'}>  
       <CommandBarButton className={styles.ExportButton} iconProps={{ iconName: 'ExcelLogoInverse' }} text='' />  
  </CSVLink>  

  • This will create a button to export information into a CSV file.

Below are the “CSVLink” class properties:

  • Data: This is a required property and we need to pass the values as an array.
  • Filename: We have to provide the filename for the CSV file to be exported.
  • Headers: This will provide a custom header for our CSV file and also this property is used to define the order of the CSV fields.

We have provided the below array data in the data property.
 Let csvList = [{"Outlet":"Outlet 1","Work Center Code":"123456","Email Address":"user1@tenant.com.au","Name":"Test User 1","Completed Trainings":"Training 1, Training 2, Training 3","Pending Trainings":"Training 4, Training 5","Completion Percentage":60,"First Assessment Date":"11/6/2020","Last Assessment Date":"11/26/2020"},  
 {"Outlet":"Outlet 2","Work Center Code":"456789","Email Address":"user2@tenant.com.au","Name":"Test User 2","Completed Trainings":"Training 1, Training 2","Pending Trainings":"Training 3, Training 4, Training 5","Completion Percentage":40,"First Assessment Date":"11/3/2020","Last Assessment Date":"12/2/2020"},  
 {"Outlet":"Outlet 2","Work Center Code":"456789","Email Address":"user3@tenant.com.au","Name":"Test User 3","Completed Trainings":"Training 1, Training 2, Training 3, Training 4","Pending Trainings":"Training 5","Completion Percentage":80,"First Assessment Date":"11/6/2020","Last Assessment Date":"11/26/2020"}];  

Step 3: Below is the CSV button for exporting the information to a CSV file.


  • By clicking on this button, a CSV file "UserInformationReport.csv" will be generated with the above data.

CONCLUSION:

This is how we can export information to a CSV (Comma-separated values) file in SharePoint Framework (SPFx). Hope this helps you, good day!

If you have any questions you can reach out our SharePoint Consulting team here.

No comments:

Post a Comment