Introduction:
Hi everyone, welcome to our new blog post “Aura Component To Preview Files in Salesforce Experience Cloud”. In this blog post, we will explain a custom aura component that allows for file previews within Salesforce Communities / Experience Cloud.
Problem Statement:
Salesforce Communities / Experience Cloud provides a powerful platform for organizations to engage with their customers, partners, and employees. However, there are certain limitations that can hinder the user experience when it comes to previewing files within these communities. Currently, the lightning:fileCard component is not available for Lightning Web Components (LWCs) within Communities, and there is no thumbnail preview available for viewing a document. This can make it challenging for users to quickly preview files without leaving the page, leading to frustration and impacting productivity.
To address this issue, we created a custom aura component that allows Preview Files in Experience Cloud /Salesforce Communities. This component will provide the functionality to preview ContentDocument images within the community, allowing for a seamless user experience.
Code Explanation:
The code consists of an Aura component, a controller, and a helper class. The Aura component is responsible for rendering the UI, and the controller and helper classes are responsible for providing the business logic to the Aura component.
- filePreview aura component: The Aura component is responsible for rendering the UI for the file preview. It uses a table to display the file details and a file card component to display the file preview. The component has an attribute named “files” that stores the list of files to be displayed.
- filePreviewController JS: The controller is responsible for handling the initialization of the component. It has a “doInit” function, which is called when the component is initialized. The “doInit” function calls the “getFiles” function from the helper class, passing the record ID as a parameter.
- filePreviewHelper JS: The helper class is responsible for providing the business logic to the Aura component. It has a function named “getFiles,” which the controller calls when the component initializes. The “getFiles” function makes a call to an Apex class named “ContentCtrl” using the “c.getFilesByRecordId” method. It passes the record ID as a parameter to the Apex class.
- ContentCtrl Apex Class: The Apex class retrieves and displays the files in the table. The helper class calls its function named “getFilesByRecordId.” The function retrieves the files using a SOQL query on the ContentDocument object. It retrieves the file ID, title, file type, file extension, and the last modified date. The query also includes a WHERE clause that filters the files based on the ContentWorkspace ID. The function returns a list of ContentDocument objects to the helper class.
Sample Code:
Apex Class – ContentCtrl
public without sharing class ContentCtrl {
/**
* Method to return the content document from a content workspace
* @param recordId The ID of the record for which to retrieve related ContentDocument records.
* @return A list of ContentDocument records.
*/
@AuraEnabled
public static List<ContentDocument> getFilesByRecordId(String recordId) {
List<ContentDocument> fileList = new List<ContentDocument>();
fileList = [SELECT Id, Title, FileType, FileExtension,LastModifiedDate
FROM ContentDocument
WHERE Id IN (SELECT ContentDocumentId FROM ContentWorkspaceDoc
WHERE ContentWorkspaceId = '058B0000000QARUIA4')
WITH SECURITY_ENFORCED ORDER BY Title];
return fileList;
}
}
filePreview.cmp
<aura:component controller="ContentCtrl"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global">
<aura:attribute name="files" type="List" default="[]" description="List of Files to Preview" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<h2 id="element-with-table-label" class="slds-text-heading_medium slds-m-bottom_xx-small">
Example Content File Details and Preview from a Content Library
</h2>
<br />
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered"
aria-label="Example Content File Details and Preview from a Content Library">
<thead>
<tr class="slds-line-height_reset">
<th class="cwrap" scope="col" style="width: 25%;">
<div class="slds-truncate" title="File Name">File Name</div>
</th>
<th class="cwrap" scope="col" style="width: 25%;">
<div class="slds-truncate" title="File Extension">File Extension</div>
</th>
<th class="cwrap" scope="col" style="width: 25%;">
<div class="slds-truncate" title="Preview">Preview</div>
</th>
<th class="cwrap" scope="col" style="width: 25%;">
<div class="slds-truncate" title="Uploaded Date">Uploaded Date</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.files}" var="file">
<tr class="slds-hint-parent">
<th data-label="File Title" scope="row">
<div class="cwrap" title="FileTitle">
{!file.Title}
</div>
</th>
<td data-label="File Extension">
<div class="cwrap" title="FileExtension">{!file.FileExtension}</div>
</td>
<td data-label="Preview">
<div class="cwrap" title="Preview">
<lightning:fileCard fileId="{!file.Id}" description="{!file.Title}" />
</div>
</td>
<td data-label="Uploaded Date">
<div class="cwrap" title="FileExtension"><p><lightning:formattedDateTime value="{!file.LastModifiedDate}"/></p></div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
filePreviewController.js
({
doInit: function(component, event, helper) {
//you can pass the record is if you want to use it for a record
// and show all the files of that record as preview
var recordId = '' ; //component.get("v.recordId");
helper.getFiles(component, recordId);
}
})
filePreviewHelper.js
({
getFiles: function(component, recordId) {
debugger;
var action = component.get("c.getFilesByRecordId");
action.setParams({
"recordId": recordId
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var files = response.getReturnValue();
component.set("v.files", files);
}
else {
console.error("Failed with state: " + state);
}
});
$A.enqueueAction(action);
}
})
filePreview.css
.THIS .cwrap {
white-space: normal;
word-wrap: break-word;
text-align: center;
}
Demo:
The component will display the preview for all the supported file types by Salesforce. If the system does not support the file type, you can download it directly from the thumbnail. You can also go to the standard file detail page, without using the navigation mix and preview, see the file details and versions.
For more helpful articles please visit – https://atomic-temporary-147229280.wpcomstaging.com/
Welcome to The Salesforce Dev 
Leave a comment