Share Content On WhatsApp Using Lightning

WhatsApp is one of the most popular messaging apps, with one-third of world’s population is using Whatsapp on their smartphones. That is why I thought to implement a functionality by which user can share content on WhatsApp. I implemented this with Salesforce1 Lightning.

I got this idea from Query Rain .

In this demo I am showing you user’s feeds with WhatsApp Share button. When you click on this button it will ask you to share your specific feed with any contact in your mobile device. When complete it will look like this:

Here is the complete code let’s walk through it :

FeedItemController.apxc

public class FeedItemController{
    @AuraEnabled
    public static List getFeedItems(){
        return [SELECT Body FROM FeedItem WHERE InsertedById =: UserInfo.getUserId() ORDER BY CreatedDate DESC LIMIT 10 ];
    }
}

In this controller I have created a method getFeedItems() to return feeds of current logged in user.

WhatsAppLightningComponent.cmp

<aura:component controller="bklightning.FeedItemController" implements="force:appHostable">

    <ltng:require styles="/resource/whatsappfiles/whatsappfiles/bootstrap,
				/resource/whatsappfiles/whatsappfiles/whatsappbutton.css"
                  scripts="/resource/whatsappfiles/whatsappfiles/jquerymin.js" 
                  afterScriptsLoaded="{!c.afterLoaded}"></ltng:require>

    <aura:attribute name="feeds" type="FeedItem[]" />

    <div class="page-header page-header-anchor">
    	<h1>Share Your Feeds</h1>
    </div>
    <div id="msg" style="display:none;color:red">
    	Please share this article in mobile device
    </div>   
    <aura:iteration items="{!v.feeds}" var="feed">
        <div class="card">
          	<div class="card-heading">
            	{!feed.Body}
          	</div>
          	<div class="card-detail">
            	<a data-text="{!feed.Body}" class="whatsapp w3_whatsapp_btn w3_whatsapp_btn_large">Share</a>
        	</div>
        </div>
    </aura:iteration>
</aura:component>

Resources for this Lightning Component could be found here jQuery , Bootstrap.

WhatsAppLightningComponentController.js

({
    afterLoaded : function(component, event, helper) {
        helper.loadFeeds(component);
    }
})

WhatsAppLightningComponentRenderer.js

({
    rerender : function(cmp, helper){
    	this.superRerender();
    	helper.whatsAppJS(cmp);
    }
})

In “WhatsAppLightningComponentRenderer.js” I am calling whatsAppJS() method of Helper.I am doing this to initialize jQuery variables and click events after files and records get loaded.This Renderer will override default rendering of “WhatsAppLightningComponent.cmp” component.

WhatsAppLightningComponentHelper.js

({
	loadFeeds : function(component) {
		var action = component.get("c.getFeedItems");
        action.setCallback(this, function(a) {
            component.set("v.feeds", a.getReturnValue());
        });
        $A.enqueueAction(action);
	},

    whatsAppJS : function(component){
        var isMobile = {
            Android: function() {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function() {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function() {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function() {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function() {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function() {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };

        jQuery('.whatsapp').click(function(){
            if( isMobile.any() ) {
 				var text = jQuery(this).attr("data-text");
                var message = encodeURIComponent(text);
                var whatsapp_url = "whatsapp://send?text=" + message;
                window.location.href = whatsapp_url;
            } else {
                jQuery('#msg').show();
            }
        })
    }
})

In WhatsAppLightningComponentHelper.js whatsAppJs() method is used to share content on Your WhatsApp. It can support any mobile device but we know that Lightning app is not supporting Android and other devices so it will not work for them. I did not change code because I hope Lightning will support other Mobile Devices in future.

Please change Namespace to your Namespace before running this code.Thanks.

About The Author

Hi my name is Balkishan Kachawa.I am a Force.com Certified Developer working as Salesforce Technical Consultant.
I have 4+ years of experience in Force.com implementations.I am experienced in various technologies like PHP,JAVA,J2EE,jQuery,Angular.Js,BootStrap.I had worked on various APIs(like Google,Yahoo,Drop Box and Many others) with Force.com.

Follow me here:

Facebook

Published
July 21, 2015
Topics:

Leave your comments...

Share Content On WhatsApp Using Lightning