Hello folks,

In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 

Prerequisite : 

Create a custom object WhatsApp__c

Create custom fields as shown below : 



Please follow the code below : 


WhatsAppComponent
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<aura:component controller="Vlog_whatsappCTRL" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<aura:attribute name="recordId" type="String" />
    <aura:attribute name="con" type="Contact" />
    <aura:attribute name="msg" type="String" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-account" title="WhatsApp">
                        <img src="{!$Resource.whatsapp}" style="width:60px"/>
                    </span>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="WhatsApp">
                            <span>WhatsApp</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner">Please enter text in body and click on send button.</div>
    </article>
    <div class="row">
        <lightning:textarea aura:id="myText" name="whatsappText" label="Message" placeholder="type here..." value="{!v.msg}"/>
        <lightning:button label="Send" iconName="utility:comments" iconPosition="left"  variant="brand" onclick="{! c.sendWhatsApp }" />
    </div>
</aura:component>


WhatsAppController.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
({
	doInit : function(component, event, helper) {
        var action = component.get("c.fetchContact");
         action.setParams({
            "conId" : component.get("v.recordId").toString()
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            var data;
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
                component.set("v.con", result);
            }
        });
        $A.enqueueAction(action);
	},
    sendWhatsApp : function(component, event, helper){
        var action = component.get("c.saveChat");
         action.setParams({
            "conId" : component.get("v.recordId").toString(),
             "chat" : component.find("myText").get("v.value")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            var data;
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
            }
        });
        $A.enqueueAction(action);

        
        var contact = component.get("v.con");
        var msg = component.find("myText").get("v.value");
        var url= "https://wa.me/91"+contact.MobilePhone+"?text="+msg;
        window.open(url, '_blank');
        $A.get("e.force:closeQuickAction").fire();
    }
    
})

WhatsAppApex
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
public class Vlog_whatsappCTRL {
    @AuraEnabled 
    public static Contact fetchContact(String conId){
        return [Select Id, Name,Phone, MobilePhone FROM Contact where Id=:conId ];
    }
    
    @AuraEnabled
    public static String saveChat(String conId, String chat){
        WhatsApp__c wa = new WhatsApp__c();
        wa.WhatsAppText__c = chat;
        wa.ContactId__c = conId;
        wa.WhatsAppDate__c = System.Datetime.now();
        insert wa;
        return wa.Id;
    }
}



Follow below code to display chat component 😀

Component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<aura:component controller="LightningDataTableCTRL" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="pageNumber" type="Integer" default="1" />
    <aura:attribute name="pageSize" type="Integer" default="10" />
    <aura:attribute name="isLastPage" type="Boolean" default="false" />
    <aura:attribute name="totalPages" type="Integer"/>
    <aura:attribute name="totalRecords" type="Integer"  />
	<aura:attribute name="hasRecords" type="Boolean" default="false" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    
    <lightning:layout multipleRows="true" horizontalAlign="center">
        <lightning:layoutItem padding="around-small" size="12">
            <lightning:datatable keyField="Name" data="{! v.recordList}" 
                                 class="myCss"
                                 columns="{! v.columns}"
                                 hideCheckboxColumn="true"
                                 />
        </lightning:layoutItem>
        <aura:if isTrue="{!v.totalPages>1}">
            <lightning:layoutItem padding="around-small" flexibility="auto">
                <lightning:button label="First" iconName="utility:chevronleft" iconPosition="left"
                                  onclick="{!c.onFirst}" disabled="{! v.pageNumber==1}"/>
                <lightning:button label="Prev" iconName="utility:chevronleft" iconPosition="left"
                                  onclick="{!c.onPrev}" disabled="{! v.pageNumber == 1}"/>
                <span class="slds-p-horizontal_small">
                    Page {!v.pageNumber} | Showing records from {!((v.pageNumber-1)*v.pageSize)+1} to {!if(v.totalPages==v.pageNumber, v.totalRecords, (((v.pageNumber-1)*v.pageSize)+v.pageSize))}
                </span>
                <lightning:button label="Next" iconName="utility:chevronright" iconPosition="right" 
                                  disabled="{! v.isLastPage}" onclick="{!c.onNext}"/>
                <lightning:button label="Last" iconName="utility:chevronright" iconPosition="right" 
                                  disabled="{!v.isLastPage}" onclick="{!c.onLast}"/>
            </lightning:layoutItem>
            
        </aura:if>
        
    </lightning:layout>
</aura:component>


Controller.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
({
    doInit : function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Name', fieldName:'Name',sortable:true,type:'text', initialWidth: 200},
            {label: 'Date Time', fieldName:'WhatsAppDate__c',sortable:true,type:'text', initialWidth: 300},
            {label: 'Chat', fieldName:'WhatsAppText__c',sortable:true,type:'text', initialWidth: 400}
        ]);
        helper.getChats(component, helper);
        helper.getChatsCount(component, helper);
    },
   
    onFirst: function(component, event, helper) {
        var totalPages = component.get("v.totalPages");
        component.set("v.isLastPage", false);
        component.set("v.pageNumber", 1);
        helper.getChats(component, helper);     
    },
    onPrev: function(component, event, helper) {
        var pageNumber = component.get("v.pageNumber");
        var totalPages = component.get("v.totalPages");
        if(pageNumber <= totalPages){
            component.set("v.isLastPage", false);
            component.set("v.pageNumber", pageNumber-1);
            helper.getChats(component, helper);     
        } 
    },
    onNext: function(component, event, helper) {
        var pageNumber = component.get("v.pageNumber");
        var totalPages = component.get("v.totalPages");
        if(totalPages > pageNumber){
            component.set("v.pageNumber", pageNumber+1);
            helper.getChats(component, helper);
            if(pageNumber==(totalPages-1)){
                component.set("v.isLastPage", true); 
            }
        }
    },
    onLast: function(component, event, helper) {
        var lastPage = component.get("v.totalPages");
        component.set("v.isLastPage", true); 
        component.set("v.pageNumber", lastPage);
        helper.getChats(component, helper);
    },
    
})


Helper.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
({
    getChats : function(component, helper) {
        var action = component.get("c.getChatsList");
        action.setParams({
            "pageSize" : component.get("v.pageSize").toString(),
            "pageNumber" : component.get("v.pageNumber").toString(),
            "conId" :  component.get("v.recordId").toString()
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            var data;
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
                component.set("v.recordList", result);
            }
        });
        $A.enqueueAction(action);
    },
    getChatsCount: function(component, helper) {
        const action = component.get("c.getChatsCount");
        // Register the callback function
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
                var pageSize=component.get("v.pageSize");
                component.set("v.totalRecords", result)
                var totalPages = Math.ceil(result/pageSize);
                component.set("v.totalPages",totalPages);
            }
        });
        $A.enqueueAction(action);
    },
    
})


Style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
.THIS {
}

.THIS .myCss thead th span{
    background-color: #3258a8;
    color: white;
}
.THIS .myCss td {
    background-color: #fffbdb;
    color: black;
}
.THIS .myCss tr {
    background-color: #fffbdb;
    color: black;
}
.THIS .myCss td:hover {
    background-color: #ffed63 !important;
    color: black !important;
    font-weight:bold !important;
}


Apex Controller
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public class LightningDataTableCTRL {
    @AuraEnabled
    public static list<WhatsApp__c> getChatsList(String pageSize, String pageNumber, String conId){
        String soql = 'Select Name, FORMAT(WhatsAppDate__c), WhatsAppText__c FROM WhatsApp__c where ContactId__c=\''+conId+'\' Order By WhatsAppDate__c';
        system.debug('###SOQL : '+soql);
        if(pageSize==null){
            pageSize='10';
        }
        if(pageNumber==null){
            pageNumber='1';
        }
        Integer ps = Integer.valueOf(pageSize);
        Integer pn = Integer.valueOf(pageNumber)-1;
        soql += ' limit '+ps+' OFFSET '+(ps*pn);
         system.debug('### Complete SOQL : '+soql);
        List<WhatsApp__c> accList= Database.Query(soql);
        if(accList != null && accList.size()>0){
		return accList;
        }
        else{return null;}
    }
     @AuraEnabled
    public static Integer getChatsCount(){
        String soqlStr = 'Select COUNT() From WhatsApp__c';
        Integer recCount= database.countQuery(soqlStr);
        return recCount;
    }
}



Checkout the vlog also !


If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding