Lightning Forms – Creating Actions – Form Load Actions

In this video, we build Action Buttons within the Edit form of a SharePoint List using Lightning Forms. We create an Approval Button, along with a review of two other buttons for Generating a Document and Sending the document to an external email.

In this video, we build Form Load Actions that generate a Signature Pad on the Edit Form of your SharePoint List Form. As well as 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

In this video, documentation, we will explore how to create a signature pad within your SharePoint list forms which allows for users to sign their forms. In the below example, you can see the signature pad in use on the EditForm of our Purchase Order Solution. This is a great example of using a Form Load Action along with the ExecuteScript custom action.

In order to create the signature pad solution, please follow the below steps:

  1. 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.

Copy the code from here:
<p class="ms-Label sb-field-label">Sign here</p>

<div id="sigpad">&nbsp;</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:
var url = "";
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 = 
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:
Copy the code from below:

6. Modify your Save Button Command Bar Action to include an Execute Script Action to Save the signature to the Signatures document library:

Copy the code for the Execute Script Action from below:
var canvas = document.querySelector("canvas");
var BASE64_MARKER = ';base64,';
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) {
this.files = ctx.get_web().getFolderByServerRelativeUrl(serverRelativeUrl).get_files();
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.

Leave a comment