Extending Nintex Mobile Signature control to desktop/browser

We can simply extend the recent release of Nintex Mobile Signature Control to work with desktop/browser. This exercise I will show how I did it combining the blog post Sign your name across my heart from Dan Stoll​ and my previous post on Embedding Signature Pad in Nintex Form.

The outcome will be a form supporting the capturing and displaying of Signature on both Nintex Mobile or Desktop form. The Signature data is save as base64 image data in a multi-line of text list column (i.e. “Signature” in this case).

Here are the steps I followed:

1. Create a custom list for the purpose. We are going to have only two columns defined, one for the Title (i.e. Single line of text), and the second for Signature (i.e. Multiple line of text – Plain Text), as shown here

2. Customize the List Form with Nintex Form, as shown below. And don’t forget to also create a layout for Nintex Mobile Phone if you going enable the Signature capture on Nintex Mobile Application.

3. We going to set the Signature control with “Client ID JavaScript Name” (i.e. to “jsignature” in my example) as shown below, this is needed as we going to call JavaScript to get the Signature Data and assign it to the Signature Multi Line of Text Form Control.

4. For the “Save” button of the form, we going to set the “Client Clicked” event to call a JavaScript to assign the Signature data to the Signature form control. Below diagram shows the Button’s setting.

5. I have taken the JavaScript from Dan Stoll​’s post Sign your name across my heart​, and modified it to work with the jSignature library as shared in my previous post Embedding Signature Pad in Nintex Form​, I have changed line 23rd to hide the signatureUI using the CSS instead, and line 38 and 39 to call the jSignature library’s Signature control to allow capturing of Signature on the if the form is edited in the desktop browser. The JavaScript function (i.e. setControlValue) is to be called by the Save button to set the Signature base64 data to the Signature (i.e. multi line of text) form control. And, don’t forget to also include the jSignature library as mentioned in my previous post Embedding Signature Pad in Nintex Form​.

NWF$(document).ready(function() {
// Strings to be translated  
var NoSignatureMessage = 'No signature';  
var AddSignatureMessage = 'To add a signature please open this form in Nintex Mobile.';  

// Find all the signature controls.  
NWF$("div.nf-filler-control[data-controlname^='Signature']").add("div.nf-filler-control[data-controlname^='signature']").each(function () {  
    // Find the container element which houses the actual UI the user sees.  
    var signatureUI = NWF$(this).find("div.nf-filler-control-inner");      
    var signatureInputo365ViewMode = NWF$(signatureUI).find("div");      
    var signatureInputo365EditMode = NWF$(signatureUI).find("textarea");  
    var signatureInputOnPremBothModes = NWF$(signatureUI).find("input[type=text]");  
    var signatureContent;  

    // Get the actual base64 value of the signature.  
    if (signatureInputOnPremBothModes.length != 0)  
        signatureContent = signatureInputOnPremBothModes.val();  
        signatureContent = signatureInputo365ViewMode.html();  

    // Hide all existing Nintex Forms UI elements.  
    signatureUI.css('visibility', 'hidden');
    // If not in edit mode then show image  
    if (signatureInputo365EditMode.length == 0 || NWF$(signatureInputOnPremBothModes).is(':disabled')) {  
        if (signatureContent != "") {  
            // Insert the signature image.  
            signatureUI.after("<img id='img' height='" + NWF$(this).height() + "' width='" + NWF$(this).width() + "'  src='data:image/png;base64," + signatureContent + "' />");  
        } else {  
            // Insert a message saying no signature.  
            signatureUI.after('<div>' + NoSignatureMessage + '</div>');
    else {  
        // Insert a message saying its not supported in browser. 
        signatureUI.after('<div id="signature"></dv>');
        var sigdata = $('#signature').jSignature();

function setControlValue(){
  var str = $('#signature').jSignature('getData');
  NWF$('#'+jsignature).val(str.substr(str.indexOf(",") + 1));

6. With that, we are all done, the form is now capable of capturing and displaying of signature on both Nintex Mobile or Desktop form.

Nintex Form – Runtime function as parameter to Javascript call for setting form controls’ value

The intention of this write up is to demonstrate how to pass runtime function – (in Nintex Form calculated value control) – to JavaScript for setting controls’ value. It also features the following techniques for extending NINTEX Form capabilities:

  • Capturing of “Change” event from multiple editable controls (i.e. single line of text control) to trigger JavaScript function call
  • Using JavaScript to set form controls’ value (i.e. based on data captured during the form filling)
  • Using userProfileLookup runtime function to retrieve Sharepoint User Profile attributes (i.e. Distinguished Name in this example)
  • Hide a calculated value control in form with CSS Style
  • Regular Expression to extract different occurrences of OU in Distinguished Name

The outcome of this exercise is shown in the diagram below, where changes made to either Title or Requester field in the form causes the calculated value (i.e. circled in RED in the diagram) to call a custom defined JavaScript function (i.e. setControlValue function in this case) and pass the form’s runtime function (i.e. userProfileLookup – returns Requester’s Distinguished Name) value as parameter of the JavaScript’s  function, setControlValue function is to set values of both OU1 and OU2 “single line of text” control as shown in the following diagram.

Here are the steps to reproduce the above described outcome:

1. Create a custom list (i.e. “Set Form Control Value” custom list in my example) with list columns as shown in following diagram

2. Using Nintex Form to customize the custom list’s form, Nintex Form designer drew the form as shown in the diagram below automatically based on the defined custom list’s columns.

3. As we are going to use JavaScript to set value for controls OU1 and OU2, with data from Title control and form runtime function, we will need to set the “Client ID javaScript Variable Name” for reference by JavaScript at the later stage. The following diagram shows how the Client ID JavaScript Variable Name is being set for “Title” control as “title” (i.e. case sensitive). We will need to repeat the same for the other two controls named – OU1 and OU2 with Client ID JavaScript Variable Name as “ou1” and “ou2” respectively.

4. Add a “Calculated Value” control to the bottom of the form as shown below

5. Edit the formula of the “Calculated Value” control – RequesterDN in my example with formula as shown in the diagram below. The runtime formula of userProfileLookup to lookup “SPS-DistinguishedName” from the Sharepoint’s User Profile of the “Requester“.

6. Define a custom JavaScript in the Form’s setting for setting values of OU1 and OU2 controls, with below JavaScript

function setControlValue(value){try {  var ou1array = value.match(/^(?:.*?OU=){0}[^,]*[,](.*?)(?=,|$)/i);  var ou2array = value.match(/^(?:.*?OU=){1}[^,]*[,](.*?)(?=,|$)/i);  NWF$('#'+ou1).val(ou1array[1]);  NWF$('#'+ou2).val(ou2array[1]);}catch(err){};return value;}

The custom JavaScript defined in the Form’s Setting window is show in the following diagram

7. As we have now defined the JavaScript function (i.e. setControlValue(value)), we’re going to make changes to the calculated value control (i.e. added in Step 4 above) to call the setControlValue and pass the userProfileLookup function as parameter to the JavaScript call. Here is how the modified Calculated Value control’s formula looks like. After that is done, you may proceed to publish the form for testing.

8. For the form testing purpose, I have to created different users with /or under different OU(s) as shown in my example in below diagram. I have created two users – “Sales Person 1” and “Sales Person 2” for testing purpose with respective Distinguished Name as below

CN=Sales Person 1,OU=Sales Office 1,OU=North Region,OU=Sales Organization,DC=crestan,DC=local

CN=Sales Person 2,OU=Sales Office 2,OU=North Region,OU=Sales Organization,DC=crestan,DC=local

9. With the form published, you may test the form by entering “Requester” field with the created user (i.e. Sales Person 1 in my example), the results are shown in following diagram with OU1 and OU2 set to the OU1 and OU2 of the Requester‘s Distinguished Name

10. Try making changes to both the Title and/or Requester field with different value, which will trigger the Calculated Value control to call the JavaScript function for resetting OU1 and OU2 value.

11. As we are using technique of Calculated Value to call get the Distinguished Name based on the Requester field value, and passed the runtime function lookup value to JavaScript function call, we would like to hide the Calculated Value control as it is not needed to the end users. One easy way of doing it is of course using the default control setting’s visible attribute to “No“, but you will then realized the control will also be totally hidden causing the desired functionality to fail. One work around is to use CSS to set the visibility to “hidden” but the control is actually available for the said purpose. In my example I have defined a CSS class as shown “.nf-form-footer

with that, we can then set the Calculated Value control’s CSS Class to defined CSS Class (i.e. .nf-form-footer in my example) as shown below. If you noticed, I have added the Title control reference in front of the formula, which causes the Calculated Value being triggered when changes made to the Title field, and causes the calling of JavaScript to set controls’ value again.

Once done, publish the form and you will get the below sample outcome when tested. (Noticed that the Calculated Value control is now hidden from users)