Apex Code Development You need to sign in to do that
Don't have an account?
udayar_jayam Issues on capture multiple signature in single page
We tried to integrate the multiple signature to VF page, but we have some issue when we scroll the page for signature, the signature part not working properly. Can anyone please help me out in this?
<apex:page standardController="Lead" extensions="CustomerSignuporm" title="Customer Signup Form" sidebar="{!enableSFStd}" showHeader="{!enableSFStd}" standardStylesheets="{!enableSFStd}" renderas="{!rendermode}" applyHtmlTag="{!enableSFStd}">
<style type="text/css">
@page { size: 8.27in 11.69in; /* A4 width and height */ };
</style>
<apex:stylesheet value="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<apex:includeScript value="//code.jquery.com/jquery-2.1.1.min.js" />
<apex:includeScript value="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js" />
<script>var $j = jQuery.noConflict();</script>
<apex:form >
<apex:pageMessages />
<apex:pageBlock rendered="{!NOT(enableSFStd)}">
<div style="width:100%;" >
<div style="width:80%; margin:auto; border: 0px solid red">
<div id="header" style="height:30px;border: 0px solid blue">
<span>
</span>
</div>
<div id="body" >
<div id="personaldetailsection">
<!-- <div style="height:30px;border: 0px solid blue ;">
<span style="float:right"><b>PERSONAL DETAILS</b></span>
</div>-->
<div>
<div>
<div style="height:30px; border: 0px solid blue;">
<span>Applicant Signature</span>
</div>
<div style="height:30px; border: 0px solid blue;">
<span>Applicant Signature</span>
</div>
<div style="height:30px; border: 0px solid blue;">
<span>Applicant Signature</span>
</div>
<div style="height:30px; border: 0px solid blue;">
<span>Applicant Signature</span>
</div><div style="height:300px; border: 0px solid blue;">
<span>Applicant Signature</span>
</div>
<!---------------Signature Section Starts ---------->
<div style="padding-bottom: 10px; border: 0px solid blue;position:absolute;">
<div id="signatureCaptureHome" style="margin:0px 0 0 20px; " >
<div id="content">
<apex:outputPanel rendered="{!signId == null}">
<canvas class="canvasElement" id="signatureCanvas" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas1" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas2" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas3" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas4" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas5" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas6" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas7" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas8" width="285" height="85" style= "border:2px solid #000" />
<canvas class="canvasElement" id="signatureCanvas9" width="285" height="85" style= "border:2px solid #000" />
</apex:outputPanel>
<apex:image id="image" url="/servlet/servlet.FileDownload?file={!signId}" rendered="{!signId != null}"/>
</div>
</div>
</div>
<!---------------Signature Section Ends ---------->
<div>
<div style="margin-left: auto; margin-right: auto; width: 200px;">
<input id="saveSigButton" type="button" name="SigCap" onclick="CaptureSignature();" value="Submit Application" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
<apex:actionFunction action="{!savePDF}" name="savePDF"/>
</apex:pageBlock>
</apex:form>
<apex:includeScript value="/soap/ajax/28.0/connection.js"/>
<script type="text/javascript">
sforce.connection.sessionId = "{!$Api.Session_Id}";
var isDrawing = false;
var accountId = '';
function DrawingUtil(canvas)
{
console.log("Inside DrawingUtil"+canvas);
isDrawing = false;
canvas.addEventListener("mousedown",start,false);
canvas.addEventListener("mousemove",draw,false);
canvas.addEventListener("mouseup",stop,false);
canvas.addEventListener("touchstart",start,false);
canvas.addEventListener("touchmove",draw,false);
canvas.addEventListener("touchend",stop,false);
}
//Start Event for Signature Capture on HTML5 Canvas
function start(event)
{
event.preventDefault();
console.log("Inside Start Event");
isDrawing = true;
canvas = document.getElementById(this.id);
context = canvas.getContext("2d");
context.strokeStyle = "rgb(155,0,0,0.5)";
context.beginPath();
context.moveTo(event.pageX - canvas.getBoundingClientRect().left,event.pageY - canvas.getBoundingClientRect().top);
//context.moveTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
}
//Event while someone is drawing to Capture the path while they draw....
function draw(event) {
event.preventDefault();
console.log("Inside draw Event");
event.preventDefault();
if(isDrawing) {
//context.lineTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
context.lineTo(event.pageX - canvas.getBoundingClientRect().left,event.pageY - canvas.getBoundingClientRect().top);
context.stroke();
}
}
//Event when someone stops drawing their signature line
function stop(event) {
event.preventDefault();
console.log("Inside stop Event");
if(isDrawing) {
context.stroke();
context.closePath();
isDrawing = false;
}
}
console.log("signatureCanvas");
console.log(document.getElementById("signatureCanvas"));
var canvasCollection = [];
var canvas = [];
var context = [];
var drawingUtil = [];
canvasCollection = getElementsByClassName('canvasElement');
var canvasLength = canvasCollection.length;
for(var j=0;j<canvasLength;j++) {
canvas[j] = document.getElementById(canvasCollection[j].id);
context[j] = canvas[j].getContext("2d");
context[j].strokeStyle = "#4105F4";
drawingUtil[j] = new DrawingUtil(canvas[j]);
}
function CaptureSignature()
{
var canvasNames = [];
canvasNames = getElementsByClassName('canvasElement');
var length = canvasNames.length;
for(var j=0;j<length ;j++) {
var canvas = document.getElementById(canvasNames[j].id);
var strDataURI = canvas.toDataURL();
strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
CustomerSignuporm.Signature(strDataURI,'{!Lead.Id}',canvasNames[j].id,processResult);
}
}
function processResult(result)
{
savePDF();
}
</script>
</apex:page>
global with Sharing Class CustomerSignupform
{
public String rendermode { get; set; }
public String recordId { get; set; }
public String signId;
public Boolean enableSFStd { get; set; }
private Lead currentLead = new Lead();
private Apexpages.StandardController controller;
//Constants
static final String SIGN_IMG_NAME = 'Sign.png';
static final String PDF_NAME = 'SignForm.pdf';
//Constructor Validate when page loads
public CustomerSignuporm(Apexpages.StandardController stdCon) {
controller = stdCon;
enableSFStd = false;
validatePage();
getLeadDetails();
}
//Validate the page whether it has Lead Id or not
//And also validate whether the signup form is already signed or not
private Boolean validatePage() {
// Check page has id parameters or not
if (Apexpages.CurrentPage().getParameters().get('id') == null || Apexpages.CurrentPage().getParameters().get('id') == '') {
ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.WARNING,'Please select an Lead.');
ApexPages.addMessage(msg);
enableSFStd = true;
return true;
}
recordId = Apexpages.CurrentPage().getParameters().get('id');
//Check it is a valid Lead or not
list<Lead> lstLead = [Select id,Name from Lead WHERE id =:recordID];
if (lstLead.size() > 0) {
currentLead = lstLead[0];
}
else {
ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.ERROR,'Customer not available');
ApexPages.addMessage(msg);
recordID = null;
enableSFStd = true;
}
//Set render mode to pdf if query string contains renderpdf
if (Apexpages.CurrentPage().getParameters().get('renderpdf') != null) {
rendermode = 'pdf';
}
return false;
}
public Void getLeadDetails()
{
Lead leaddetails = new Lead();
User Owner = new User();
recordID = ApexPages.CurrentPage().getparameters().get('id');
System.debug(recordID);
leaddetails = [SELECT id,SAP_Customer__c,OwnerId,NSL_Number__c
FROM Lead WHERE id =:recordID];
/*****for email***************/
OwnerID = leaddetails.OwnerId;
NslCustomer = leaddetails.NSL_Number__c;
Owner = [SELECT id, name, email FROM User WHERE id =:OwnerID];
email = Owner.Email;
SalesExecutive = Owner.name;
}
//Remote Action to generate Signature as Attachment
@RemoteAction
global static String Signature(String signatureBody, String parentId,String signName) {
try {
//Delete Signature if already present
deleteSignature(parentId);
//Create New attachment for the Signature
Attachment a = new Attachment();
a.ParentId = parentId;
a.Body = EncodingUtil.base64Decode(signatureBody);
a.ContentType = 'image/png';
a.Name = signName;
insert a;
}
catch(Exception e) {
system.debug('Create Signature Exception:' + e);
//return JSON.serialize(e);
}
return null;
}
//After creating signature need to create PDF file for Customer Signup
public PageReference savePDF() {
PageReference pdf = Page.CustomerSignupform;
pdf.getParameters().put('renderpdf', 'true');
Boolean pdfGenerated = false;
// create the PDF new attachment
Attachment attach = new Attachment();
Blob body;
try {
// returns the output of the page as a PDF
body = pdf.getContentAsPDF();
pdfGenerated = true;
}
catch (Exception e) {
body = Blob.valueOf('PDF generation failed');
}
attach.Body = body;
attach.Name = ''+ NslCustomer+'_'+ DateTime.Now()+'.pdf'; // add the user entered name
attach.IsPrivate = false;
attach.ParentId = recordID;// attach the pdf to the Lead
attach.ContentType='application/pdf';
list<Lead> lstLead = [Select id from Lead WHERE id =:recordID];
if (lstLead.size() > 0) {
insert attach;
// send the user to the account to view results
deleteSignature(recordID);
pdfGenerated = (pdfGenerated || Test.isRunningtest());
if (pdfGenerated) {
//Update Lead Record
currentLead = lstLead[0];
currentLead.Email_Complete__c = true;
//currentLead.Signup_Form_Complete__c = true;
update currentLead;
}
}
// send the user to the Lead to view results
return new PageReference('/'+recordID);
}
//Delete Signature from Attachment if it is present
private static void deleteSignature(String parentId) {
List<Attachment> lstAtch=[SELECT Id
FROM Attachment
WHERE Name=:SIGN_IMG_NAME
AND ParentId=:parentId
LIMIT 1000];
if(lstAtch.size()>0){
delete lstAtch;
}
}
//Returns Signature from Attachment if available
public String getSignId() {
List<Attachment> lst=[SELECT Id,Name,ParentId
FROM Attachment
WHERE Name=:SIGN_IMG_NAME
AND ParentId=:recordId];
if(lst.size()>0) {
signId=lst[0].id;
}
else {
signId=null;
}
system.debug('signId'+signId);
return signId;
}
}