Cascading dropdown in Nintex Forms + Responsive Forms

In this Nintex tutorial, we will discuss how to create a cascading dropdown in Nintex forms for Office 365 in SharePoint Online. We will also see, how to create a nintex new responsive forms cascading dropdown.

Nintex responsive forms cascading dropdown

Here I have a Nintex form, which has two dropdown lists Country and State. The country list we will populate from a SharePoint Online list. And based on the Country dropdown list selection, the corresponding State dropdown list will get populated from another list.

Step 1: Here is my SharePoint Online site I have Created a “Country” list like below.

Step 2: Then I have created another list as “State“. In this list, I have added the Country column which is a Lookup column.

Step 3: Then I have Created a “City” list. In this list, select State and Country columns are Lookup type.

Step 4: Open the SharePoint list, then from the ribbon List tab and click on Nintex form, you will get the Nintex Designer view (here select “Responsive Form”). it will be shown form as below screenshot. I placed the columns in order for our requirements.

Step 5: Click on “State” control, Next go to the Control tab, click on “Control settings” (or go to the “Designer” tab there click on the “Properties” button). In the “Control Settings- State” window, go to the “filtering “section as shown below.

• In the filtering Section, Choose “By a control’s value” from “Filter available selections“.
• Now it is very important to manually enter the column name Country in the “Where field*” section. Do NOT choose anything from the “Insert Reference list”.
• Choose “Country” from the “Filtered by control” drop-down menu. Make sure “Action when no filter applied” is “Show none“. See the screenshot below.

Step 6: Save and Publish the form.

Step 7: Now see the below screenshot, the countries from the country drop-down menu.

Step 8: Select Country “India” from the drop-down menu, now State drop-down menu will be populated with all the states associated with the selected Country as shown below.

Step 9: Now Enter the”City” name and  click on “save” button.

Step 10: See the SharePoint Online City list and you can see an item has been added.

This is how to do cascading lookup column in Nintex Forms for Office 365 SharePoint Online. Here is an example, nintex responsive forms cascading dropdown.

Read: Nintex workflow examples

Cascading dropdown in Nintex forms

I have created a Country list that has only one column name as Country, Here I have renamed the Title column to Country. And I have added a few items to the Country list and the list looks like below:

I have created another list name as “State” which has two columns, One is the State column (I have renamed the default Title column) and another one is lookup column name as “CountryName”.

This column is populating from the Country list which we have created above. And I have added a few items to the State list also. It appears like below:

Now open the SharePoint Online list where you want to add the cascading drop-down. From the Ribbon of the list, click on Nintex forms to customize the list form.

This will open the Nintex forms designer. There first we need to add two lookup fields. So expand SharePoint section and then drag and drop List Lookup to the form.

You can also add two labels for the corresponding dropdowns. Here one dropdown for Country and another dropdown for State as shown in the fig below:

Now to let it work as per the requirement we need to do some configuration settings for both the controls. First Double click on the Country drop-down, which will open the Control Settings dialog box.

Give a name for the control, the from the Source List, select the Country list. Because the data could come from here. List Column name as Title.

Here I have put a validation so that users will be bound to select one country. Make Required property as Yes to make it mandatory.

You can also set the error message which you want to display if validation fails. Click OK to Save and the properties should look like below:

Then double-click on the State dropdown to open the Control settings window. The same way we have to give a name, then the Souce list as State and column name in the List is Title.

Here we need to do the filtering settings.

First, choose:
Filter available selections as By a control’s value.

In the Where field chooses the Column name from the State list. Here the column name is CountryName. This is our lookup column name.

Then Filtered by control choose the Country form field name. Here we have given the name as “frmcountry“.

For the State field also we have chosen the Required field as Yes so that user will bound to choose a state.

Now Publish the form and then Open new form by adding an item to the SharePoint list. In the form if you will choose a Country, corresponding States will appear as shown in the fig below:

You may like following Nintex forms for Office 365 tutorials:

• How to use Repeating Section in Nintex forms for Office 365 SharePoint online?
• How to apply rules in Nintex forms for Office 365 SharePoint online?
• How to use set field value in Nintex Forms for Office 365 in SharePoint Online using JavaScript?
• How to implement mandatory field validation in Nintex forms in Nintex forms for Office 365 SharePoint Online?
• How to implement validation rules by condition in Nintex forms for Office 365 SharePoint Online?
• How to design multiple step forms using Nintex forms for Office 365 SharePoint Online?
• How to set a default value for lookup column in Nintex forms for Office 365 SharePoint online?

In this tutorial, we learned how to use the Nintex forms cascading dropdown in Office 365 SharePoint Online. We saw an example of nintex responsive forms cascading dropdown.