I'm having issues with opening a Content Document preview in my LWC component. Here is my code:
HTML:
<template>
<template if:true={files}>
<ul>
<template for:each={files} for:item="i">
<template if:true={i.Title}>
<li key={i.Id}><a data-id={i.Id} onclick={navigateToFiles}>{i.Title}</a></li>
</template>
</template>
</ul>
</template>
</template>
JavaScript:
import { LightningElement, api, track, wire } from 'lwc';
import getAttachmentFiles from "@salesforce/apex/Utility.getAttachmentFiles";
import { NavigationMixin } from 'lightning/navigation';
export default class ShowAttachmentDetails extends LightningElement {
@api recordId;
@api files = [];
renderedCallback(){
}
@wire(getAttachmentFiles, {recordId: '$recordId'})
wiredAttachments({ error, data }){
if (this.recordId){
if (data){
this.files = data;
} else if (error){
//error handling
}
}
}
navigateToFiles(e){
const attachmentId = e.target.dataset.id;
if(attachmentId){
console.log('Selected Id -- ' + attachmentId);
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
pageName: 'filePreview'
},
state: {
recordIds: attachmentId,
selectedRecordId: attachmentId
}
});
}
}
}
When I click on the link, I see the console line and then nothing else happens. I got the above code from Salesforce documentation available here:
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_open_files
For those wondering why I need to write a custom component instead of using a related list, this is for one of those standard objects where there are no out of the box related lists. Unfortunately, it has to be custom.
Any help will be appreciated.
Best Answer
You have missed applying the
NavigationMixin
function to your component’s base class, so your component will not be able to access the APIs exposed by the navigation service (i.e., Navigate & GenerateUrl). Refer to the code below and replace in your component JS.Also, specify
type: 'standard__namedPage'
.As long as the ContentDocumentIDs are fetched correctly from the apex and populated in
files
object, you should be able to preview the files. I was able test your code (with my own implementation of apex code) and it worked. Note that if you are trying this in community page, it might not work because as thetype
attribute suggests, this is meant for standard or custom salesforce pages (not hosted in community).