function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Paul BachmannPaul 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"/>&nbsp;&nbsp;&nbsp;
   <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; 
 }

}
 
Best Answer chosen by Paul Bachmann
ManjunathManjunath
Hi Paul,

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

ManjunathManjunath
Hi Paul,

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 
 
This was selected as the best answer
Paul BachmannPaul Bachmann
How would I write that (Then in your extension "ApexPages.StandardController" parameterised constructor has to be added. This will give you option to select it in the Page layout) into the Controller, I cannot get it work?
Thanks!
ManjunathManjunath
Hi Paul,

 I meant change your apex class to accomadate the standardcontroller attribute and make the controller as extension.

Here is the example.

User-added image

Then you can see in the Page layout.As this

User-added image
 
Regards,
Manjunath C S.


 
Paul BachmannPaul Bachmann
So is this extension seperate from the controller or is it part of the controller?  My controller looks like this (see current controller code) and thinking I need to change line 1-2 to 

public with sharing class CapturePSignatureController {

public CapturePSidnature Controller {ApexPages.StandardController} {
 
????  Thanks!

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; 
 }

}