Preview File using lightning:navigation on Button Click

If you want to open a file and preview the file on the click of Button in the Lightning component than you can do that with either Lightning:openfiles or using lightning:navigation. Salesforce does not recommend using lightning:openFiles and recommends Lightning navigation service instead.

Let’s see how we can using Lightning navigation service to preview file.

Component

<aura:component>
    <lightning:navigation aura:id="navLink"/>
    <lightning:button label="Open a single file" onclick="{!c.openSingleFile}"/>
    <lightning:button label="Open multiple files" onclick="{!c.openMultipleFiles}"/>
</aura:component>

Controller

({
	openSingleFile: function(component, event, helper) {
		var navLink = component.find("navLink");
		var pageRef = {
			type: 'standard__namedPage',
			attributes: {
				pageName: 'filePreview',
			},
			state : {
				recordIds: '069xxxxxxxxxxx',
				selectedRecordId: '069xxxxxxxxxxx'
			}
		};
		navLink.navigate(pageRef, true);
	},
	openMultipleFile: function(component, event, helper) {
		var navLink = component.find("navLink");
		var pageRef = {
			type: 'standard__namedPage',
			attributes: {
				pageName: 'filePreview',
			},
			state : {
				recordIds: '069xxxxxxxxxxx,0691yyyyyyyyyyyyy',
				selectedRecordId: '069xxxxxxxxxxx'
			}
		};
		navLink.navigate(pageRef, true);
	}
});

Here we have 2 buttons, “Open a single file” and “Open multiple files”. When you click on “Open a single file” it will open a single file in preview mode

file preview using Lightning:navigation

Same page ref can be used in Lightning Web Components to get same results in Lightning Web Component.

Was this post useful? If yes then please share.



Leave a Comment

All fields marked with an asterisk (*) are required


shares