Export Salesforce Records in Excel Format Using xlsxJS Plugin Through LWC

Exporting Salesforce records to Excel format can significantly enhance data management and reporting capabilities. There are many ways to export data from salesforce, but we will explore how to achieve this using the xlsxJS plugin through Lightning Web Components (LWC).  

We will use the Account object as an example to demonstrate the process, specifically focusing on exporting all the Contacts associated with a selected Account. 

What is xlsxJS? 

• xlsxJS is a JavaScript library that allows you to create and manipulate Excel files in the browser. 

• It supports various features such as formatting, styling, and exporting data in the XLSX format. 

Scenario: Exporting Contacts Associated with an Account 

Imagine you are a sales manager who needs to analyze the performance of your sales team. You want to export all the list of Contacts associated with a specific Account to Excel for further analysis. 

Steps to Export Salesforce Records in Excel Format 

Step1: Install xlsxJS Library 

• You can include the xlsxJS library in your LWC component by downloading it sheetJs Docs available online from https://cdn.sheetjs.com/and adding it to your static resources. 

• SetupàStatic ResourcesàNewàAdd the Downloaded File  

Step 2: Set Up Your LWC Component 

• Create a new LWC component in your Salesforce org named excelExportContacts. 

Step 3: Create the HTML Template- excelExportContacts.html  

• In your excelExportContacts.html file, create a button to trigger the export functionality in the details section of Record page of Account object. 

Step 4: Create the JavaScript Controller- excelExportContacts.js 

• In your excelExportContacts.js file, import the necessary modules and implement the export logic. 

• It is designed to export Contacts associated with a specific Account to an Excel file using the xlsxJS library. 

Key Components of the Code 

1. Imports: 

   1. Imports necessary modules and methods, including the Apex method ‘ExportRelatedContacts’, the ‘xlsxJS’ library, and utilities for showing ‘toast messages’. 

2. Class Definition: 

   1. The class ‘excelExportContacts’ extends LightningElement and contains properties to manage the export process: 

3. @track exportData: Holds the fetched Contacts data. 

4. disableExport: A flag to control the export button's state. 

5. xlsxLibraryLoaded: Indicates if the xlsxJS library is loaded. 

6. @api recordId: Receives the Account ID from the parent component. 

7. exportRecords Method: 

   1. This method is triggered when the user clicks the export button. 

   2. It calls the ExportRelatedContacts Apex method with the Account ID. 

   3. If Contacts are returned, it prepares the data for export: 

   4. First, it creates an array of rows with headers and then populates with Contact details. 

   5. Then, it Generates a filename based on the current date and Account name. 

   6. Uses xlsxJS to create a new workbook and worksheet, appending the data. 

   7. Triggers a download of the Excel file. 

   8. Displays a success toast message upon successful export. 

8. Error Handling: 

   1. If there are issues fetching data or loading the library, appropriate error messages are displayed using toast notifications. 

9. connectedCallback Method: 

   1. This lifecycle method loads the xlsxJS library when the component is initialized, ensuring that, it is ready for use. 

Step 5.CSS File: excelExportContacts.css 

• This CSS file can be used to style your component. You can customize it based on your design preferences.  

Step 6:  Meta File: excelExportContacts.js-meta.xml  

Explanation of the Meta File 

• apiVersion: Specifies the API version of your component. You can adjust this based on the latest version you are using. 

• isExposed: Set to true to make the component available for use in Lightning App Builder. 

• targets: Specifies where the component can be used. In this case, it can be used on App Pages, Record Pages, and Home Pages. Now we are using in Account record page only. 

Step 7: Create the Apex Controller- ExcelExportController  

The ExcelExportController class contains a method called ExportRelatedContacts, which is designed to fetch Contacts associated with a specific Account in Salesforce. 

Code Breakdown 

1. @AuraEnabled: This annotation allows the method to be called from Lightning components. 

2. Method Signature: public static List<Contact> ExportRelatedContacts(String AccId) takes an Account ID as a parameter and returns a list of Contacts. 

3. Debug Statements: 

   1. Logs the received Account ID and confirms the method invocation. 

4. SOQL Query:

   1. Retrieves Contacts associated with the provided Account ID, fetching fields like Id, Name, Title, Email, Phone, and the associated Account's name, Id. The results are ordered by Contact name in ascending manner. 

5. Logging Results: 

   1. Debug Logs are used for verifying the “fetched Contacts and their count”, and iterates through the list to log each Contact's name. 

6. Return Statement: 

   1. Returns the list of Contacts to the caller for further processing, such as exporting to Excel. 

 Step 8: Output 

• Place the Component on Account Record Page click on “Export button” Excel File will be Downloaded with Name “RelatedContact.xls” 

RelatedContact.xls