[SalesForce] Show download attachment link on lightning component

I have a custom object named "abc" in which three fields are present. And i have also enabled "Add Notes and Attachments related list to default page layout" during this object creation. Hence i can now upload attachments for each record on this object.

What i want to do :

I want to create lightning component where i will show a list of records from the custom object and also list of attachments against each record.

What i have done till now :

I have created lightning component and fetched a list of records that i can show.

Problem i am facing :

How to show a list of attachments for each record? I want to show a downloadable link for each attachment. I am unable to do this.

Best Answer

  1. On your apex server side code you need to select also the attachment object -> all the attachments of the selected objects ids.
  2. Create a wrapper apex class that will represent 1 record with a list of attachments and prepare your data so each record has a list of attachments. Then send a list of this wrapper class back to the client (you can do this also on the client side javascript and not from the server).

  3. on your client side markup you should define an attribute from the wrapper class, and have an aura:iteration for each record, and inside another aura:iteration for the attachments in each record:

    <aura:attribute type="ControllerClass.wrapperClass[]" name="records" />

  4. Displaying the downloadable links - you can do in many ways - for example, I display download links like that (where att is the iteration variable):

    <div class="slds-media__body">
    <h3 class="slds-truncate" title="File Name">
        <a href="{!'/servlet/servlet.FileDownload?file='+att.Id}">{!att.Name}</a>
    </h3>
    <div class="slds-tile__detail slds-text-body--small">
        <ul class="slds-list--horizontal slds-has-dividers--right">
            <li class="slds-item">
                <ui:outputDate format="dd/MM/yyyy HH:mm" value="{!att.LastModifiedDate}"/>
            </li>
            <li class="slds-item">
                KB&nbsp;<ui:outputNumber format="#,###,###.#" value="{!(att.BodyLength) / 1000}" />
            </li>
        </ul>
    </div>
</div>
Related Topic