Check-In/out function using GEO-location integration in salesforce1

Salesforce 1

Salesforce1 is a platform developed by to enable app development and data exchange through APIs (application programming interfaces) and pre-developed code. Its design is mobile-focused, allows building third party apps over the Salesforce app accessible on mobile, tablet and wearable. It allows developers to build apps with Salesforce customer success and lightening development platforms together.

Check-in & Checkout

Google map integration with salesforce1  or Check-in/out integration allows us to keep track of check-in time, real-time location and checkout details. It shows records of check-in when reps reach an account and checkout when they finished the task and want to leave it. It is ideal for field activities to locate and track the reps to maintain the workflow when they are working on the field.

It keeps records of time, date, locations and calls detail, these all actionable insights can be managed and tracked easily. The manager also can get benefited from it as it offers transparency, they can check the live location and the progress of the work.

How does it work with the lightning component?

A lightning component is used to manage check-In and check-out functionality where it fetches the current location’s latitude and longitude value. It also enables us to draw signature and save as an image file in any object field of Salesforce.

In this lightning development process, there is a need to use two js files. To implement a signature pad you have to upload these js files as a static resource and then include both of these static resources in your Lightning Component. Both JS files are given below in this blog to download.

Resource:  Download JS

Let’s start with the lightning component:


  • Login to your Salesforce Org. and open developer console.
  • Go to File>New>Lightning Component and create a Lightning Component called checkIn/Out. Replace the following markup in the Lightning Component.
  • CheckIn/Out component:


<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader” access=”global” controller=”GElocationApex”>

    <aura:html tag=”style”>

        .cuf-content {

        padding: 0 0rem !important;


        .slds-p-around–medium {

        padding: 0rem !important;


        .slds-modal__content {

        overflow-y: hidden !important;

        height: unset !important;

        max-height: unset !important;



        .slds-modal__container {   

        margin: 0 auto;

        max-width: 40rem;

        min-width: 48rem;

        //min-width: auto;



    <aura:attribute name=”val1″ type=”String” />

     <aura:attribute name=”checkOutError” type=”Boolean” default=”false”/>

    <aura:attribute name=”IsValCheck” type=”Boolean” default=”false”/>

    <aura:attribute name=”IsCheckIn” type=”String”/>

    <aura:attribute name=”dupliCheck” type=”String”/>

    <aura:attribute name=”listaVal” type=”String” />

    <aura:handler event=”force:refreshView” action=”{!c.doinit}” />

    <ltng:require scripts=”/resource/SignaturePad,/resource/SignApp” afterScriptsLoaded=”{!c.doinit}”/> 

    <div class=”slds-col modal-header slds-modal__header”>

        <lightning:icon iconName=”custom:custom30″ alternativeText=”custom30″ />

        <h2 class=”title slds-text-heading–medium”>Check In</h2>


    <div class=”slds-col modal-body  slds-p-around_medium” style=”height: 100%; overflow-y: auto !important;background:white”>

        <div id=”startLat” style=”display:none”>



        <div id=”startLon” style=”display:none”>


        <lightning:select name=”mySelect1″ label=”Status” aura:id=”status” value=””  required=’true’ onchange=”{!c.checkStatus}”>

            <option text=”-Select-“ value=”” selected=””/>

            <option text=”Check In” value=”Check In” selected=””/>

            <option text=”Check Out” value=”Check out” selected=””/>


         <div id=”signature-pad” style=”height:10rem;”><span style =”color: var(–lwc-colorTextError,rgb(194, 57, 52));”>*</span>  signature-pad

            <canvas style=”border:1px solid rgb(221, 219, 218);border-radius:3px;width:100%;height: 69%;margin-top:10px;” id=”divsign” required=’true’></canvas>                               

            <div style=”float:right;margin-right:16px;” ><a onclick=”{!c.clear}”>Clear</a></div>



    <div class=”slds-col slds-align_absolute-center” style=”background:white”>  

        <lightning:button class=”slds-button slds-button_brand”  onclick=”{!}” label=”Guardar”/>

        <lightning:button class=”slds-button slds-button_neutral” onclick=”{!c.close}” label=”Cancelar”/>



  1.           Controller:

doinit:function(component, event, helper){

        var startPos;

        var geoSuccess = function(position) {

            startPos = position;

            document.getElementById(‘startLat’).innerHTML =startPos.coords.latitude;

            document.getElementById(‘startLon’).innerHTML = startPos.coords.longitude;





    save: function(component, event, helper){


        var isblank=helper.isCanvasBlank(document.getElementById(‘divsign’));

        var vSplit=document.getElementById(“divsign”).toDataURL().split(‘,’)[1]; 

        var IsCheckStatus = component.get(‘v.IsCheckIn’);

        var lat = document.getElementById(‘startLat’).innerHTML;

        var lng =    document.getElementById(‘startLon’).innerHTML;

        var recordId = component.get(‘v.recordId’);

        var status = component.find(‘status’).get(‘v.value’);

            var action = component.get(‘c.updateEvent’);




                              status: status,




                var state = response.getState();

                if (state === “SUCCESS”) {

                    var dismissActionPanel = $A.get(“e.force:closeQuickAction”);


                    var resultsToast = $A.get(“e.force:showToast”);


                        “title”: “”,

                        “message”: “record update sucessfully”,

                        “type”: ‘success’




                    var canvas=document.getElementById(“divsign”);

                    var ctx = canvas.getContext(“2d”);

                    var w = canvas.width;

                    var h = canvas.height;

                    ctx.clearRect(0, 0, w, h);



                }else {

                    console.log(“Failed with state: “ + state);








    close:function(component, event, helper){

        var dismissActionPanel = $A.get(“e.force:closeQuickAction”);;




    clear:function(component, event, helper){

        var canvas=document.getElementById(“divsign”);

        var ctx = canvas.getContext(“2d”);

        var w = canvas.width;

        var h = canvas.height;

        ctx.clearRect(0, 0, w, h);





  1.           Helper:

isCanvasBlank:function (canvas) {

        var blank = document.createElement(‘canvas’);

        blank.width = canvas.width;

        blank.height = canvas.height;

        return canvas.toDataURL() == blank.toDataURL();



  1.           Apex class:


    public static Event updateEvent(String eventId,String lat,String lng, String status,,String base64Data, String contentType){

        Event eventVal = [Select id,Check_Out_Time__c,latitude__c,longitude__c,outLatitude__c,outLongtitude__c,Check_In_signature_Id__c,check_In_date__c from Event where id =:eventId limit 1];

        if(status == ‘Check IN’){

            eventVal.check_In_date__c =;

            eventVal.longitude__c = lat;

            eventVal.latitude__c = lng;

            eventVal.Check_In_signature_Id__c =a.Id;


        else if(status == ‘Check out’){

            eventVal.Check_Out_Time__c =;

            eventVal.outLongtitude__c = lat;

            eventVal.outLatitude__c = lng;

            eventVal.Check_out_signature_Id__c =a.Id;


        update eventVal;

        return eventVal;


  1.           Now it’s time to create an action button and add this component over the action button. Now it’s visible in the Salesforce 1 mobile app.


Above given are the steps to follow while integrating check-in and checkout using Google maps with Salesforce 1. Get it done in accord with these steps for having a more personalized experience.

Comments: 3

Leave a comment