Tag Archives: Lightning

Lightning Web Component(LWC) Toast Messages

Biswajeet   November 28, 2020   3 Comments on Lightning Web Component(LWC) Toast Messages

A component can send a toast notification that pops up to alert users of a success, error, or warning. A toast can also simply provide information. To display a toast notification in Lightning Experience or Lightning communities, import ShowToastEvent from the lightning/platformShowToastEvent module. Here is the example to show Lightning Web Component(LWC) Toast Messages.

Toast Event Properties:

Parameter Type Description
title String (Required) The title of the toast, displayed as a heading.
message String (Required) A string representing the body of the message. It can contain placeholders in the form of {0} ... {N}. The placeholders are replaced with the links on messageData.
messageData String[] or Object url and label values that replace the {index} placeholders in the message string.
variant String Changes the appearance of the notice. Toasts inherit styling from toasts in the Lightning Design System. Valid values are: info (default), success, warning, and error.
mode String Determines how persistent the toast is. Valid values are: dismissable (default), remains visible until you click the close button or 3 seconds has elapsed, whichever comes first; pester, remains visible for 3 seconds and disappears automatically. No close button is provided; sticky, remains visible until you click the close button.

LWCToastMessage.html:

<template>
    <lightning-button label="Success" onclick={showSuccess}></lightning-button>&nbsp;
    <lightning-button label="Error" onclick={showError}></lightning-button>&nbsp;
    <lightning-button label="Warning" onclick={showWarning}></lightning-button>&nbsp;
    <lightning-button label="Information" onclick={showInfo}></lightning-button>&nbsp;
</template>

LWCToastMessage.js:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class LWCToastMessages extends LightningElement {

    showError() {
        const evt = new ShowToastEvent({
            title: 'Error',
            message: 'This is an error message',
            variant: 'error',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }

    showSuccess(){
        const evt = new ShowToastEvent({
            title: 'Success',
            message: 'This is a success message',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }

    showWarning(){
        const evt = new ShowToastEvent({
            title: 'Warning',
            message: 'This is a warning message',
            variant: 'warning',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }

    showInfo() {
        const evt = new ShowToastEvent({
            title: 'Info',
            message: 'This is an information message',
            variant: 'info',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
}

LWCToastMessage.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>




Salesforce Lightning Custom Datatable Pagination & Sorting

Biswajeet   November 17, 2020   No Comments on Salesforce Lightning Custom Datatable Pagination & Sorting

Apex Class:

public class AccountController {
    
    @AuraEnabled//Get Account Records
    public static String getAccountList(Integer pageSize, Integer pageNumber, String sortingField, Boolean isSortAsc){
        
        String jsonDT = '';
        //Offset for SOQL
        Integer offset = (pageNumber - 1) * pageSize;
        
        //Total Records
        Integer totalRecords = [SELECT COUNT() FROM Account];
        Integer recordEnd = pageSize * pageNumber;
        
        String sortBy = isSortAsc ? 'ASC' : 'DESC';
        
        String query = 'SELECT Id, Name, AccountNumber, Industry, Phone FROM Account ORDER BY ';
        query += sortingField + ' ' + sortBy;
        query += ' LIMIT :pageSize OFFSET :offset';
        
        AccountDTWrapper objDT =  new AccountDTWrapper();  
        objDT.pageSize = pageSize;
        objDT.pageNumber = pageNumber;
        objDT.recordStart = offset + 1;
        objDT.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords;
        objDT.totalRecords = totalRecords;
        objDT.accounts = Database.query(query);
        jsonDT = JSON.serialize(objDT);
        return jsonDT;
    }

    public class AccountDTWrapper {
        public Integer pageSize {get;set;}
        public Integer pageNumber {get;set;}
        public Integer totalRecords {get;set;}
        public Integer recordStart {get;set;}
        public Integer recordEnd {get;set;}
        public List<Account> accounts {get;set;}
    }
}

Lightning Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="AccountController">
    
    <!--Declare Attributes-->
    <aura:attribute name="accounts" type="List"/>
    <aura:attribute name="pageNumber" type="integer" default="1"/>
    <aura:attribute name="pageSize" type="integer" default="10"/>
    <aura:attribute name="totalPages" type="integer" default="0"/>
    <aura:attribute name="totalRecords" type="integer" default="0"/>
    <aura:attribute name="recordStart" type="integer" default="0"/>
    <aura:attribute name="recordEnd" type="integer" default="0"/>
    
    <aura:attribute name="isSortByName" type="Boolean" default="false"/>
    <aura:attribute name="isSortByAccNo" type="Boolean" default="false"/>
    <aura:attribute name="isSortByIndustry" type="Boolean" default="false"/>
    <aura:attribute name="isSortByPhone" type="Boolean" default="false"/>
    <aura:attribute name="isSortAsc" type="Boolean" default="true"/>
    <aura:attribute name="selectedSortingField" type="String" default="Name"/>
    
    <!--Declare Handlers-->
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:card>
            <aura:set attribute="title">
                Accounts
            </aura:set>
            <aura:set attribute="footer">
                <div class="slds-align_absolute-center"> 
                    <div class="slds-p-right_xx-small">
                        
                        <lightning:button label="Prev"
                                          onclick="{!c.handlePrev}"
                                          disabled="{! v.pageNumber == 1}"
                                          variant="brand"
                                          iconName="utility:back"
                                          name="prev"/>
                    </div>
                    <span class="slds-badge slds-badge_lightest">
                        {!v.recordStart}-{!v.recordEnd} of {!v.totalRecords} | Page {!v.pageNumber} of {!v.totalPages}
                    </span>
                    <div class="slds-p-left_xx-small">
                        <lightning:button label="Next"
                                          disabled="{!v.pageNumber == v.totalPages}"
                                          onclick="{!c.handleNext}"
                                          variant="brand"
                                          iconName="utility:forward"
                                          iconPosition="right"
                                          name="next"/>
                    </div>
                </div>  
                
            </aura:set>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset slds-text-title_caps">
                        <th style="width:30%" data-record="Name" class="slds-is-resizable" scope="col" onclick="{!c.handleSorting}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Name">Name</span>
                                <aura:if isTrue="{!v.isSortByName}">
                                    <aura:if isTrue="{!v.isSortAsc}">
                                        &#9650;
                                        <aura:set attribute="else">
                                            &#9660;
                                        </aura:set>
                                    </aura:if> 
                                </aura:if>
                            </a>
                        </th>
                        <th style="width:20%"  data-record="AccountNumber" class="slds-is-resizable" scope="col" onclick="{!c.handleSorting}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Account Number">Account Number</span>
                                <aura:if isTrue="{!v.isSortByAccNo}">
                                    <aura:if isTrue="{!v.isSortAsc}">
                                        &#9650;
                                        <aura:set attribute="else">
                                            &#9660;
                                        </aura:set>
                                    </aura:if> 
                                </aura:if>
                            </a>
                        </th>
                        <th style="width:20%"  data-record="Industry" class="slds-is-resizable" scope="col" onclick="{!c.handleSorting}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Industry">Industry</span>
                                <aura:if isTrue="{!v.isSortByIndustry}">
                                    <aura:if isTrue="{!v.isSortAsc}">
                                        &#9650;
                                        <aura:set attribute="else">
                                            &#9660;
                                        </aura:set>
                                    </aura:if> 
                                </aura:if>
                            </a>
                        </th>
                        <th style="width:20%"  data-record="Phone" class="slds-is-resizable" scope="col" onclick="{!c.handleSorting}">
                            <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                                <span class="slds-assistive-text">Sort</span>
                                <span class="slds-truncate" title="Phone">Phone</span>
                                <aura:if isTrue="{!v.isSortByPhone}">
                                    <aura:if isTrue="{!v.isSortAsc}">
                                        &#9650;
                                        <aura:set attribute="else">
                                            &#9660;
                                        </aura:set>
                                    </aura:if> 
                                </aura:if>
                            </a>
                        </th>
                        <th scope="col" style="width:10%">
                            
                        </th>
                    </tr>
                </thead>
                <aura:if isTrue="{!not(empty(v.accounts))}">
                    <tbody>
                        <aura:iteration items="{!v.accounts}" var="acc">
                            <tr class="slds-hint-parent">
                                
                                <th data-label="Name" scope="row">
                                    <div class="slds-truncate" title="{!acc.Name}">
                                        {!acc.Name}
                                    </div>
                                </th>
                                <td data-label="Account Number">
                                    <div class="slds-truncate" title="{!acc.AccountNumber}">{!acc.AccountNumber}</div>
                                </td>
                                <td data-label="Industry">
                                    <div class="slds-truncate" title="{!acc.Industry}">{!acc.Industry}</div>
                                </td>
                                <td data-label="Phone">
                                    <div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div>
                                </td>
                                <td>
                                    <div class="slds-align_absolute-center">
                                        <lightning:buttonMenu alternativeText="Show menu" menuAlignment="auto" onselect="{!c.handleRowAction}" value="{!acc.Id}">
                                            <lightning:menuItem value="edit" label="Edit" iconName="utility:edit" title="Edit" />
                                            <lightning:menuItem value="view" label="View" iconName="utility:description" title="View" />
                                        </lightning:buttonMenu>
                                    </div>
                                </td>
                            </tr>
                        </aura:iteration>
                    </tbody>
                </aura:if>
            </table>
            <aura:if isTrue="{!empty(v.accounts)}">
                <div class="slds-align_absolute-center">
                    No records found
                </div>
            </aura:if>
        </lightning:card>
    </div>
    <!--Component End-->
    
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event, helper) {        
        helper.getAccounts(component, helper);
    },
    
    handleNext : function(component, event, helper) { 
        var pageNumber = component.get("v.pageNumber");
        component.set("v.pageNumber", pageNumber+1);
        helper.getAccounts(component, helper);
    },
    
    handlePrev : function(component, event, helper) {        
        var pageNumber = component.get("v.pageNumber");
        component.set("v.pageNumber", pageNumber-1);
        helper.getAccounts(component, helper);
    },

    handleRowAction: function (component, event, helper) {
        var selectedAction = event.detail.menuItem.get("v.value");
        var selectedAccountId = event.getSource().get("v.value");
        switch (selectedAction) {
            case 'edit':
                helper.editRecord(component, event, selectedAccountId);
                break;
            case 'view':
                helper.viewRecord(component, event, selectedAccountId);
                break;
        }
    },
    
    handleSorting: function (component, event, helper) {
        var selectedItem = event.currentTarget;
        var selectedField = selectedItem.dataset.record;
        
        component.set("v.isSortByName", false);
        component.set("v.isSortByAccNo", false);
        component.set("v.isSortByIndustry", false);
        component.set("v.isSortByPhone", false);
        component.set("v.selectedSortingField", selectedField);
        
        if(selectedField == 'Name'){
            component.set("v.isSortByName", true);
        }else if(selectedField == 'AccountNumber'){
            component.set("v.isSortByAccNo", true);
        }else if(selectedField == 'Industry'){
            component.set("v.isSortByIndustry", true);
        }else if(selectedField == 'Phone'){
            component.set("v.isSortByPhone", true);
        }
        helper.sortColumnData(component, event);
    },
})

Lightning JS Helper:

({
    getAccounts: function(component, event) {
        var action = component.get("c.getAccountList");
        action.setParams({
            "pageSize": component.get("v.pageSize"),
            "pageNumber": component.get("v.pageNumber"),
            "sortingField": component.get("v.selectedSortingField"),
            "isSortAsc": component.get("v.isSortAsc")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS"){
                var result = response.getReturnValue();
                if(result){
                    var resultData = JSON.parse(result);
                    var pageSize = component.get("v.pageSize");
                    component.set("v.accounts", resultData.accounts);
                    component.set("v.pageNumber", resultData.pageNumber);
                    component.set("v.totalRecords", resultData.totalRecords);
                    component.set("v.recordStart", resultData.recordStart);
                    component.set("v.recordEnd", resultData.recordEnd);
                    component.set("v.totalPages", Math.ceil(resultData.totalRecords / pageSize));
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    viewRecord : function(component, event, selectedAccountId) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": selectedAccountId,
            "slideDevName": "detail"
        });
        navEvt.fire();
    },
    
    editRecord : function(component, event, selectedAccountId) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": selectedAccountId
        });
        editRecordEvent.fire();
    },
    
    sortColumnData: function(component, event) {
        var accountList = component.get("v.accounts");
        var isSortAsc = component.get("v.isSortAsc");
        var sortingField = component.get("v.selectedSortingField");
        accountList.sort(function(a, b){
            var s1 = a[sortingField] == b[sortingField];
            var s2 = (!a[sortingField] && b[sortingField]) || (a[sortingField] < b[sortingField]);
            return s1? 0: (isSortAsc?-1:1)*(s2?1:-1);
        });
        component.set("v.accounts", accountList);
        component.set("v.isSortAsc", !isSortAsc);
    },
})

Hyperlink to recordId in Lightning Aura Component

Biswajeet   November 9, 2020   No Comments on Hyperlink to recordId in Lightning Aura Component

A lightning:formattedUrl component displays a read-only representation of a URL as a hyperlink with an href attribute. The link can be a relative or absolute URL.

Sample Code:

<aura:component> 
    <aura:attribute name="recordId" type="String" default="0063X0000146rTLQAY"/>
    <lightning:formattedUrl value="{!'/' + recordId}" tooltip="Opportunity" label="Opportunity" target="_blank" />
</aura:component>

How to use jQuery in Salesforce Lightning Aura Component?

Biswajeet   August 15, 2020   No Comments on How to use jQuery in Salesforce Lightning Aura Component?

Step 1: Upload the jQuery library as a static resource in your Org.

Step 2: Use ltng:require to load static resource JavaScript libraries on your component.

<aura:component>
    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" />
</aura:component>

Step 3: To utilize the library include the afterScriptsLoaded event and add the method in your aura component JS controller.

Aura Component :

<aura:component>
    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" afterScriptsLoaded="{!c.handleAfterScriptsLoaded}" />
</aura:component>

JS Controller:

({
    handleAfterScriptsLoaded : function(component, event, helper) {
        jQuery("document").ready(function(){
            console.log('jQuery Loaded');
        });
    }
})

Generic File Related List Lightning Component

Biswajeet   August 9, 2020   6 Comments on Generic File Related List Lightning Component

Apex Class:

/*
@Author : Biswajeet Samal
@CreatedDate : 08th Aug 2020
@Description : Related Files Controller
*/
public class RelatedFilesController {
    
    @AuraEnabled
    public static List<ContentDocument> getRelatedDocs(Id recordId){
        List<ContentDocument> cdList = new List<ContentDocument>();
        List<ContentDocumentLink> cdlList = [SELECT ContentDocumentId FROM ContentDocumentLink
                                             WHERE LinkedEntityId = :recordId];
        Set<Id> cdIds = new Set<Id>();
        for (ContentDocumentLink cdl : cdlList) {
            cdIds.add(cdl.ContentDocumentId); 
        }        
        cdList = [SELECT Id, Title, FileType, OwnerId, Owner.Name, CreatedDate,
                  CreatedById, CreatedBy.Name, ContentSize
                  FROM ContentDocument WHERE Id IN :cdIds];
        return cdList;
    }
    
    @AuraEnabled
    public static string getDocURL(Id docId){
        ContentVersion cv = [SELECT Id FROM ContentVersion WHERE ContentDocumentId = :docId AND IsLatest = true];
        String cvDownloadURL = URL.getSalesforceBaseUrl().toExternalForm() + '/sfc/servlet.shepherd/version/download/' + cv.Id;
        return cvDownloadURL;
    }
    
    @AuraEnabled
    public static void deleteDoc(Id docId){
        ContentDocument conDoc = new ContentDocument(Id = docId);
        delete conDoc;
    }
}

Lightning Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="RelatedFilesController">
    
    <!--Attributes-->
    <aura:attribute name="cdList" type="List"/>
    
    <!--Handlers--> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!--Component 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="Created Date">Created Date</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                    
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.cdList}" var="cd">
                <tr>
                    <th scope="row">
                        <div class="slds-truncate" title="{!cd.Title}">
                            <a onclick="{!c.handleSelectedDocPreview}" 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}">
                            <a onclick="{!c.handleRedirectToUserRecord}" data-Id="{!cd.CreatedById}">{!cd.CreatedBy.Name}</a>
                        </div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!cd.CreatedDate}">
                            <lightning:formattedDateTime value="{!cd.CreatedDate}"/>
                        </div>
                    </th>
                    <th scope="row">
                        <lightning:buttonMenu alternativeText="Show menu" menuAlignment="auto" onselect="{!c.handleSelectedAction}" value="{!cd.Id}">
                            <lightning:menuItem value="Download" label="Download" iconName="utility:download" title="Download" />
                            <lightning:menuItem value="Delete" label="Delete" iconName="utility:delete" title="Delete"/>
                        </lightning:buttonMenu>
                    </th>
                </tr>  
            </aura:iteration>
        </tbody>
    </table>
    <!--Component End-->
</aura:component>

Lightning Component JS Controller:

({
    //Get Related Docs
    doInit : function(component, event, helper) {
        helper.getRelatedDocuments(component, event); 
    },
    
    //Redirect To User Record
    handleRedirectToUserRecord: function (component, event, helper) {
        var recordId = event.currentTarget.getAttribute("data-Id")
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": recordId,
            "slideDevName": "Detail"
        });
        navEvt.fire();
    },
    
    //Preview Selected File
    handleSelectedDocPreview : function(component,event,helper){ 
        $A.get('e.lightning:openFiles').fire({
            recordIds: [event.currentTarget.getAttribute("data-Id")]
        });
    },
    
    //Handle Selected Action
    handleSelectedAction: function(component, event, helper) {
        var docId = event.getSource().get("v.value");
        var selectedMenuValue = event.detail.menuItem.get("v.value");
        switch(selectedMenuValue) {
            case "Delete":
                helper.deleteDocument(component, event, docId);
                break;
            case "Download":
                helper.downloadDocument(component, event, docId);
                break;
        }
    }
})

Lightning Component JS Helper:

({
    getRelatedDocuments : function(component, event) {
        var action = component.get("c.getRelatedDocs");
        action.setParams({
            recordId : component.get("v.recordId")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                component.set('v.cdList', response.getReturnValue());
            }else if(state === "INCOMPLETE") {
                console.log("INCOMPLETE");
            }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);  
    },
    
    deleteDocument : function(component, event, docId) {
        var action = component.get("c.deleteDoc");
        action.setParams({
            docId : docId
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                this.getRelatedDocuments(component, event);
            }else if(state === "INCOMPLETE") {
                console.log("INCOMPLETE");
            }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);  
    },
    
    downloadDocument : function(component, event, docId) {
        var action = component.get("c.getDocURL");
        action.setParams({
            docId : docId
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                var urlEvent = $A.get("e.force:navigateToURL");
                urlEvent.setParams({
                    "url": response.getReturnValue()
                });
                urlEvent.fire();
            }else if(state === "INCOMPLETE") {
                console.log("INCOMPLETE");
            }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);  
    }
})