none
How I can add 2 Cascading Dropdown Lists inside my enterprise wiki page layout RRS feed

  • Question

  • I am working on an enterprise wiki site collection inside an on-premise SharePoint enterprise server 2013.Now I want to add 2 cascading dropdown lists inside my enterprise wiki page layout. As follow:-

    1. First drop-down list named “company”.
    2. Second drop-down list named “department”
    3. Departments should be populated based on the selected company.

    So can anyone advice which approach I can follow to have 2 cascading drop-down lists inside my enterprise wiki page layout?

    Now I am thinking to implement something as follow:-

    1. Create 2 site columns of type drop-down lists with empty choices.
    2. Add these 2 site columns to my enterprise wiki page layout.
    3. Create 2 custom lists named “company” & “department”.
    4. Define a lookup column inside the department list which references the company list.
    5. Create a console application and schedule it to run each let say 10 minutes, which will add the items inside the company list as choices inside the “company” site column, and do the same for the department list and department site column.
    6. Then to add a JavaScript inside my page layout, the JavaScript will get fired when the user select/change the company choice (when creating/editing a wiki page). and by doing some rest api calls to the department list, and get the departments items which are related to the selected company, I can then hide all the department choices which is not related to the selected company. so in this way only the department choices which are related to the selected company will be shown ..

    Now in theory the above should achieve what I am looking for.. but can anyone advice if there is a more straightforward/simpler approach I can follow? And is my above approach a valid appraoch to go for?


    Additional Note. now in my case using Lookup fields to achieve the cascading lists will not be 100% suitable. as i have enabled Metadata Navigation for my wiki pages library from (Pages library >> Metadata Navigation >> Configure Navigation Hierarchies ). and inside the  Metadata Navigation i can not use lookup fields, as only single value choice + managed metadata & content type are available for use as navigation hierarchies, as mentioned here:-

    • Edited by johnjohn11 Thursday, February 23, 2017 11:22 AM
    Wednesday, February 22, 2017 2:06 AM

All replies

  • Hi John,

    You will need to create a third list which will involve the two dropdown list and then add the JavaScript code to implement the Cascading relationship.

    Here is a code snippet which will use SPServices library to implement Cascading Dropdown list fr yuour reference:

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

    For detialed step by step, you can refer:

    Cascading of Lookup Dropdown Fields on SharePoint 2013 and Office 365

    SPServices library:

    SPServices library

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, February 23, 2017 2:21 AM
  • Hi John,

    To add to what Jerry shared above, sharing additional articles for achieving Cascading Lookup Columns in SharePoint

    Using JQuery:

    Cascading dropdown (or) Filtered Values in Lookup Columns in SharePoint

    Using REST API:

    Create a cascading dropdowns using SharePoint REST API

    Cascading Drop Down Lists in SharePoint / Office 365 using REST


    Cheers,
    Maruthu
    Please click the 'Mark as Answer' if this post solves your problem or "Vote As Helpful" if it was useful! :)
    Explore the SharePoint

    Thursday, February 23, 2017 7:02 AM
  • Hi John,

    You will need to create a third list which will involve the two dropdown list and then add the JavaScript code to implement the Cascading relationship.

    Here is a code snippet which will use SPServices library to implement Cascading Dropdown list fr yuour reference:

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

    For detialed step by step, you can refer:

    Cascading of Lookup Dropdown Fields on SharePoint 2013 and Office 365

    SPServices library:

    SPServices library

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    thanks for the reply.. But in my case using Lookup fields to achieve the cascading lists will not be 100% suitable. as i have enabled Metadata Navigation for my wiki pages library from (Pages library >> Metadata Navigation >> Configure Navigation Hierarchies ). and inside the  Metadata Navigation i can NOT use lookup fields.. as only single value choice + managed metadata & content type are available for use as navigation hierarchies, as mentioned here:-

    Thursday, February 23, 2017 11:24 AM
  • Hi John,

    To add to what Jerry shared above, sharing additional articles for achieving Cascading Lookup Columns in SharePoint

    Using JQuery:

    Cascading dropdown (or) Filtered Values in Lookup Columns in SharePoint

    Using REST API:

    Create a cascading dropdowns using SharePoint REST API

    Cascading Drop Down Lists in SharePoint / Office 365 using REST


    Cheers,
    Maruthu
    Please click the 'Mark as Answer' if this post solves your problem or "Vote As Helpful" if it was useful! :)

    thanks for the reply.

    >>Using JQuery:

    >>Cascading dropdown (or) Filtered Values in Lookup Columns in SharePoint

    now using lookup fields will not work in my case, as i have enable Metadata navigation for my wiki pages library. and inside the Metadata Navigation columns i can not define lookup fields, as only single valued choice and managed metadata are the fields that can be used inside the Metadata navigation.. so if the Metadata navigation have allowed defining lookup fields,, then of course using lookup field + SP services will be the best appraoch to go with.. but unfortunatly this is not the case.

    >>Using REST API:

    >>Create a cascading dropdowns using SharePoint REST API

    now this approach is somehow similar to the appraoch i have proposed is this correct ? of course i still need to reflect the fields inside the 2 lists as options inside the 2 drop-down lists? is this correct?? maybe i can set event receivers inside the 2 lists, so when users add new Country then the event receiver will add the new country as a new option inside the countries drop-down site column,, and same applies to the State... can you advice on this please?


    • Edited by johnjohn11 Thursday, February 23, 2017 11:47 AM
    Thursday, February 23, 2017 11:38 AM
  • Hi John,

    Where is the Cascading relationship data from ?

    If the data is from the managed navigation, then lookup field can't be used. In this case, it is necessary to create two lists to store the data and then use REST API to insert data to dropdowns to make it Cascading.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, February 24, 2017 9:41 AM
  • Hi John,

    Where is the Cascading relationship data from ?

    If the data is from the managed navigation, then lookup field can't be used. In this case, it is necessary to create two lists to store the data and then use REST API to insert data to dropdowns to make it Cascading.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    >>Where is the Cascading relationship data from ?

    I need to have two cascading drop-down lists , so as i mentioned inside the approach i have proposed i will define a lookup field inside the department list referencing the company list.. i already explain this inside my original question... will you able to check and advice about the validity of my proposed approach ?

    Thanks

    Friday, February 24, 2017 11:05 AM
  • Hi John,

    Yes, it is a valid method to do Cascading dropdown list with REST API with the demo you are looking.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, February 27, 2017 8:41 AM
  • Hi,

    Is there any update?

    If the post helps you, you can mark it as answer to help other community members to find the solution quickly.

    Have a nice day!


    Please click the "Mark as Answer" button if this post solves your problem or "Vote As helpful if it was helpful! :)
    Explore the SharePoint

    Tuesday, June 6, 2017 6:19 PM