Saturday, September 28, 2019

File Preview in Lightning Web Component(lwc)

To open one or more file records in Lightning Experience and the Salesforce app, use the navigation service, lightning/navigation.
The navigation service opens the preview of one or more files in a modal dialog in Lightning Experience or triggers a file download in the Salesforce app on mobile devices.

The navigation service uses a PageReference, which describes a page, or in this case, a file.

Use a page reference with 
type: 'standard__namedPage
pageName: 'filePreview'

Page Reference sample
this[NavigationMixin.Navigate]({
        type: 'standard__namedPage',
        attributes: {
            pageName: 'filePreview'
        },
        state : {
            recordIds: '069xx0000000001AAA,069xx000000000BAAQ',
            selectedRecordId:'069xx0000000001AAA'
        }
      })

 recordIds: the property is a comma-separated list of all record IDs(ContentDocumentId) available for download.
 selectedRecordId: the selectedRecordId specifies the record to downloads first.


Example

FilePreviewInLWC.html
<template>
    <lightning-card title="File Preview In Lightning Web Component">
        <template if:true={files}>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div title="Key">File Name</div>
                        </th>
                        <th scope="col">
                            <div title="Value">File Extension</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={files} for:item="keyValue">
                        <tr key={keyValue.Id}>
                            <th scope="col">
                                <div>{keyValue.Title}</div>
                            </th>
                            <th scope="col">
                                <div>{keyValue.FileExtension}</div>
                            </th>
                            <th scope="col">    
                                <!-- Using Dataset Property to get ContentDocumentId -->
                                <lightning-button data-id={keyValue.ContentDocumentId} 
                                                  label="Preview" 
                                                  variant="brand" 
                                                  value="file preview" 
                                                  onclick={filePreview}></lightning-button>
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
    </lightning-card>
</template>

FilePreviewInLWC.js

import { LightningElement, wire, track } from 'lwc';

// importing Apex class method
import retriveFiles from '@salesforce/apex/LWCExampleController.retriveFiles';

// importing navigation service
import { NavigationMixin } from 'lightning/navigation';

// extends the class to 'NavigationMixin'
export default class FilePrivewInLWC extends NavigationMixin(LightningElement) {
    // reactive variables
    @track files;

    // Reteriving the files to preview
    @wire(retriveFiles)
    filesData({data, error}) {
        if(data) {
            window.console.log('data ===> '+data);
            this.files = data;
        }
        else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }
    }

    // when you click the preview button this method will call and
    // it will show the preview of the file based on ContentDocumentId
    filePreview(event) {
        // Naviagation Service to the show preview
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'filePreview'
            },
            state : {
                // assigning ContentDocumentId to show the preview of file
                selectedRecordId:event.currentTarget.dataset.id
            }
          })
    }
}

Apex Class
public inherited sharing class LWCExampleController {
    @AuraEnabled(cacheable=true)
    public static list<ContentVersion> retriveFiles(){
        return [SELECT Id, Title, FileExtension, ContentDocumentId From ContentVersion];
    }
}

Note
  • The filePreview named page value supports the ContentDocument and ContentHubItem (external files) objects.
  • The filePreview named page value is supported in Lightning Experience and all versions of the mobile app. 
  • It isn’t supported in other containers, such as Lightning Components for Visualforce, Lightning Out, or Communities. 
  • The page value isn’t supported even if you access these containers inside Lightning Experience or the Salesforce mobile app.


Result

5 comments:

  1. Hi, I have the need to display this preview of ContentDocuments in a visualforce page. Do you have any suggestion on how to do that?

    ReplyDelete
  2. I am new to LWC. I have a similar requirement to what you have outlined above. I was able to create LWC using Visual Studio Code and upload the component.

    I am unable to understand how you got the related list plugged into the Account Page "File Preview in Lightning Web Component".

    Any help will be greatly appreciated.

    Thanks

    ReplyDelete
  3. Your LWC works great. However I would like this to display a related list of the files for the record I am viewing. Currently it displays all files in the org.

    How would I be able to achieve this?

    Thanks

    ReplyDelete
  4. In Salesforce Site, this solution don't work. Any suggestion?

    ReplyDelete
  5. this isn’t supported in other containers, such as Lightning Components for Visualforce, Lightning Out, or Communities.

    ReplyDelete