Page Navigation Using a DropDownList in SharePoint List Using jQuery

Posted: July 20, 2014 in SharePoint2013

Introduction

Recently I got a requirement to provide the functionality to redirect to multiple external links from a SharePoint site.

In this article I will demonstrate how to do the navigation to a link just by clicking a selected text of the dropdown list item.

It’s very easy and can be done using a SharePoint List, Script Editor and jQuery.

Use the following procedure.

Step 1: Create the List (Say SearchEngine) as below:

Create the List

Step 2: Navigate to your SharePoint 2013 site and create a Wiki Page or a Web Parts page.

Step 3: The process to add your JavaScript code is quite straightforward:

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

Step 4: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link click. You can insert the HTML and/or JavaScript code into the dialog.

<select id=”SearchEngine” style=”width: 30%”>

    <option value=”NAN”>Select SearchEngine</option>

</select>

<script type=”text/javascript” src=”/Scripts/jquery-1.10.1.min.js”></script>

<script type=”text/javascript” language=”javascript”>

    $(document).ready(function () {

        $(“#SearchEngine option[value=’NAN’]”).attr(‘selected’, ‘selected’);

        var soapEnv =

“<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \

<soapenv:Body> \

<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’&gt; \

<listName>SearchEngines</listName> \

<viewFields> \

<ViewFields> \

<FieldRef Name=’Title’ /> \

<FieldRef Name=’SearchUrl’ /> \

</ViewFields> \

</viewFields> \

</GetListItems> \

</soapenv:Body> \

</soapenv:Envelope>”;

        $.ajax({

            url: _spPageContextInfo.webAbsoluteUrl + “/_vti_bin/Lists.asmx”,

            type: “POST”,

            dataType: “xml”,

            data: soapEnv,

            complete: processResult,

            contentType: “text/xml; charset=\”utf-8\””

        });

    });

    var select = $(‘#SearchEngine’);

    function processResult(xData, status) {

        $(xData.responseXML).find(“z\\:row”).each(function () {

            select.append(“<option value='” + $(this).attr(“ows_SearchUrl”) + “‘>” + $(this).attr(“ows_Title”) + “</option>”);

        });

    }

    $(‘#SearchEngine’).change(function () {

        var data = $(this).val();

        if (data != “NAN”) {

            var urls = data.split(‘,’);

            window.open(urls[0], ‘_blank’);

        }

    });

</script>

Step 5: Save the Page DropDown List, it will be populated as below:

Page Dropdown List

Step 6: Select The Link Google. You will navigate to the URL configured in the List:

Select The Link Google
Conclusion

This article showed how to navigate to a specific link by selecting an item in a DropDown.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s