How to Open Salesforce Files Dynamically in Lightning Component

Introduction

Salesforce provides several ways to manage and open files, but integrating this functionality into a Lightning Component offers a dynamic and user-friendly method for handling files. With Salesforce Lightning, files can be opened without needing external applications or leaving the platform.

This component can be customized based on user needs, such as dynamically fetching files associated with a specific record. Understanding how to do this allows you to create components that improve productivity and offer smoother file management.

How to Dynamically Open Salesforce Files in Lightning Component

Opening files within Salesforce Lightning components can streamline your workflow and enhance user experience. In this tutorial, you’ll learn how to dynamically open Salesforce files using a Lightning Component, with step-by-step guidance and code examples provided.

By the end, you’ll have a component that can retrieve, open, and display Salesforce files based on user interaction. This can greatly improve the efficiency of file handling within your Salesforce environment.

Prerequisites for Creating a Lightning Component to Open Files

Before starting, ensure you have the following:

• A Salesforce Developer Org: This is where you will be building and testing your component.
• Basic Knowledge of Lightning Components: Familiarity with the Salesforce Lightning framework will make the process smoother.
• Access to Salesforce Files: You must have files uploaded in your Salesforce instance.

These prerequisites are essential for a seamless development process. If you’re new to Salesforce development, it may be useful to review the Lightning Component framework documentation before proceeding.

Step-by-Step Code to Dynamically Open Salesforce Files in LWC (Lightning Web Component)

To dynamically open Salesforce files in a Lightning Web Component (LWC), we will go through the following steps:

Step 1: Create the LWC Component

First, create an LWC component using Salesforce Developer Console or your preferred IDE like Visual Studio Code. We’ll name the component openFileComponentLWC.

The component will include JavaScript to fetch the files, HTML to display them, and Apex to retrieve the file records.

File Structure:

• openFileComponentLWC.html
• openFileComponentLWC.js
• FileController Apex Class
  
  

Step 2: Add Apex Controller to Fetch Files

The Apex class will handle the retrieval of files related to a specific record. This will use SOQL to fetch the required file information from the Salesforce database.

FileController Apex Class:

public class FileController {
    @AuraEnabled(cacheable=true)
    public static List<ContentDocumentLink> getFiles(String recordId) {
        return [SELECT ContentDocumentId, ContentDocument.Title, ContentDocument.FileExtension
                FROM ContentDocumentLink 
                WHERE LinkedEntityId = :recordId];
    }
}

• Purpose: Fetches the files associated with a specific Salesforce record via ContentDocumentLink.
• Parameters: Accepts recordId, the ID of the Salesforce record you want to link the files to.
  
  

Step 3: Create the LWC HTML for Displaying Files

In the HTML file, we’ll create a table to list the files dynamically. A button for each file will allow the user to open the file in a new tab.

openFileComponentLWC.html:

<template>
    <lightning-card title="Files" icon-name="doctype:attachment">
        <lightning-spinner if:true={loading} alternative-text="Loading"></lightning-spinner>
        <template if:false={loading}>
            <template if:true={files.length}>
                <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                    <thead>
                        <tr class="slds-text-title_bold">
                            <th>File Name</th>
                            <th>Open</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template for:each={files} for:item="file">
                            <tr key={file.Id}>
                                <td>{file.Title}.{file.FileExtension}</td>
                                <td>
                                    <lightning-button label="Open File" 
                                        onclick={handleOpenFile} 
                                        data-id={file.ContentDocumentId}>
                                    </lightning-button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </template>
            <template if:false={files.length}>
                <p>No files found.</p>
            </template>
        </template>
    </lightning-card>
</template>

• Description: Displays a list of files in a table format. The Open File button will allow users to open the file in a new tab.
  
  

Step 4: Add JavaScript for Fetching and Opening Files

In the JavaScript controller, we will retrieve the files using the FileController Apex class and handle the file opening logic.

openFileComponentLWC.js:

import { LightningElement, wire, api, track } from 'lwc';
import getFiles from '@salesforce/apex/FileController.getFiles';

export default class OpenFileComponentLWC extends LightningElement {
    @api recordId;  // Passed in from parent component or page
    @track files = [];
    @track loading = true;

    // Fetch the files when the component is initialized
    @wire(getFiles, { recordId: '$recordId' })
    wiredFiles({ error, data }) {
        if (data) {
            this.files = data;
            this.loading = false;
        } else if (error) {
            console.error('Error fetching files:', error);
            this.loading = false;
        }
    }

    // Handle the 'Open File' button click
    handleOpenFile(event) {
        const fileId = event.target.dataset.id;
        window.open(`/sfc/servlet.shepherd/document/download/${fileId}`, '_blank');
    }
}

• @api recordId: This allows the component to dynamically receive the ID of the Salesforce record whose files need to be retrieved.
• @wire(getFiles, { recordId: ‘$recordId’ }): This method fetches the list of files by calling the getFiles Apex method.
• handleOpenFile(event): Opens the clicked file in a new tab using the Salesforce download URL format.
  
  

Step 5: Usage Example in a Lightning Page

You can add this component to a Salesforce Lightning record page. It will dynamically fetch and display files for the selected record.

<!-- openFileComponentLWC.meta.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="openFileComponentLWC">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>*</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Step 6: Test and Verify

After deploying the component and Apex class, you can test it by adding the component to a record page. The component will automatically display the list of files attached to the record and allow users to open the files in new tabs.

Summary of Key Points:

• Apex Controller: Fetches file information from Salesforce.
• LWC: Displays the list of files and handles file opening in a new tab.
• Button Logic: Uses the Salesforce file download link to dynamically open files.

By following these steps, you’ll have a fully functional Lightning Web Component to dynamically open files in Salesforce, enhancing your application’s file handling capabilities.

Summary :

Dynamically opening files in Salesforce Lightning Components can significantly enhance user productivity and streamline workflows. By leveraging the power of Apex and Lightning Components, developers can create an efficient file management system tailored to their organization’s needs.