You need to sign in to do that
Don't have an account?
Paul Bachmann
Need help making some tweaks to get my e-signature to work
Hi, I have the following code and I can get the E-sig to work in preview. My issues is adjusting this code to work so I can add VF page via page layout on a Case record. It current is not showing on my available VF pages to add via page layout editor.
It's a controller issue, need to make this custom controller work with the Standard Case controller, so I can see and add (I think).
Thanks, Paul
Visualforce Page
<apex:page docType="html-5.0" controller="CapturePSignatureController" showheader="false" sidebar="false" standardStylesheets="false" id="pg">
<apex:includeScript value="/soap/ajax/28.0/connection.js"/>
<style>
.container {
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: cadetblue;
font-weight: 500;
font-size: 14px;
}
.button {
font-family: calibri;
border-radius: 8px;
background-color: rgb(51, 116, 116);
height: 36px;
color: azure;
font-size: 17px;
border-width: 0px;
width: 116px;
}
</style>
<apex:form id="pbform">
<apex:pageMessages />
<div class="container">
<h1 class="labelCol vfLabelColTextWrap ">Record Patient Signature:</h1>
<canvas id="PsignatureCanvas" height="100px" width="350px" style="border: 3px solid antiquewhite; border-radius: 8px;" ></canvas>
</div><br/>
<div style="margin-left: 41%;">
<apex:commandButton value="Save Patient Signature" onclick="savePSignature();return false;" styleClass="button"/>
<apex:commandButton value="Clear" onclick="clearSign();return false;" styleClass="button"/>
</div>
</apex:form>
<script>
var canvas;
var context;
var drawingUtil;
var isDrawing = false;
var accountId = '';
var prevX, prevY, currX, currY = 0;
var accountId;
function DrawingUtil() {
isDrawing = false;
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mousemove", draw, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mouseout", stop, false);
canvas.addEventListener("touchstart", start, false);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("touchend", stop, false);
w = canvas.width;
h = canvas.height;
}
function start(event) {
event.preventDefault();
isDrawing = true;
prevX = currX;
prevX = currY;
currX = event.clientX - canvas.offsetLeft;
currY = event.clientY - canvas.offsetTop;
context.beginPath();
context.fillStyle = "cadetblue";
context.fillRect(currX, currY, 2, 2);
context.closePath();
}
function draw(event) {
event.preventDefault();
if (isDrawing) {
prevX = currX;
prevY = currY;
currX = event.clientX - canvas.offsetLeft;
currY = event.clientY - canvas.offsetTop;
context.beginPath();
context.moveTo(prevX, prevY);
context.lineTo(currX, currY);
context.strokeStyle = "cadetblue";
context.lineWidth = "2";
context.stroke();
context.closePath();
}
}
function stop(event) {
if (isDrawing) {
context.stroke();
context.closePath();
isDrawing = false;
}
}
function clearSign() {
context.clearRect(0,0,w,h);
}
canvas = document.getElementById("PsignatureCanvas");
context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = "2";
drawingUtil = new DrawingUtil(canvas);
function savePSignature() {
var strDataURI = canvas.toDataURL();
strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
var accId = location.href.split('=')[1];
accountId = accId;
var result = CapturePSignatureController.savePSignature(strDataURI, accId, processResult);
}
function processResult(result) {
alert(JSON.stringify(result));
window.location.href = '/'+accountId;
}
</script>
</apex:page>
Controller
global with sharing class CapturePSignatureController {
@RemoteAction
global static String savePSignature(String imageUrl, String accountId) {
try {
Attachment accSign = new Attachment();
accSign.ParentID = accountId;
accSign.Body = EncodingUtil.base64Decode(imageUrl);
accSign.contentType = 'image/png';
accSign.Name = 'Patient Signature Image';
accSign.OwnerId = UserInfo.getUserId();
insert accSign;
return 'success';
}catch(Exception e){
system.debug('---------- ' + e.getMessage());
return JSON.serialize(e.getMessage());
}
return null;
}
}
It's a controller issue, need to make this custom controller work with the Standard Case controller, so I can see and add (I think).
Thanks, Paul
Visualforce Page
<apex:page docType="html-5.0" controller="CapturePSignatureController" showheader="false" sidebar="false" standardStylesheets="false" id="pg">
<apex:includeScript value="/soap/ajax/28.0/connection.js"/>
<style>
.container {
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: cadetblue;
font-weight: 500;
font-size: 14px;
}
.button {
font-family: calibri;
border-radius: 8px;
background-color: rgb(51, 116, 116);
height: 36px;
color: azure;
font-size: 17px;
border-width: 0px;
width: 116px;
}
</style>
<apex:form id="pbform">
<apex:pageMessages />
<div class="container">
<h1 class="labelCol vfLabelColTextWrap ">Record Patient Signature:</h1>
<canvas id="PsignatureCanvas" height="100px" width="350px" style="border: 3px solid antiquewhite; border-radius: 8px;" ></canvas>
</div><br/>
<div style="margin-left: 41%;">
<apex:commandButton value="Save Patient Signature" onclick="savePSignature();return false;" styleClass="button"/>
<apex:commandButton value="Clear" onclick="clearSign();return false;" styleClass="button"/>
</div>
</apex:form>
<script>
var canvas;
var context;
var drawingUtil;
var isDrawing = false;
var accountId = '';
var prevX, prevY, currX, currY = 0;
var accountId;
function DrawingUtil() {
isDrawing = false;
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mousemove", draw, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mouseout", stop, false);
canvas.addEventListener("touchstart", start, false);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("touchend", stop, false);
w = canvas.width;
h = canvas.height;
}
function start(event) {
event.preventDefault();
isDrawing = true;
prevX = currX;
prevX = currY;
currX = event.clientX - canvas.offsetLeft;
currY = event.clientY - canvas.offsetTop;
context.beginPath();
context.fillStyle = "cadetblue";
context.fillRect(currX, currY, 2, 2);
context.closePath();
}
function draw(event) {
event.preventDefault();
if (isDrawing) {
prevX = currX;
prevY = currY;
currX = event.clientX - canvas.offsetLeft;
currY = event.clientY - canvas.offsetTop;
context.beginPath();
context.moveTo(prevX, prevY);
context.lineTo(currX, currY);
context.strokeStyle = "cadetblue";
context.lineWidth = "2";
context.stroke();
context.closePath();
}
}
function stop(event) {
if (isDrawing) {
context.stroke();
context.closePath();
isDrawing = false;
}
}
function clearSign() {
context.clearRect(0,0,w,h);
}
canvas = document.getElementById("PsignatureCanvas");
context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = "2";
drawingUtil = new DrawingUtil(canvas);
function savePSignature() {
var strDataURI = canvas.toDataURL();
strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
var accId = location.href.split('=')[1];
accountId = accId;
var result = CapturePSignatureController.savePSignature(strDataURI, accId, processResult);
}
function processResult(result) {
alert(JSON.stringify(result));
window.location.href = '/'+accountId;
}
</script>
</apex:page>
Controller
global with sharing class CapturePSignatureController {
@RemoteAction
global static String savePSignature(String imageUrl, String accountId) {
try {
Attachment accSign = new Attachment();
accSign.ParentID = accountId;
accSign.Body = EncodingUtil.base64Decode(imageUrl);
accSign.contentType = 'image/png';
accSign.Name = 'Patient Signature Image';
accSign.OwnerId = UserInfo.getUserId();
insert accSign;
return 'success';
}catch(Exception e){
system.debug('---------- ' + e.getMessage());
return JSON.serialize(e.getMessage());
}
return null;
}
}
If you want to add the VF to the Page layout, you got to use standardController.
Ex: <apex:page docType="html-5.0" standardController="Case" extensions="CapturePSignatureController" showheader="false" sidebar="false" standardStylesheets="false" id="pg">
Then in your extension "ApexPages.StandardController" parameterised constructor has to be added. This will give you option to select it in the Page layout.
Regards,
Manjunath
All Answers
If you want to add the VF to the Page layout, you got to use standardController.
Ex: <apex:page docType="html-5.0" standardController="Case" extensions="CapturePSignatureController" showheader="false" sidebar="false" standardStylesheets="false" id="pg">
Then in your extension "ApexPages.StandardController" parameterised constructor has to be added. This will give you option to select it in the Page layout.
Regards,
Manjunath
Thanks!
I meant change your apex class to accomadate the standardcontroller attribute and make the controller as extension.
Here is the example.
Then you can see in the Page layout.As this
Regards,
Manjunath C S.
public with sharing class CapturePSignatureController {
public CapturePSidnature Controller {ApexPages.StandardController} {
Current Controller(thats not working for me)
global with sharing class CapturePSignatureController {
@RemoteAction
global static String savePSignature(String imageUrl, String accountId) {
try {
Attachment accSign = new Attachment();
accSign.ParentID = accountId;
accSign.Body = EncodingUtil.base64Decode(imageUrl);
accSign.contentType = 'image/png';
accSign.Name = 'Patient Signature Image';
accSign.OwnerId = UserInfo.getUserId();
insert accSign;
return 'success';
}catch(Exception e){
system.debug('---------- ' + e.getMessage());
return JSON.serialize(e.getMessage());
}
return null;
}
}