Skip navigation
All Places > Getting Started > Blog > 2015 > May
2015

Products: Nintex Forms 2013, Nintex Forms 2010

 

There have been several requests recently for the ability to have custom validation in Nintex Forms using JavaScript and/or how to submit a form via JavaScript. Here you will find an example of how to accomplish this.

 

Here is a sample JavaScript that can be inserted into 'Custom JavaScript' in your form settings:

 

customjs.png

 

 

 

JavaScript
  1. //Sets fields in parameter to have a red background.
  2. function showInvalidFields(fields){ 
  3.   
  4.         for (var i = 0; i < fields.length; i++) {
  5.       
  6.         fields[i].css('background-color', 'red !important');    }
  7.   
  8. }
  9. //Sets fields in parameter to have a white background.
  10. function resetInvalidFields(fields){ 
  11.   
  12.         for (var i = 0; i < fields.length; i++) {
  13.       
  14.         fields[i].css('background-color', 'white !important');    }
  15.   
  16. }
  17. //Pass Client ID configured in Control to this function.
  18. function validateBlankField(nfclientid){
  19.   
  20. if(!NWF$('#' + nfclientid).val().match(/./)) return false;
  21.   
  22.     return true;
  23.   
  24. }
  25. //Pass label of out of the box 'Save and Submit' button as parameter.
  26. function submitForm(buttonName){
  27.   
  28.     var validated = true;
  29.     var invalidFields = [];
  30.     var validFields = [];
  31.   
  32.     //Validating the field 'mytextbox'.
  33.     if (!validateBlankField(mytextbox)){
  34.         validated = false;
  35.         invalidFields.push(NWF$('#' + mytextbox));
  36.     }
  37.   
  38.     else{
  39.         validFields.push(NWF$('#' + mytextbox));
  40.     }
  41.     //If form passes validation, submit.
  42.     if(validated){
  43.         resetInvalidFields(validFields);
  44.         NWF$(".nf-disableonsubmit[value="+buttonName+"]").click();
  45.     }
  46.   
  47.     //If form fails validation, show invalid fields and prompt.
  48.     else{
  49.          resetInvalidFields(validFields);
  50.          showInvalidFields(invalidFields);
  51.       
  52.         alert('The form is invalid, please correct the highlighted fields, and submit again');       
  53.     }
  54. }

 

Example script Usage:

 

Add a Textbox and give it a Client ID  of 'mytextbox'.

 

Add a button and set its action to 'Save and Submit'. Set its label to 'mysubmitbutton'.

 

Add another button and set its action to 'JavaScript'. Set its label to 'Submit' and its 'Client Click' setting to 'submitForm('mysubmitbutton');'.

 

Place the 'Submit' button over the 'mysubmitbutton' so that the 'mysubmitbutton' is hidden.

 

 

Preview the form and try to submit the form with 'mytextbox' blank. You should get an alert indicating a field should be corrected and it will be highlighted.

 

 

Note: This solution is fully compatible with the built in Validation system in Nintex Forms however, this validation will occur prior to the form being evaluated by the built in Forms Validation.

With the latest release of Nintex Mobile Apps (April 2015), you can now edit any images you attach to a form. You're able to do this on Android, iOS and Windows Phone.

 

I took a picture with my device within the Mobile App, and then clicked on the image (See here on How to attach pictures or videos to a form in the Nintex Mobile App).

 

Here's my kangaroo, but he has a droopy ear which needs fixing.

edit_roo.png

Click on Edit in the top right hand corner.This will open the Photo Editor where you have options to add text, draw, orientation, crop, blur, and adjust lighting, color and sharpness.

 

I added a little greeting from this guy using the Text option, but since want I really want to do is highlight his slightly droopy ear, I can use the Draw feature to do that. All I need to do is select the paint color and thickness. Once I'm done, select Apply, and then Done.

draw_roo.pngdone_roo.png

 

The annotated image now appears in the attachments section of the form. Once you've completed the form, you can submit it.

mobile_app.png

Hello All,

We may or may not have come across a situation where creating Event receiver is not feasible on delete item event. This is a hack on the functionality where you can start a workflow when item is deleted. This involves creating a delete item workflow and adding that as a quick action menu item. So here is how to do it:

  1. Create a custom list.
  2. Configure permissions on the list so that users will not have the ability to delete the items. For this, I create a new permission leavel as "Contribute - No Delete". Once this is completed, users will not see the option to delete items within this list.
  3. Blog1.jpg
  4. Next, we want to create a workflow that we want to start when item is deleted. Click on List tab, Create a workflow in Nintex workflow.
  5. Open workflow settings.
    • Enter Title
    • Select the option - "Enable workflow to start from the item menu".
    • Menu Item label would be "Delete Item". Menu item image URL-"_layouts/images/delete.gif"
    • Menu Item Position - 0. For other positions on the quick menu, see the list at the
    • Save the settings
  6. Blog1.jpg
  7. Now lets create few actions in the workflow. In this workflow i'm going to send email to the person who created the item that the item has been deleted by workflow initiator. Next action would be to delete the item. This action has to be run as Workflow Owner because users do not have permissions to perform delete operation.
  8. Blog1.jpg
  9. Thats it. Publish the workflow and create item in your list. Use menu item to delete it and you should receive an email.

Blog1.jpg

Extras:

List of Quick launch menu positions:

0 – Top Position

200 – Second position

255 – Third position

898 – Fourth position

900 – Fifth position

1000 – Sixth position

1050 – Seventh position

1100 – Eighth position

1175 – Ninth position

2000 – Last position

 

As an additional step, i also customized the Start workflow page as below.

Blog1.jpg

Hope its usefull.

With the latest release of Nintex Mobile Apps (April 2015) barcode scanning is now available.

 

  1. To enable barcode scanning in your mobile form, you'll need to use the Single line of textbox control.
  2. In the Enable barcode scanning field, select Yes.
  3. Open your form in the Nintex Mobile App, and tap the barcode icon to activate the camera function.
  4. Scan

 

You'll find the supported barcode formats here.

 

The blog post Nintex Mobile: Showing off it's Assets gives some more info.

Products: Nintex Workflow 2013, Nintex Workflow 2010

 

This week a request came in for a way to activate Web Applications via PowerShell, below you will find a script that does exactly that. Each section of the Web Application sequence is segmented off into separate functions which are wrapped in try/catch blocks for ease of troubleshooting.

 

 

PowerShell Script
  1. Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue
  2. [void][System.Reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint")
  3. [void][System.Reflection.Assembly]::LoadWithPartialName("Nintex.Workflow")
  4. [void][System.Reflection.Assembly]::LoadWithPartialName("Nintex.Workflow.Administration")
  5. $ErrorOccurred = $false
  6. function Activate-WebApplications(){
  7. $Host.UI.WriteLine('Activating Web Applications.')
  8. foreach ($WebApplication in [Microsoft.SharePoint.Administration.SPWebService]::ContentService.WebApplications){
  9. if ($WebApplication.IsAdministrationWebApplication -ne $true){
  10. Install-AuthorisedWorkflowTypes($WebApplication)
  11. Add-DatabasePermissions($WebApplication)
  12. Install-CustomActivities($WebApplication)
  13. Register-NintexWorkflowInstanceService($WebApplication)
  14. Register-NintexWorkflowVariablesService($WebApplication)
  15. }
  16. }
  17. if($ErrorOccurred){
  18. $Host.UI.WriteWarningLine('An error was encountered during activation sequence. Please review any errors and make necessary corrections.')
  19. }
  20. else{
  21. $Host.UI.WriteLine('Web Applications Activated.')
  22. }
  23. }
  24. function Install-AuthorisedWorkflowTypes($WebApplication){
  25. try{
  26. $Host.UI.WriteLine('Installing Authorized Workflow Types.')
  27. [Nintex.Workflow.Administration.AuthorisedTypes]::InstallAuthorizedWorkflowTypes($WebApplication)
  28. $Host.UI.WriteLine('Authorized Workflow Types Installed.')
  29. }
  30. catch{
  31. $Host.UI.WriteErrorLine($_.Exception.Message)
  32. $ErrorOccurred = $true
  33. }
  34. }
  35. function Add-DatabasePermissions($WebApplication){
  36. try{
  37. $Host.UI.WriteLine('Adding Application Pool Account to Database Permissions.')
  38. [Nintex.Workflow.Administration.DatabaseAccess]::AddUser($WebApplication.ApplicationPool.Username)
  39. $Host.UI.WriteLine('Permissions Added.')
  40. }
  41. catch{
  42. $Host.UI.WriteErrorLine($_.Exception.Message)
  43. $ErrorOccurred = $true
  44. }
  45. }
  46. function Install-CustomActivities($WebApplication){
  47. try{
  48. foreach ($Activity in [Nintex.Workflow.ActivityReferenceCollection]::GetCustomActivities()){
  49. try{
  50. $TypeName = [String]::Empty
  51. $NamespaceName = [String]::Empty
  52. [Nintex.Workflow.Common.Utility]::ExtractNamespaceAndClassName($Activity.ActivityType, [ref]$TypeName, [ref]$NamespaceName)
  53. [Nintex.Workflow.Administration.AuthorisedTypes]::InstallAuthorizedWorkflowTypes($WebApplication, $Activity.ActivityAssembly, $NamespaceName,$TypeName);
  54. }
  55. catch{
  56. $Host.UI.WriteErrorLine($_.Exception.Message)
  57. $ErrorOccurred = $true
  58. }
  59. }
  60. }
  61. catch{
  62. $Host.UI.WriteErrorLine($_.Exception.Message)
  63. $ErrorOccurred = $true
  64. }
  65. }
  66. function Register-NintexWorkflowInstanceService($WebApplication){
  67. try{
  68. $Host.UI.WriteLine('Registering Nintex Workflow Service.')
  69. [Nintex.Workflow.Administration.AuthorisedTypes]::RegisterWorkflowService($WebApplication,$([Nintex.Workflow.Activities.Services.WorkflowInstanceService]).UnderlyingSystemType);
  70. $Host.UI.WriteLine('Workflow Nintex Service Registered.')
  71. }
  72. catch{
  73. $Host.UI.WriteErrorLine($_.Exception.Message)
  74. $ErrorOccurred = $true
  75. }
  76. }
  77. function Register-NintexWorkflowVariablesService($WebApplication){
  78. try{
  79. $Host.UI.WriteLine('Registering Nintex Workflow Variables Service.')
  80. [Nintex.Workflow.Administration.AuthorisedTypes]::RegisterWorkflowService($WebApplication,$([Nintex.Workflow.Activities.Services.ReadWriteWorkflowVariablesService]).UnderlyingSystemType);
  81. $Host.UI.WriteLine('NIntex Workflow Variables Service Registered.')
  82. }
  83. catch{
  84. $Host.UI.WriteErrorLine($_.Exception.Message)
  85. $ErrorOccurred = $true
  86. }
  87. }

To use the script do the following:

  • Load the script up in your PowerShell Console
  • Execute Activate-WebApplications

Products: Nintex Workflow 2010, Nintex Workflow 2013

Summary

 

When trying to update Nintex Workflow 2010/2013 you run into an error "Job definition was not found, Nintex Workflow Scheduler".

 

The error:

 

Disabling Nintex Workflow Scheduler...

Job definition was not found.

The pipeline has been stopped.

 

 

Symptom

Not able to install or update Nintex Workflow 2010/2013.

 

Resolution

Install the Nintex Workflow Scheduler job using NWAdmin.exe

 

Review more information on how to use NWAdmin.exe here: Scheduled workflows and the Nintex Workflow Scheduler timer job

 

  1. Open SharePoint Management Shell and navigate to your NWAdmin.exe directory.  You may need to search your C: drive on the server to find it.
  2. Run this NWAdmin.exe command
    1. .\NWAdmin.exe -o InstallTimerJob -job ScheduledWorkflows -url http://yourwebappurl/
  3. Retry the Nintex Workflow 2010/2013 install and should get past that error now.

Nintex Forms allows for Cascading Drop Downs which can improve the functionality of your forms, but what if you wanted to include a third-tier to the cascading drop down?

 

Let's take a look at how to configure a three-tier cascading drop down using Nintex Forms!

 

The Setup

 

For this example, we are creating, in total, four lists (List A, List B, List C, and Meal Order).

 

Below is what List A -  C look like:

 

List
Configuration
ListA.pngListAsettings.png
ListB.png

ListBsettingsLU.png

ListBsettingsSL.png

ListC.png

ListCsettingsLU.png

ListCsettingsSL.png

 

Notice the following:

 

  • List A contains the Single Line column 'Title' data that will feed into the 'Meal Time' List Lookup used on List B.
  • List B contains the List Lookup column, 'Meal Time' (from List A), and a Single Line column, 'Meal Type'.
  • List C contains the List Lookup column, 'Meal Type' (from List B), and a Single Line column, 'Beverage'.

 

These are the columns used when creating the list, 'Meal Order', which will be where we build our Nintex Form.

 

Below is the configuration of the 'Meal Order' list columns:

 

Meal Order - Column Settings
MealOrder-MealTime.png
MealOrder-MealType.png
MealOrder-Beverage.png

 

Notice the following:

 

  • The 'Meal Time' List Lookup references the 'Title' Single Line Text column of List A.
  • The Meal Type List Lookup references the 'Meal Type' Single Line Text column of List B.
  • The 'Beverage' List Lookup references the 'Beverage' Single Line Text column of List C.

 

Now, let's take a look at how the List Lookup Controls are configured on the Nintex Form for Filtering:

 

FormDT.png

 

The 'Meal Time' control will not have any filtering applied, so we can move on to 'Meal Type'.

 

MealTypeLLUConfig.png

 

'Meal Type' is going to be filtered by the output of the control, 'MealTime' when the value of 'Meal Time' matches that of 'Meal Type'.

 

Now, let's move onto 'Beverage'.

 

BeverageLLUConfig.png

 

'Beverage' will be filtered by the output of the control, 'MealType' when the value of Meal Type matches that of 'Meal Type'.

 

...the Magic.

 

PotRoastImage.png

ChickenImage.png

Wouldn't it be cool if you could dynamically have an image appear depending on the country the end user is viewing the form?

 

I thought so, so I created this cool sample form to show what can be achieved with a little JavaScript and CSS in Nintex Forms.

 

For this example, let's imagine that we have an office in the United States and an office in Australia (oddly enough, Nintex does!).

 

When viewed in the United States:

 

usView.png

When viewed in Australia:

 

auView.png

 

To accomplish this, I used a free geoip service and stored the output of the 'country' data to a variable. The variable would then be used to determine the appropriate CSS class to apply to the label control used to populate the image.

 

The label control has HTML embedded to apply a ID and Class.

 

The below JavaScript can be placed in the 'Custom JavaScript' section in Nintex Forms Settings:

 

  1. NWF$(document).ready(function () {
  2.     NWF$.getJSON("http://freegeoip.net/json/", function (data) {
  3.         var country = data.country_name;
  4.         var ip = data.ip;
  5.       
  6.         NWF$('#showCountry').text(country);
  7.     
  8.         switch (country) {
  9.             case "United States":
  10.                NWF$('#testBackground').addClass('seattle').removeClass('default');
  11.                 break;
  12.             case "Australia":
  13.                 NWF$('#testBackground').addClass('apac').removeClass('default');
  14.                 break;
  15.         }    });
  16. });

 

The below CSS can be added in the 'Custom CSS' section in Nintex Forms Settings:

 

  1. .apac {
  2. background-image: url('http://www.nintex.com/~/media/corporate/images/sections/platforms/nintex-products-connect-to-content.ashx?h=153&la=en&w=446');
  3. }
  4. .seattle {
  5. background-image: url('http://www.nintex.com/~/media/corporate/images/sections/platforms/nintex-products-on-premises-cloud-hybrid.ashx?h=232&la=en&w=312');
  6. }

In Nintex Workflow for Office 365, use dictionary variables for the “Field names” and “Field values” selections shown in the action configuration settings dialog box for DocuSign Populate Template.

 

DocuSignPopulateTemplate-O365-FieldNamesFieldValues.png

 

When building dictionaries for names and values, key each dictionary identically; that is, use the key of the name (first dictionary) for the corresponding key of the value (second dictionary). In the example dictionaries below, the key “(0)” is used for both “Date Applicable” (FieldNames dictionary) and {Current Item:Modified} (FieldValues dictionary).

 

Example FieldNames dictionary:

Key

Type

Value

(0)

Text

Date Applicable

(1)

Text

Full Name

(2)

Text

Subject

 

Example FieldValues dictionary:

Key

Type

Value

(0)

Text

{Current Item:Modified}

(1)

Text

{Current Item:FirstName} {Current Item:LastName} of {Current Item:Company}

(2)

Text

{Current Item:Subject}

 

For more information about this workflow action, see DocuSign Populate Template in the Nintex Workflow for Office 365 Help.

 

For comparison to Nintex Workflow 2013 and Nintex Workflow 2010, see the workflow described in Nintex Connector for DocuSign.

Filter Blog

By date: By tag: