• Accueil / Salesforce / Comment prévisualiser des…
, Comment prévisualiser des fichiers dans Lightning Community à l&rsquo;aide de LWC &#8211; SFDCPanther<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Comment prévisualiser des fichiers dans Lightning Community à l’aide de LWC – SFDCPanther7 minutes de lecture


Salut à tous,

Dans cet article, je vais vous montrer comment télécharger et prévisualiser les fichiers de Lightning Community à l’aide du composant Web Lightning.

Avant de commencer, parlons de la structure des objets des fichiers pour savoir comment les fichiers sont stockés dans Salesforce.

Document de contenu: – Représente un document qui a été téléchargé dans une bibliothèque dans Salesforce CRM Content ou Salesforce Files.

Version du contenu: – Représente une version spécifique d’un document dans Salesforce CRM Content ou Salesforce Files. Un document de contenu peut avoir plusieurs versions de contenu.

Lien du document de contenu: – Représente le lien entre un document Salesforce CRM Content ou un fichier Salesforce et l’endroit où il est partagé. Un fichier peut être partagé avec d’autres utilisateurs, groupes, enregistrements et bibliothèques de contenu Salesforce CRM.

Voici le schéma complet.

, Comment prévisualiser des fichiers dans Lightning Community à l&rsquo;aide de LWC &#8211; SFDCPanther<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>
Fichiers dans Salesforce

Voici à quoi ressemblera votre composant une fois que vous aurez terminé le développement du composant.

, Comment prévisualiser des fichiers dans Lightning Community à l&rsquo;aide de LWC &#8211; SFDCPanther<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

traits

  1. Aperçu des fichiers dans les deux Expérience Lightning et communauté d’éclairage
  2. Téléchargez les fichiers dans les deux Expérience Lightning et communauté d’éclairage
  3. Supprimer les fichiers
  4. Télécharger de nouveaux fichiers sous le même enregistrement
  5. Filtrer les fichiers en fonction de la date de création et du titre du fichier
  6. Synchronisez les fichiers depuis Salesforce si le fichier a été téléchargé depuis un autre emplacement.
  7. Contrôlez les informations à afficher dans le tableau.

Limites

  1. La seule limitation du composant est que nous ne pouvons l’utiliser que sous la page de détail de l’enregistrement.

Utiliser le composant dans la page d’enregistrement Salesforce dans Lightning Experience

Pour utiliser le composant, ouvrez la page de détails d’enregistrement de tout objet dans lequel vous souhaitez utiliser ce composant. Cliquez sur l’icône d’engrenage, puis sur Modifier la page.

, Comment prévisualiser des fichiers dans Lightning Community à l&rsquo;aide de LWC &#8211; SFDCPanther<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Dans la gauche, recherchez le gestionnaire de contenu, faites glisser et déposez le composant où vous vouliez placer.

Cela nécessite des informations supplémentaires que votre administrateur Salesforce peut configurer. Voir la capture d’écran ci-dessous

, Comment prévisualiser des fichiers dans Lightning Community à l&rsquo;aide de LWC &#8211; SFDCPanther<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>
Composant de configuration dans l’expérience d’éclairage
  1. Titre: – Titre de la carte d’éclairage
  2. ID d’enregistrement: – utilisation recordId comme valeur pour l’expérience d’éclairage et {! recordId} si le composant est utilisé dans Lightning Community
  3. Voulez-vous afficher les détails? – pour afficher les détails du fichier. Gardez aussi vrai
  4. Format de fichier accepté pour télécharger les fichiers? – Il a des valeurs par défaut. si vous souhaitez supprimer ou ajouter, effectuez l’ajustement.
  5. L’utilisateur peut-il synchroniser les fichiers depuis Salesforce? – Si c’est vrai, il affichera un bouton pour synchroniser les fichiers de Salesforce.
  6. Voulez-vous que les utilisateurs téléchargent les nouveaux fichiers? – Si c’est vrai, l’utilisateur pourra voir le bouton de téléchargement.
  7. Le composant est utilisé dans la communauté? – Cochez cette option si le composant est utilisé dans la communauté Salesforce.
  8. Afficher les filtres? – Si vrai, l’utilisateur pourra voir les filtres.

Configurons le code.

Créez la classe Apex.

/**
 * @description       : 
 * @author            : Amit Singh
 * @group             : 
 * @last modified on  : 12-02-2020
 * @last modified by  : Amit Singh
 * Modifications Log 
 * Ver   Date         Author       Modification
 * 1.0   11-26-2020   Amit Singh   Initial Version
**/
public with sharing class ContentManagerService {
    
    @AuraEnabled
    public static String getContentDetails(String recordId) {
        List contentDocumentList = [SELECT ContentDocumentId, LinkedEntityId 
                                                            FROM   ContentDocumentLink 
                                                            WHERE  LinkedEntityId =: recordId];
        Set contentDocumentId = new Set();
            
        for(ContentDocumentLink cdl : contentDocumentList){
            contentDocumentId.add(cdl.ContentDocumentId);
        }
            
        List contentVersionList = [SELECT Id, VersionData, FileType, Title, FileExtension,
                                                    ContentDocument.CreatedBy.Name, ContentDocument.ContentSize,
                                                    CreatedDate, ContentDocumentId, ContentDocument.FileType
                                                    FROM   ContentVersion 
                                                    WHERE  ContentDocumentId IN : contentDocumentId];
        return JSON.serialize(contentVersionList);
    }

    @AuraEnabled
    public static void deleteContentDocument(String recordId) {
        Database.delete(recordId);
    }

    public static string ContentType(String fileType) {

        switch on fileType.toLowerCase(){
            when 'docx' {
                return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
            }
            when 'csv' {
                return 'application/vnd.ms-excel';
            }
            when 'wav' {
                return 'audio/wav';
            }
            when 'wmv' {
                return 'video/x-ms-wmv';
            }
            when 'mp3' {
                return 'audio/mpeg';
            }
            when 'mp4' {
                return 'video/mp4';
            }
            when 'png' {
                return 'image/png';
                
            }
            when 'pdf' {
                return 'application/pdf';
                
            }
            when else {
                return 'image/jpeg';
            }
        }

    }
}

Créez le composant Web Lightning et utilisez le code ci-dessous.

Code pour fichier HTML


Code pour les fichiers javascript.

import { api, LightningElement, track, wire } from 'lwc';
import getContentDetails from '@salesforce/apex/ContentManagerService.getContentDetails';
import deleteContentDocument from '@salesforce/apex/ContentManagerService.deleteContentDocument';
import { NavigationMixin } from 'lightning/navigation';

const columns = [
    { label: 'Title',       fieldName: 'Title', wrapText : true,
        cellAttributes: { 
            iconName: { fieldName: 'icon' }, iconPosition: 'left' 
        }
    },
    { label: 'Created By',  fieldName: 'CREATED_BY',
        cellAttributes: { 
            iconName: 'standard:user', iconPosition: 'left' 
        }
    },
    { label: 'File Size',   fieldName: 'Size' },
    { label: 'Preview', type:  'button', typeAttributes: { 
            label: 'Preview',  name: 'Preview',  variant: 'brand-outline',
            iconName: 'utility:preview', iconPosition: 'right'
        } 
    },
    { label: 'Download', type:  'button', typeAttributes: { 
            label: 'Download', name: 'Download', variant: 'brand', iconName: 'action:download', 
            iconPosition: 'right' 
        } 
    },
    { label: 'Delete', type:  'button', typeAttributes: { 
            label: 'Delete',   name: 'Delete',   variant: 'destructive',iconName: 'standard:record_delete', 
            iconPosition: 'right' 
        } 
    } 
];

export default class ContentManager extends NavigationMixin(LightningElement) {

    @api title;
    @api showDetails;
    @api showFileUpload;
    @api showsync;
    @api recordId;
    @api usedInCommunity;
    @api showFilters;
    @api accept = '.csv,.doc,.xsl,.pdf,.png,.jpg,.jpeg,.docx,.doc';

    @track dataList;
    @track columnsList = columns;
    isLoading = false;

    wiredFilesResult;

    connectedCallback() {
        this.handleSync();
    }

    getBaseUrl(){
        let baseUrl = 'https://'+location.host+'/';
        return baseUrl;
    }

    handleRowAction(event){

        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch (actionName) {
            case 'Preview':
                this.previewFile(row);
                break;
            case 'Download':
                this.downloadFile(row);
                break;
            case 'Delete':
                this.handleDeleteFiles(row);
                break;
            default:
        }

    }

    previewFile(file){
        
        if(!this.usedInCommunity){
            
            this[NavigationMixin.Navigate]({
                type: 'standard__namedPage',
                attributes: {
                    pageName: 'filePreview'
                },
                state : {
                    selectedRecordId: file.ContentDocumentId
                }
            });
        } else if(this.usedInCommunity){
            
            this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: file.fileUrl
                }
            }, false );
        }
        
    }

    downloadFile(file){
        this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: file.downloadUrl
                }
            }, false 
        );
    }

    handleDeleteFiles(row){

        this.isLoading = true;

        deleteContentDocument({
            recordId : row.ContentDocumentId
        })
        .then(result => {
            this.dataList  = this.dataList.filter(item => {
                return item.ContentDocumentId !== row.ContentDocumentId ;
            });
        })
        .catch(error => {
            console.error('**** error **** n ',error)
        })
        .finally(()=>{
            this.isLoading = false;
        });
    }

    handleSync(){

        let imageExtensions = ['png','jpg','gif'];
        let supportedIconExtensions = ['ai','attachment','audio','box_notes','csv','eps','excel','exe',
                        'flash','folder','gdoc','gdocs','gform','gpres','gsheet','html','image','keynote','library_folder',
                        'link','mp4','overlay','pack','pages','pdf','ppt','psd','quip_doc','quip_sheet','quip_slide',
                        'rtf','slide','stypi','txt','unknown','video','visio','webex','word','xml','zip'];

        this.isLoading = true;
        getContentDetails({
            recordId : this.recordId
        })
        .then(result => {
            let parsedData = JSON.parse(result);
            let stringifiedData = JSON.stringify(parsedData);
            let finalData = JSON.parse(stringifiedData);
            let baseUrl = this.getBaseUrl();
            finalData.forEach(file => {
                file.downloadUrl = baseUrl+'sfc/servlet.shepherd/document/download/'+file.ContentDocumentId;
                file.fileUrl     = baseUrl+'sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId='+file.Id;
                file.CREATED_BY  = file.ContentDocument.CreatedBy.Name;
                file.Size        = this.formatBytes(file.ContentDocument.ContentSize, 2);

                let fileType = file.ContentDocument.FileType.toLowerCase();
                if(imageExtensions.includes(fileType)){
                    file.icon = 'doctype:image';
                }else{
                    if(supportedIconExtensions.includes(fileType)){
                        file.icon = 'doctype:' + fileType;
                    }
                }
            });
            this.dataList = finalData;
        })
        .catch(error => {
            console.error('**** error **** n ',error)
        })
        .finally(()=>{
            this.isLoading = false;
        });
    }

    handleUploadFinished(){
        this.handleSync();
        //eval("$A.get('e.force:refreshView').fire();");
    }
    formatBytes(bytes,decimals) {
        if(bytes == 0) return '0 Bytes';
        var k = 1024,
            dm = decimals || 2,
            sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }

    handleSearch(event){
        let value = event.target.value;
        let name  = event.target.name;
        if( name === 'Title' ){
            this.dataList = this.dataList.filter( file => {
                return file.Title.toLowerCase().includes(value.toLowerCase());
            });
        } else if( name === 'Created By' ){
            this.dataList = this.dataList.filter( file => {
                return file.CREATED_BY.toLowerCase().includes(value.toLowerCase());
            });
        }
    }
}

Code pour le fichier meta.xml



    50.0
    true
    Content Manager
    
        lightning__RecordPage
        lightning__UtilityBar
        lightningCommunity__Page
        lightningCommunity__Default
    
    
    
        
            
            
            
            
            
            
            
            
        
    

Déployez le code dans votre organisation Salesforce et profitez-en.

Merci d’avoir lu 🙂

#HappyReading #DeveloperGeeks #AskPanther #SFDCPanther

Cliquez pour noter cet article!

[Total:[Total:1 Moyenne: 5]



Source de l’article traduit automatiquement en Français

Besoin d'aide ?
Voulez-vous utiliser Pardot à sa capacité maximale et avoir
+ DE LEADS QUALIFIÉS

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer