Skip to main content

How to create Dynamically Open Salesforce Files or Content Document in Lightning Component

Hello friends today create Dynamically open salesforce files or content document in lightning component, so let us begin....
Step=>1.
       firste created Lightning compoent follow given bellow...
         Click Setup=>developer console=>File=>New=>Lightning Component

  Step=>2.      filePreviewer.cmp


     <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global"
                controller="fileViewerCtrl">
    <!--aura doInit handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 
    <!--aura attributes-->
    <aura:attribute name="selectedDocumentId" type="string"/>
    <aura:attribute name="lstContentDoc" type="List"/>
    <aura:attribute name="hasModalOpen" type="boolean" default="false"/>
 
    <!-- Custom DataTable to Display List Of Available ContentDocuments Start-->
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="Title">Title</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="File Type">File Type</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="Created By">Created By</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="size">size(bytes)</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.lstContentDoc}" var="CD">
                <tr>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.Title}">
                            <!--store contentDocument Id in data-Id attribute-->
                            <a onclick="{!c.getSelected}" data-Id="{!CD.Id}">{!CD.Title}</a>
                        </div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.FileType}">{!CD.FileType}</div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.CreatedBy.Name}">{!CD.CreatedBy.Name}</div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.ContentSize}">{!CD.ContentSize}</div>
                    </th>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    <!-- Custom DataTable to Display List Of Available ContentDocuments End-->
    <!--###### FILE PREVIEW MODAL BOX START ######-->
    <aura:if isTrue="{!v.hasModalOpen}">
        <section onclick="{!c.closeModel}"
                 role="dialog"
                 aria-modal="true"
                 class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-around_medium slds-text-align_center"
                     style="background: transparent;">
                    <div style="width: 50%; margin: 0 auto; text-align: left">
                        <!--<lightning:fileCard> to preview file using content document Id -->
                        <lightning:fileCard fileId="{!v.selectedDocumentId}"/>
                    </div>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
    <!--###### FILE PREVIEW MODAL BOX END ######-->
 
</aura:component>


Step=>3.  filePreviewerController.js

({
    /*call apex controller method "fetchContentDocument" to get salesforce file records*/
    doInit : function(component, event, helper) {
        var action = component.get("c.fetchContentDocument");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.lstContentDoc', response.getReturnValue());
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " +
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
    },
    getSelected : function(component,event,helper){
        // display modle and set seletedDocumentId attribute with selected record Id
        component.set("v.hasModalOpen" , true);
        component.set("v.selectedDocumentId" , event.currentTarget.getAttribute("data-Id"));
     
    },
    closeModel: function(component, event, helper) {
        // for Close Model, set the "hasModalOpen" attribute to "FALSE"
        component.set("v.hasModalOpen", false);
        component.set("v.selectedDocumentId" , null);
    },
 

})


Step=>4.  Create a Apex Class
                      File=>New=>Apex Class
                            fileViewerController.apxc

                public class fileViewerCtrl {
               @AuraEnabled
             public static List<contentDocument>fetchContentDocument(){
               return [SELECT id,Title,FileType,CreatedBy.Name,ContentSize FROM contentDocument                  Limit 100];
               }

            }



                                                   Output:




Buy me a coffeeBuy me a coffee

Comments

Post a Comment

Popular posts from this blog

How to used slds-hide/show class for div hide and show in lightning component

Hello friends today post ,how to create a lightning component to use slds-hide/show class, very easy to use class and aplly.. so let us start ... firstly create a lightning component and there are two or three div or anything when you want to hide/show ... so see given bellow example and udes slds-hide/show class Step=>1.                   goto developer console=>File=>New=>Lightning Component                           sldshideshow.cmp <aura:component >     <aura:attribute name="First" type="string" default="slds-show"/>     <aura:attribute name="Second" type="string" default="slds-hide"/>         <center>     <div class="slds-box" style="width:300px;height:300px;margin-top:15px;">         <div class="{!v.First}">         ...

How to Create Floating Marquee

Hello frnds today post , how to create floating Marquee in Lightning Component so let us begin............. Step=>1. goto developer console                             File=>New=>Lightning Component                    FloatingMarq.cmp                  <aura:component>       <aura:handler name="init" value="{!this}" action="{!c.doInit}" />     <aura:attribute name="intervalId" type="Integer" default="0"/>       <div id="parentDIV" style="overflow:hidden">         <p style="position:relative;" id="tofloat">             <b><span style="color:red">Important Note : </span>             I am Floating (Left to Right) Imformation...</b...

Create Overlays with the New Modal Component

Hello friends, Now modal tag is available in #LWC, we can create a modal using the #LWC Standard tag. snapshot given below with code. Step-1 Create LWC component Step-2 Add below code Step-3 I am showing how my component is look like. Thanks for reading