Dynamically Open Salesforce Files In Lightning Component
Introduction:-
Display a preview of the content documents or salesforce files dynamically in the salesforce lightning component using <lightning:fileCard> base component. A <lightning:fileCard> component displays a preview of a file (Image, Text, PDF…etc.). On desktops, clicking the file preview opens the SVG file preview player, enabling you to preview images, documents, and other files in the browser. The file preview player provides quick access to file actions, such as upload, delete, download, and share. On mobile devices, clicking the file preview downloads the file. The file type determines the icon used on the file preview and caption area.
<lightning:fileCard> base component. A <lightning:fileCard> component displays a preview of a file (Image, Text, PDF…etc.). On desktops, clicking the file preview opens the SVG file preview player, enabling you to preview images, documents, and other files in the browser. The file preview player provides quick access to file actions, such as upload, delete, download, and share. On mobile devices, clicking the file preview downloads the file. The file type determines the icon used on the file preview and caption area.
This component is to display a list of all available salesforce files records and on clicking on the file title it will display a preview of the file.
Steps To Creating Component:-
Step 1: Apex Controller [fileViewerCtrl.apxc]
public class fileViewerCtrl {
@AuraEnabled
public static List<contentDocument> fetchContentDocument(){
return [Select id,Title,FileType,CreatedBy.Name,ContentSize From contentDocument LIMIT 1000];
}
}
Step 2: Lightning Component [filePreviewer.cmp]
<aura:component implements=”force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, forceCommunity:availableForAllPageTypes, force:lightningQuickAction”
access=”global”
controller=”fileViewerCtrl”>
<!–aura doInit handler–>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<!–aura attributes–>
<aura:attribute name=”selectedDocumentId” type=”string”/>
<aura:attribute name=”lstContentDoc” type=”List”/>
<aura:attribute name=”hasModalOpen” type=”boolean” default=”false”/>
<!– Custom DataTable to Display List Of Available ContentDocuments Start–>
<table class=”slds-table slds-table_cell-buffer slds-table_bordered”>
<thead>
<tr class=”slds-line-height_reset”>
<th class=”slds-text-title_caps” scope=”col”>
<div class=”slds-truncate” title=”Title”>Title</div>
</th>
<th class=”slds-text-title_caps” scope=”col”>
<div class=”slds-truncate” title=”File Type”>File Type</div>
</th>
<th class=”slds-text-title_caps” scope=”col”>
<div class=”slds-truncate” title=”Created By”>Created By</div>
</th>
<th class=”slds-text-title_caps” scope=”col”>
<div class=”slds-truncate” title=”size”>size(bytes)</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items=”{!v.lstContentDoc}” var=”CD”>
<tr>
<th scope=”row”>
<div class=”slds-truncate” title=”{!CD.Title}”>
<!–store contentDocument Id in data-Id attribute–>
<a onclick=”{!c.getSelected}” data-Id=”{!CD.Id}”>{!CD.Title}</a>
</div>
</th>
<th scope=”row”>
<div class=”slds-truncate” title=”{!CD.FileType}”>{!CD.FileType}</div>
</th>
<th scope=”row”>
<div class=”slds-truncate” title=”{!CD.CreatedBy.Name}”>{!CD.CreatedBy.Name}</div>
</th>
<th scope=”row”>
<div class=”slds-truncate” title=”{!CD.ContentSize}”>{!CD.ContentSize}</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
<!– Custom DataTable to Display List Of Available ContentDocuments End–>
<!–###### FILE PREVIEW MODAL BOX START ######–>
<aura:if isTrue=”{!v.hasModalOpen}”>
<section onclick=”{!c.closeModel}”
role=”dialog”
aria-modal=”true”
class=”slds-modal slds-fade-in-open”>
<div class=”slds-modal__container”>
<div class=”slds-modal__content slds-p-around_medium slds-text-align_center”
style=”background: transparent;”>
<div style=”width: 50%; margin: 0 auto; text-align: left”>
<!–<lightning:fileCard> to preview file using content document Id –>
<lightning:fileCard fileId=”{!v.selectedDocumentId}”/>
</div>
</div>
</div>
</section>
<div class=”slds-backdrop slds-backdrop_open”></div>
</aura:if>
<!–###### FILE PREVIEW MODAL BOX END ######–>
</aura:component>
Step 3: JavaScript Controller : [filePreviewerController,js]
({
/*call apex controller method “fetchContentDocument” to get salesforce file records*/
doInit : function(component, event, helper) {
var action = component.get(“c.fetchContentDocument”);
action.setCallback(this, function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
component.set(‘v.lstContentDoc’, response.getReturnValue());
}
else if (state === “INCOMPLETE”) {
// do something
}
else if (state === “ERROR”) {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log(“Error message: ” +
errors[0].message);
}
} else {
console.log(“Unknown error”);
}
}
});
$A.enqueueAction(action);
},
getSelected : function(component,event,helper){
// display model and set seletedDocumentId attribute with selected record Id
component.set(“v.hasModalOpen” , true);
component.set(“v.selectedDocumentId” , event.currentTarget.getAttribute(“data-Id”));
},
closeModel: function(component, event, helper) {
// for Close Model, set the “hasModalOpen” attribute to “FALSE”
component.set(“v.hasModalOpen”, false);
component.set(“v.selectedDocumentId” , null);
},})
Conclusion:-
n conclusion, the lightning:fileCard component streamlines file previews with intuitive interactions, catering to both desktop and mobile users, while custom Lightning components enhance Salesforce file management efficiency.