Advanced Concepts Of Nintex Forms For Office 365 SharePoint Online

Introduction

 

In my previous article, Getting started with Nintex forms for Office 365 SharePoint Online Part 1 we have seen how to create and design a Nintex form on a SharePoint Online List from scratch.

 

In this article, we will discuss advanced concepts of Nintex forms for Office 365 SharePoint Online, and we will also see a demo example. We will explore step by step the advanced Nintex form functionalities.

 

After reading this article, you will be able to,

• Apply validation on form controls.
• Apply rules on Nintex forms.
• Customize the Nintex forms as per your requirements.
• Use custom JavaScript and CSS in Nintex Forms.

In the previous article, we have designed the form. We will use the same form and continue exploring advance functionalities on it.

 

Steps

 

To open the Nintex form, go to site contents -> list -> Nintex forms as shown below.



The Nintex form will be opened.

 

To apply validations on form controls,

• Select the controls for which you want to apply validations.
• Go to the controls tab in ribbon and click on Add Rule button as shown below.

 

Give name to your rule as shown in the below screenshot. Nintex form Rule will have below options,

• Name
• Rule Type
• Condition
• Formatting

 

Select Rule type as per your requirements,

• Rule Type Formatting: To show / hide controls based on conditions
• Rule Type Validation: To validate controls based on conditions

To validate controls,

• Select Rule Type Validation
• Place your error message in message box
• Click on formula icon near text box Control is invalid if…

 

Formula builder window will be opened to insert your condition / formula for validation.

 

Formula builder window will have the below options to build your condition / formula,

• Operators: It will show different operators to be used in formula.
  
  
• Add, Subtract, multiplication, Parenthesis, Equals, etc.

• Common: It will show common properties that can be used in formula.
  
  
• Current Date, Time, User, Site, Form Mode, etc.

• Item Properties: It show list columns that can be used in formula.
  
  
• Created, Created By (Email), Modified, etc.

• Named Controls: It will show the name of the controls that can be used in formula.
  
  
• It will show custom names given to the controls.

• Runtime functions: It will show Runtime functions that can be used in formula as shown below.
  
  
• And, Avg, Contains, Count, etc.

Click on Formula text box and go to Runtime functions tab.

 

 

 

Select IsNullOrEmpty() from Runtime functions and double click on it to pasted into formula builder as shown below.

 

 

Go to Named Controls tab and double click on {Self} option and click Ok button to close the window.

 

Self option means select all selected controls for validation.

 

 

Once Validation Rule is created, it will be seen as shown below.

 

Clicking on Arrow will show options to modify the rule.

 

 

Add Rule Type Formatting to show hide controls based on condition.

• Select Other Department label and its control.
• Add Rule and give name to the rule.
• Select Rule Type Formatting.
• Check Hide checkbox to hide Other Department controls based on condition.
• Click on formula icon near Condition text box.

 

Insert conditions in formula builder window and click on Ok button.

 

Rule will look as shown below.

 

 

To insert custom JavaScript and CSS in your form,

• Go to Form settings option in Designer tab in top ribbon.

 

Below are the options available in form settings tab,

• General Tab for general settings.
• Appearance Tab for appearance settings.
• Custom CSS Tab to insert custom css.
• Custom JavaScript Tab to insert custom JavaScript code.
• Nintex Mobile setting Tab for mobile device related settings.
• In Advanced Tab,
  
  
• Custom CSS includes: To include custom / external CSS file.
• Custom JavaScript includes: To include custom / external JS file.
• Print to PDF Tab for PDF related settings.

 

Save and Publish the Nintex form.

 

 

Go to list and click on New button to add Item to list.

 

 

The form will be seen as shown below,

 

 

The form will not be saved without filling the mandatory information.

 

On click of save button, Validation will trigger and will show error message as shown below.

 

 

Other department control will be shown based on the condition Department Other.

 

By default, it will be hidden as we have applied a formatting type rule on it.

 

 

Validations will be triggered and error message will be shown on top of the form as shown below.

 

 

Clicking on Save button will save the information in the list as shown below.

 

 

Summary

 

In this article, we have seen, 

• Apply validation on form controls.
• Apply rules on Nintex forms.
• Customize the Nintex forms as per your requirements.
• Use custom JavaScript and CSS in Nintex Forms.