Hi Friends,

I want to save the signature in my custom field " SIGNATURE__C" in my Custom Object "Training_Rosters__c".  But with below code i got signature value in attchments. No need to attachments. I want to store this signature in my Custom field. HOw it is Possible ? Where i am change thoe code.

VF Page :

<apex:page docType="html-5.0" standardController="Training_Roster__c" extensions="SignatureExtensionController" showHeader="false" sidebar="false">

<script>var $j = jQuery.noConflict();</script>
<apex:stylesheet value="{!URLFOR($Resource.jquerymobile,'/jquerymobile/jquery.mobile-1.3.2.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery)}"  />
<apex:includeScript value="{!URLFOR($Resource.jquerymobile1,'/jquerymobile1/jquery.mobile1-1.3.2.min.js')}"/>
<div style="text-align:center;padding-top:65px;">
    <h4 style="display:block;font-weight:bold;margin-bottom:10px;font-size: 18px;">Instructor</h4>
<canvas id="signatureCanvas" width="300" height="150" style="border: 1px solid black;border-radius:4px;"/>  
    <apex:form >
    <button onclick="saveSignature()" style="padding: 9px 15px;background: aliceblue;border: 1px solid #dadada !important;margin-right: 5px;">Capture Signature</button>
     <apex:commandButton action="{!cancel}" style="padding: 9px 15px;background: aliceblue;border: 1px solid #dadada !important;" value="Exit"/>
</apex:form>
 </div>
<apex:includeScript value="/soap/ajax/28.0/connection.js"/>

<script>

sforce.connection.sessionId = "{!$Api.Session_Id}";
var canvas = document.getElementById("signatureCanvas");
var context = canvas.getContext("2d");
var mouseButton = 0;
var lastX = lastY = null;
var ehsId = '{!Training_Roster__c.Id}';

function saveSignature() {
    var image = canvas.toDataURL().split(',')[1];
    SignatureExtensionController.saveSignature(ehsId,image,handleResult);
       
}

function handleResult(result,event) {
    if(result.success) {
        window.top.location.href='/'+ehsId;
    } else {
        alert('Error: '+result.errorMessage);
    }
}

function handleEvent(event) {
    if(event.type==="mousedown"||event.type==="touchstart") {
        mouseButton = event.which || 1;
        lastX = lastY = null;
    }
    if(event.type==="touchcancel" || event.type==="touchcancel" || event.type==="mouseup") {
        mouseButton = 0;
        lastX = lastY = null;
    }
    if((event.type==="touchmove" || event.type==="mousemove") && mouseButton) {
        var newX, newY;
        var canvasX = 0, canvasY = 0, obj = event.srcElement || event.target;
        do {
            canvasX += obj.offsetLeft;
            canvasY += obj.offsetTop;
        } while(obj = obj.offsetParent);
        if(event.targetTouches && event.targetTouches.length) {
            newX = event.targetTouches[0].clientX - (canvasX/2);
            newY = event.targetTouches[0].clientY - (canvasY/2);
        } else {
            newX = event.offsetX;
            newY = event.offsetY;
        }
        if(!lastX && !lastY) {
            lastX = newX;
            lastY = newY;
            context.beginPath();
            context.moveTo(lastX,lastY);
            context.lineTo(lastX,lastY,lastX,lastY);
            context.stroke();
        } else {
            context.beginPath();
            context.moveTo(lastX,lastY);
            context.lineTo(newX,newY);
            context.stroke();
            lastX = newX;
            lastY = newY;
        }
    }
    if(event.type=="touchmove" || event.type==="mousedrag" || (event.type==="selectstart" && (event.srcElement||event.target)===canvas)) {
        event.returnValue=false;
        event.stopPropagation();
        event.preventDefault();
        return false;
    }
}

canvas.addEventListener("mousedrag",handleEvent,true);
canvas.addEventListener("mousemove",handleEvent,true);
canvas.addEventListener("mousedown",handleEvent,true);
window.addEventListener("mouseup",handleEvent,true);
canvas.addEventListener("touchstart",handleEvent,true);
canvas.addEventListener("touchmove",handleEvent,true);
window.addEventListener("touchend",handleEvent,true);
window.addEventListener("selectstart",handleEvent,true);

</script>
</apex:page>

Apex  Code:

public with sharing class SignatureExtensionController {

private final Training_Roster__c ehs;

public SignatureExtensionController(ApexPages.StandardController controller) {
    ehs = (Training_Roster__c)controller.getRecord();
}

@RemoteAction public static RemoteSaveResult saveSignature(Id ehsId, String signatureBody) {
    Attachment a = new Attachment(ParentId=ehsId, name='Signature.png', ContentType='image/png', Body=EncodingUtil.base64Decode(signatureBody));
    Database.saveResult result = Database.insert(a,false);
    RemoteSaveResult newResult = new RemoteSaveResult();
    newResult.success = result.isSuccess();
    newResult.attachmentId = a.Id;
    newResult.errorMessage = result.isSuccess()?'':result.getErrors()[0].getMessage();
    return newResult;
}

public class RemoteSaveResult {
    public Boolean success;
    public Id attachmentId;
    public String errorMessage;
}

public pageReference cancel(){
    pageReference page = new PageReference('/'+ehs.id);
    page.setRedirect(true);
    return page;
}
}

I'm having trouble with one of the trailhead modules, Lightning Components Basics Input Data Using Forms https://developer.salesforce.com/trailhead/lex_dev_lc_basics/lex_dev_lc_basics_forms. 

In a previous module I set up the SLDS static resource and now in this module I'm asked to acess it and I'm not getting the custom styling that is supposed to be implimented. I copy-pasted the code exactly as it is shown in the module and only changed the name of the static resource.

expensesApp.app

<aura:application>
 
    <!-- Include the SLDS static resource (adjust to match package version) -->
    <ltng:require styles="{!$Resource.SLDS201 +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
 
    <!-- Add the "scoping" element to activate SLDS on components
         that we add inside it. -->
    <div class="slds">
       
        <!-- This component is the real "app" -->
        <c:expenses/>
       
    </div>
    <!-- / SLDS SCOPING DIV -->
 
</aura:application>

expenses.cmp

<aura:component>

    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Expenses</p>
          <h1 class="slds-text-heading--medium">My Expenses</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">


        <!-- [[ expense form goes here ]] -->


    </div>
    <!-- / NEW EXPENSE FORM -->

</aura:component>

I've tried uninstalling and re-uploading the resource as well as changing the filepath but I can't seem to figure out how to acces this file.
Any help would be really appreciated.