2

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.

3
  • As per the documentation the type should be standard__namedPage but you are using standard__recordPage.
    – Saroj Bera
    Jul 18, 2022 at 16:58
  • No luck with either standard__namedPage or standard__recordPage
    – user569925
    Jul 18, 2022 at 17:03
  • Which object you are querying, in the Utility.getAttachmentFiles method? It should be ContentDocumentLink.
    – Saroj Bera
    Jul 18, 2022 at 17:53

1 Answer 1

0

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.

export default class ShowAttachmentDetails extends NavigationMixin(LightningElement) {

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 the type attribute suggests, this is meant for standard or custom salesforce pages (not hosted in community).

1
  • Ahh.. yes, thank you for pointing it out. Appreciate your help
    – user569925
    Jul 18, 2022 at 19:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .