Form load actions are refined for pre-form and after-form load execution. Depending on the scenario, these actions are triggered prior to or after the form loads. Common Form Load actions include setting values in fields, running a script, or directing the focus to a specific tab.
The form load events include Pre-Form Load and After-Form Load:
- Pre-Form Load – Actions defined in the pre-form load will fire before the form itself is rendered. This is an ideal time to use the action builder to define variables, or to execute some custom script that is required before the form is rendered.
- After-Form Load – Actions defined in the After-Form Load run immediately after the form is rendered and the controls on the form are all visible. This is an ideal time to set the focus of the form using Redirect to Tab, or to set values within fields.
.webp)
In this video, we build Form Load Actions that generate a Signature Pad on the Edit Form of your SharePoint List Form. In addition to approving the purchase order, the purchase order can be digitally signed. This is created using a document library, custom command bar action, and form load action.
Creating a signature pad with Form Load Actions in Lightning Forms
We will explore how to create a signature pad within your SharePoint list forms that allows users to sign their forms. In the example below, you can see the signature pad used on the EditForm of our Purchase Order Solution. This is an excellent example of using a Form Load Action along with the Execute Script custom action.
In order to create the signature pad solution, please follow the below steps:
-
Add a new column of type Hyperlink with the name “Signature” to your SharePoint list.
2. Add a new document library to the site which will be used to store the captured signatures as images. Name the library “Signatures”.
3. Add a Rich Text Control to your New or Edit form and add the following content using the source editor, which will become a placeholder for the Signature Pad.
<p class="ms-Label sb-field-label">Sign here</p> <div id="sigpad"> </div>
4. Add an After-Form Load action of type “Execute Script” on the same form as the signature control.
Use the following code snippet in the Execute Script Action:
var style=".sigPad { border:1px solid black; border-radius: 5px; }"; jQuery('head').append("<style type='text/css'>"+style+"</style>"); //Source and usage: https://github.com/szimek/signature_pad#usage
var url = "https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js";
var fileName = "sigpadjs";
var moduleCache = window.module;
var defineCache = window.define;
window.module = undefined;
window.define = undefined;
window.SP.SOD.registerSod(fileName, url);
window.LoadSodByKey(fileName, null, true);
window.module = moduleCache;
window.define = defineCache; var newCanvas = jQuery('<canvas/>',{'class':'sigPad'})
.width(300)
.height(150); jQuery('#sigpad').append(newCanvas);
var canvas = document.querySelector("canvas"); var signaturePad = new SignaturePad(canvas, {
minWidth: 0.5,
maxWidth: 1.5
});
window.signaturePad = signaturePad;
5. Add a Button with Actions and name it Clear to your form allowing you to clear the signature field so that users can attempt a signature more than once.
Configure the Action button with an Execute Script Action with the following code:
signaturePad.clear();
6. Modify your Save Button Command Bar Action to include an Execute Script Action to Save the signature to the Signatures document library:
var canvas = document.querySelector("canvas");
var BASE64_MARKER = ';base64,';
SaveToFile(canvas.toDataURL(),"signature-"+[[ID]]+".png",[[@Web.ServerRelativeUrl]]+"/Signatures"); function SaveToFile(content, filename, serverRelativeUrl) {
var ctx = new SP.ClientContext.get_current();
var createInfo = new SP.FileCreationInformation();
createInfo.set_content(new SP.Base64EncodedByteArray());
var arr = convertDataURIToBinary(content);
for (var i = 0; i < arr.length; ++i) {
createInfo.get_content().append(arr[i]);
}
createInfo.set_overwrite(true);
createInfo.set_url(filename);
this.files = ctx.get_web().getFolderByServerRelativeUrl(serverRelativeUrl).get_files();
ctx.load(this.files);
this.files.add(createInfo);
ctx.executeQueryAsync(function (s, e) {
}, function (sender, args) {
alert('Error saving signature: ' + args.get_message());
});
} function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (var i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
7. Add a Update Item Action to the Save button after the Execute Script Action to save the URL of the Signature image to the Signature field that we created in step 1.
Copy the code from below:
=[[=window.location.origin]][[@Web.GetFirstValueForQuery([[@Web.ServerRelativeUrl]]+'/Signatures', '<Where><Eq><FieldRef Name="FileLeafRef" /><Value Type="Text">signature-[[ID]].png</Value></Eq></Where>', 'FileRef')]]
8. Save and close your form design and test the new signature control.