Page Navigation through the DropdownList in SharePoint List


Recently I got a requirement where I had to give a functionality to redirect to multiple external link from SharePoint site. In this Article I am going to demonstrate how you can achieve the navigation to a link just by clicking to a selected text of the dropdown List item. It’s very easy and can be achieved by using SharePoint List, Script Editor and Jquery.


Read some SharePoint tutorials

The Steps are as below:

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

Page Navigation through the DropdownList in SharePoint List
Page Navigation through the DropdownList in SharePoint 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 in the page; you will see an “EDIT SNIPPET” link click . You can insert the HTML and/or JavaScript code in the dialog.

<select id=”SearchEngine” style=”width:30%”><option value=”NAN”>Select SearchEngine</option></select>

<script type=”text/javascript” src=”/Style Library/Styles/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/’> \
<soapenv:Body> \
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’> \
<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 arr = data.split(‘,’);
window.open(arr[0], ‘_blank’);
}
});
</script>

Step-5: Save the Page DropdownList Will Populated as below

Page Navigation through the DropdownList in SharePoint List
Page Navigation through the DropdownList in SharePoint List

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

Page Navigation through the DropdownList in SharePoint List
Page Navigation through the DropdownList in SharePoint List


In this article We Learn how can be navigate to a particular Link by selecting item in dropdown.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →