Cascading of Lookup Dropdown Fields on SharePoint 2013 and Office 365

Welcome to an article on the ‘Cascading of Dropdown fields on SharePoint 2013 & Office 365’. This is a major approach when we build forms and when we have to use multiple look up fields on the form and they should be related to each other as a parent and child relationship.

So what happens is, when you select a parent, other child items are related to it. So if you select a particular parent, all the child items related to the parent will appear.

Let’s see it.

• Create a list named “Company”.
  
  
• Click on Add an app,
  
  
  
  
• Choose the Custom List App.
  
  
  
  
• Click on it and create a ‘Company’ List.
  
  
  
  
• Once the list is created, add in the names of the companies.
  
  
  
  
• As per the screenshot below.
  
  
  
  
• Create another list named as “Employee”
  
  
  
  
• Once the list is created, Create a look up column named as Company from our Company List.
  
  
  
  
• As you can see below, Clock on Create Column and the choose Lookup.
  
  
  
  
• Select the list as Company and choose the Title field while configuring the lookup column.
  
  
  
  
• So here we can see our look up column has values from another list.
  
  
  
  
• Fill in your required values; as for mine, I have filled in the name of the employees under the Title and have selected the company names from my look up field.
  
  
  
  
• Now create a third list as Database.
  
  
  
  
  
  
• Add the two look up columns, Company from the company list, and select title as the source of the column as per the screen shot below.
  
  
  
  
• Add the second look up columns; Employee from the employee list as per the screen shot below, selecting title as the field of source column.
  
  
  
  
• So this will be your blank list view with all the columns,
  
  
  
  
• When you click on New Item as you have added both the column as lookup they should display all the values but no, we are controlling their values as parent and child relationship as per the screen below.
  
  - If you select Company as “CTS”, the employee sees Manpreet as the value.
  
  
  
  
  
  - Here when you select “Infy” as the Company name, Baghel is displayed as the Employee.
  
  
  
  
• How was it done?
  
  - Go to the Database list.
  
  - Under the list tab select “Default New Form”.
  
  
  
  - Add a ‘Script Editor’ web part and paste the code below.
  
  
  
  Code:
  

  <script src="https://site name/jquery.min.js"></script>
  <script src="https://sitename/jquery.SPServices.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function ()
  {
      $().SPServices.SPCascadeDropdowns(
      {
          relationshipList: "Employee",
          relationshipListParentColumn: "Company",
          relationshipListChildColumn: "Title",
          parentColumn: "Company",
          childColumn: "Employee",
          debug: true
      });
  });
  </script>

• Click on OK and come back to the Database List and click on New Form.
  
  
• Your Cascading will start functioning.

Here we saw today an amazing functionality of Cascading of lookup Dropdown fields on SharePoint 2013 & Office 365. Keep reading more articles and keep learning.