Add Your Own Fields to the Calendar: Using Lightning Modal Boxes in Salesforce

//edit this record in its native modal

//scope variables
var modStamp;
var i=0;
var killRecursion = false;

//retrieve our canvas client object for authentication using fbk object
var client = fbk.client();

//publish canvas event to visualforce page to open modal for this event.
Sfdc.canvas.client.publish( client ,
    {name : 'dbk.editRecord',
    payload : {recordId : '[[Id]]'}
    }
);

//begin polling our event object for changes
ping();

//add a mouseover event listener to the document so we can quickly detect if we've left our modal
//this is how we detect the user has returned to DayBack after a cancel
//add this listener on a timeout, so it's not accidentally triggered before the modal opens
setTimeout ( function(){document.addEventListener('mouseover', modalCancelled);},2000);

//called functions

function modalCancelled() {
    //this listener should only fire once, so remove it now
    document.removeEventListener('mouseover', modalCancelled);
    //set this variable on a delay so we don't outrun our ping function
    setTimeout(function(){killRecursion = true;},1100);
}

function ping(){
    //retrieve our canvas context object for REST links/urls using fbk object
    var context = fbk.context();

    //Query this event's mod timestamp to see if the event has been aupdated/saved in SF.
    var select = 'SELECT+Id,LastModifiedDate+FROM+' + event.schedule.objectName + '+WHERE+Id=\'[[Id]]\'';

    //GET url to poll our record
    var url = context.links.queryUrl + '?q=' + select;

    //settings for our canvas GET call to salesforce
    var settings = {};
    settings.client = client;
    settings.contentType = 'application/json';
    settings.success = pingCallback;

    //call to Salesforce
    Sfdc.canvas.client.ajax ( url , settings );

    function pingCallback(data){
        if(data.status===200){
        //success
        if(!modStamp){
            //first run, get the current last modified
            modStamp = data.payload.records[0].LastModifiedDate;
        }
        else if(modStamp!==data.payload.records[0].LastModifiedDate) {
            //close the DayBack popover
            $rootScope.$broadcast('closePopovers');
            //event has been modified or our dom has been mousedover.
            //refresh calendar, slight timeout for modal to close
            var element = $('.calendar');
            setTimeout(function(){element.fullCalendar('refetchEvents');},400);
            return;
        }
        else if(killRecursion || i>200){
        //our dom has been moused over, so they've cancelled
        //also a timeout (5 minutes?), kill recursion
        return;
        }
        i++;
        //call recursively, with slight delay
        setTimeout(ping,1000);
        }
        else{
        //salesforce rest error
        alert ( data.payload[0].errorCode );
        }
    }
}

//create a new record and bring up its modal box

//create POST request from values captured from our click.
//Edit properties here to match your target object fields
//IsAllDayEvent, StartDateTime, OwnerId, and DurationInMinutes are for the standard Event object, replace them accordingly
var request = {};
request.IsAllDayEvent = event.allDay;
request.StartDateTime = event.allDay ? event.start.format('YYYY-MM-DD') : event.start.format() ;
if(!event.allDay) {
 request.DurationInMinutes = 60;
}
//specify resource. this example is using Assigned To as the resource, so a SOQL query
//is required to get the id for the actual resourceId and then the request will be transformed.
//Depending on your object and resource the SOQL may not be required.
if(event.resource[0] && event.resource[0]!=='none'){
  request.OwnerId = event.resource[0];
}

//resource object info
var resourceObject = 'User';
var resourceNameField = 'Name';

//--------------You shouldn't need to edit below this line------------------

//scope variables
var id;
var modStamp;
var i=0;
var killRecursion = false;

//retrieve our canvas client object for authentication using fbk object
var client = fbk.client();

//retrieve our canvas context object for REST links/urls using fbk object
var context = fbk.context();

if(request.OwnerId && request.OwnerId!=='none') {
  //attempting to edit the owner. Need to SOQL for the id based on the name.
  getResourceId(request.OwnerId);
}
else{
  //resource not specified, go right to creation
  if(request.OwnerId){
      delete request.OwnerId;
  }
  createEvent();
}

function getResourceId(name){

  //retrieve the query URL from context
  var url = context.links.queryUrl;

  //encode name for passing as URI component
  name = encodeURIComponent(name);

  //create SOQL statement
  var soql = 'SELECT+ID+FROM+' + resourceObject + '+WHERE+' + resourceNameField + '=\'' + name + '\'';

  //final URL for GET
  var finalUrl = url + '?q=' + soql;

  //additional settings for our GET
  var settings = {};
  settings.client = client;
  settings.contentType = 'application/json';
  settings.success = createEvent;
  settings.method = 'GET';

  //call to Salesforce
  Sfdc.canvas.client.ajax ( finalUrl , settings );
}

function createEvent(data){
  if(data){
    if(data.status===200 && data.payload.records && data.payload.records[0]){
      request.OwnerId = data.payload.records[0].Id;
    }
    else{
      alert( data.payload.errors[0].message );
      return;
    }
  }
  //additional settings for our POST
  var settings = {};
  settings.client = client;
  settings.contentType = 'application/json';
  settings.success = eventCallback;
  settings.method = 'POST';
  settings.data = JSON.stringify(request);

  var url = context.links.sobjectUrl + event.schedule.objectName;

  //call to Salesforce
  Sfdc.canvas.client.ajax ( url , settings );
}

function eventCallback(data) {
    if(data.status===201) {
        //POST successful, retrieve the id of our new Event
        id = data.payload.id.substring(0,15);
        //publish canvas event to visualforce page to open modal for this event.
        Sfdc.canvas.client.publish( client ,
            {name : 'dbk.editRecord',
            payload : {recordId : id}
        });

        //begin polling our event object for changes
        ping();

        //add a mouseover event listener to the document so we can quickly detect if we've left our modal
        //this is how we detect the user has returned to DayBack after a cancel
        //add this listener on a timeout, so it's not accidentally triggered before the modal opens
        setTimeout ( function(){document.addEventListener('mouseover', modalCancelled);},2000);
    }
    else {
        //POST Unsuccessful, throw an error
        alert ( data.payload.errors[0].message);
    }
}




function modalCancelled() {
    //this listener should only fire once, so remove it now
    document.removeEventListener('mouseover', modalCancelled);
    //set this variable on a delay so we don't outrun our ping function
    setTimeout(function(){killRecursion = true;},1100);
}

function ping(){
    //Query this event's mod timestamp to see if the event has been aupdated/saved in SF.
    //These are universal fields and should work on all sf objects
    var select = 'SELECT+Id,LastModifiedDate+FROM+' + event.schedule.objectName + '+WHERE+Id=\'' + id + '\'';

    //GET url to poll our record
    var url = context.links.queryUrl + '?q=' + select;

    //settings for our canvas GET call to salesforce
    var settings = {};
    settings.client = client;
    settings.contentType = 'application/json';
    settings.success = pingCallback;

    //call to Salesforce
    Sfdc.canvas.client.ajax ( url , settings );

    function pingCallback(data){
        if(data.status===200){
        //success
        if(!modStamp){
            //first run, get the current last modified
            modStamp = data.payload.records[0].LastModifiedDate;
        }
        else if(modStamp!==data.payload.records[0].LastModifiedDate) {
            //event has been modified or our dom has been mousedover.
            //refresh calendar, slight timeout for modal to close
            var element = $('.calendar');
            setTimeout(function(){element.fullCalendar('refetchEvents');},400);
            return;
        }
        else if(killRecursion || i>200){
          //our dom has been moused over, so they've cancelled
          //also a timeout (5 minutes?), kill recursion
          //delete this event
          deleteRecord(id);
          return;
        }
        i++;
        //call recursively, with slight delay
        setTimeout(ping,1000);
        }
        else{
          //throw salesforce rest error
          alert ( data.payload[0].errorCode );
        }
    }
}

function deleteRecord(id) {
    //settings for our delete
    var settings = {};
    settings.client = client;
    settings.contentType = 'application/json';
    settings.success = deleteCallback;
    settings.method = 'DELETE';
    var url = context.links.sobjectUrl + event.schedule.objectName + '/' + id + '/';
    //call to Salesforce
    Sfdc.canvas.client.ajax ( url , settings );
    function deleteCallback(data) {
        if(data.status!==204) {
            console.log(data);
        }
    }
}