JSOM and REST Cascading drop-downs for SharePoint anonymous users

30th September


Ever since Microsoft deprecated InfoPath many people have been looking for the Holy Grail - the InfoPath replacement. The reality is that quite a few tools exist using different methods. The proliferation of these methods means that choosing the right sub set of technologies to us can be difficult. In this post I'll be going through how to create cascading drop-down lists using html 5 field sets for use on web portals and in particular for anonymous access.

You can still use this approach if you don't have anonymous access enabled - but as far as a I can see this is the only method that will worked with a fully locked down web portal and anonymous access - whilst still accessing SharePoint lists for data.

I won't be going through the basics of where to get your jQuery and stuff I'll just be walking through how to get the results.

Desired results:


Start off create two lists and populate it with your search criteria. In this example I'm using a list called Property Search Location to hold the information in the first box (Location) and then a second list called Property Search Area to hold the Area. We will be filtering list two based on the choice from box

A Property Search Location

Property Search Area

Now create you page and ensure you add the client libraries and jQeury into your header

Header of the page:

                    <script type="text/javascript" src="//ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js"></script>
                    <script type="text/javascript" src="../_layouts/15/sp.runtime.js"></script>
                    <script type="text/javascript" src="../_layouts/15/sp.js"></script>
                    <script src="js/jquery.js"></script>
                

Next on your page create your layout for your drop-downs using html 5 field sets:

                    <div class="grid_5">
                        <fieldset>
                        <legend class="RentalCosts" style="color:#08c0c9; font-size:19px">Refine your results</legend>
                        <label>Location</label> <select id="Location"></select> <label>Area</label>
                        <select id = "Area"></select> </fieldset> </div>
                    <div class="grid_3">
                

Key piece to note here is that you have the two drop downs with the IDs of Location and Area.

We are going to take what the user chooses in Location and then filter the Area box based on this. All driven from the back end SharePoint lists that are used as a content management system to control the sources.

Next up add the following code to do the JSOM pull and add this to the document ready function. This will ensure that when the page loads, the drop down is prepopulated from your list. You can either put this in your .js functions script or put at the bottom of the page above the </body>, your choice:

                    <script type="text/javascript">
                    $(document).ready(function (){
                        var html ='';  
                        $.ajax({
                        url: "http://www.sundownsolutions.co.uk/_api/lists/getbytitle('Property Search Location')/items?",
                        type: "GET",
                        headers: {
                        "accept": "application/json;odata=verbose",
                        },
                        success: function(data){
                        $.each(data.d.results, function(index, item){                                
                        html += "<option>"+item.Title+"</option>";
                        console.log(data);
                        });
                        },
                        error: function(error){
                        alert(JSON.stringify(error));
                        console.log(data);
                        },
                        complete: function () {
                        document.getElementById("Location").innerHTML = html;
                        }
                        });
                    }); /* End of (document).ready */
                    </script>
                

If you test your page you should be able to see the first drop down working. Next we are going to wire up the onchange event of the first drop down to fire our query to populate the Area box. To do this add the onchange event to you Location fieldset option:

                    <div class="grid_5">
                        <fieldset>
                        <legend class="RentalCosts" style="color:#08c0c9; font-size:19px">Refine your results</legend>
                        <label>Location</label> <select id="Location" onchange="filterListItems()"></select> <label>Area</label>
                        <select id = "Area"></select> </fieldset> </div>
                    <div class="grid_3">
                

Now we need to add the function for FilterListItems. Once again you can put this as a function in your .js or add it as script at the bottom of your page above your </body> tag:

                   function filterListItems(){
                    // Get Selected List
                    var ListFocus = document.getElementById("Location");
                    var SelectedLocation = ListFocus[ListFocus.selectedIndex].innerText;
                    var html ='';
                    $.ajax({
                    url: "http://www.sundownsolutions.co.uk/_api/lists/getbytitle('Property Search Area')/items?$filter=Title eq '"+SelectedLocation+"'",
                    type: "GET",
                    headers: {
                    "accept": "application/json;odata=verbose",
                    },
                    success: function(data){
                    $.each(data.d.results, function(index, item){
                    html += "<option>"+item.Area+"</option>";
                    console.log(data);
                    });
                    },
                    error: function(error){
                    alert(JSON.stringify(error));
                    console.log(data);
                    },
                    complete: function () {
                    document.getElementById("Area").innerHTML = html;
                    }
                    });
                    };  
                

Key point to note here is the query. Change and tweak as you see fit. If you use in private browsing you can ensure that you are logged on anonymously and will be able to filter your drop-downs as expected.

Follow Us