SharePoint Consulting Blog

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.