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,

     Add an app

  • Choose the Custom List App.

    Custom List App

  • Click on it and create a ‘Company’ List.

    create a Company List

  • Once the list is created, add in the names of the companies.

    list is created

  • As per the screenshot below.

    Company

  • Create another list named as “Employee

    Create another list

  • Once the list is created, Create a look up column named as Company from our Company List.

    Company List

  • As you can see below, Clock on Create Column and the choose Lookup.

    Create Column

  • Select the list as Company and choose the Title field while configuring the lookup column.

    configuring the lookup

  • So here we can see our look up column has values from another list.

    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.

    employees

  • Now create a third list as Database.

    list as Database

    new item

  • 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 two look up column

  • 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.

    Employee from

  • So this will be your blank list view with all the columns,

    list view

  • 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.

    select Company as CTS

    CTS

    - Here when you select “Infy” as the Company name, Baghel is displayed as the Employee.

    Infy

  • How was it done?

    - Go to the Database list.

    - Under the list tab select “Default New Form”.

    Default New Form

    - Add a ‘Script Editor’ web part and paste the code below.

    database

    Code:
    1. <script src="https://site name/jquery.min.js"></script>  
    2. <script src="https://sitename/jquery.SPServices.min.js"></script>  
    3. <script type="text/javascript">  
    4. $(document).ready(function ()  
    5. {  
    6.     $().SPServices.SPCascadeDropdowns(  
    7.     {  
    8.         relationshipList: "Employee",  
    9.         relationshipListParentColumn: "Company",  
    10.         relationshipListChildColumn: "Title",  
    11.         parentColumn: "Company",  
    12.         childColumn: "Employee",  
    13.         debug: true  
    14.     });  
    15. });  
    16. </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.