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)
