Site icon WP 301 Redirects

How to Query Files and Display Them Using an LWC Component

Jame Miller

In the Salesforce ecosystem, working with files is essential for many business scenarios. Whether it’s invoices, marketing assets, or customer records, files play a critical role in enhancing user productivity. With the introduction of Lightning Web Components (LWC), developers can create dynamic and responsive UI components to deliver a better user experience. Querying files and displaying them using an LWC component enables a seamless integration of such digital assets within the Salesforce UI, and this article provides a comprehensive guide on how to achieve that.

Understanding Salesforce Files and ContentDocument

Before diving into development, it’s essential to understand how Salesforce stores files. Files in Salesforce are stored as ContentDocument objects. These documents can have multiple ContentVersion records that represent different versions of the same file. Files are linked to records using ContentDocumentLink.

Here’s a quick overview of the relationships among these objects:

To query files associated with a specific record, the starting point is ContentDocumentLink, which links the file to the record through the LinkedEntityId.

Querying Files in Apex

Since LWC cannot directly perform SOQL queries, you’ll need an Apex controller to retrieve the data. Below is a sample Apex method that queries files associated with a record:

public with sharing class FileController {
    @AuraEnabled(cacheable=true)
    public static List<ContentVersion> fetchFiles(Id recordId) {
        List<ContentDocumentLink> links = [
            SELECT ContentDocumentId
            FROM ContentDocumentLink
            WHERE LinkedEntityId = :recordId
        ];

        Set<Id> documentIds = new Set<Id>();
        for(ContentDocumentLink link : links) {
            documentIds.add(link.ContentDocumentId);
        }

        return [
            SELECT Id, Title, VersionData, ContentDocumentId, FileType
            FROM ContentVersion
            WHERE ContentDocumentId IN :documentIds
            AND IsLatest = true
        ];
    }
}

The above method retrieves the latest version of each file associated with a specific record.

Creating the LWC Component

Once the Apex controller is ready, it’s time to create the frontend using LWC. Below is a basic lightning web component that will display the fetched file data.

fileDisplay.html

<template>
    <lightning-card title="Attached Files">
        <template if:true={files}>
            <template for:each={files} for:item="file">
                <div key={file.Id} class="slds-box slds-box_xx-small">
                    <p><b>{file.Title}</b></p>
                    <p>Type: {file.FileType}</p>
                    <a href={file.downloadUrl} target="_blank">Download</a>
                </div>
            </template>
        </template>
        <template if:true={error}>
            <c-error-panel message={error}></c-error-panel>
        </template>
    </lightning-card>
</template>

fileDisplay.js

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

export default class FileDisplay extends LightningElement {
    @api recordId;
    files;
    error;

    @wire(fetchFiles, { recordId: '$recordId' })
    wiredFiles({ data, error }) {
        if (data) {
            this.files = data.map(file => {
                return {
                    Id: file.Id,
                    Title: file.Title,
                    FileType: file.FileType,
                    downloadUrl: '/sfc/servlet.shepherd/version/download/' + file.Id
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error.body.message;
            this.files = undefined;
        }
    }
}

This component uses Lightning Design System (SLDS) classes for styling and displays basic file information such as title, type, and a download link. The file download URL is constructed using the ContentVersion Id.

Deploying and Using the Component

Once the component is created, you can expose it in the record pages using the targetConfigs in the component’s meta.xml file:

fileDisplay.js-meta.xml

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
                <object>Contact</object>
                <object>CustomObject__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

With the component properly added to a record page via the Lightning App Builder, users will see the attached files on the record instantly.

Enhancing User Experience

There are several ways to enhance the component:

These enhancements can turn a basic component into a powerful document management tool inside Salesforce.

Security and Permission Considerations

Ensure that users have access to the files via sharing settings and that they are assigned appropriate permissions, such as:

Without proper access, files may fail to show or download as expected.

Conclusion

Displaying files using an LWC component not only improves user engagement but also consolidates essential digital content in one place. By leveraging Apex to query file data and Lightning Web Components to render it beautifully on screen, Salesforce administrators and developers can deliver a seamless, unified experience.

Frequently Asked Questions (FAQ)

Exit mobile version