Create a Custom People Directory using REST API in SharePoint

Create a Custom People Directory using REST API in SharePoint

This SharePoint Rest API tutorial, we will discuss how to use REST API to get data from custom people directory. We will see how to create a custom people directory using REST API in SharePoint Online or SharePoint 2013/2016.

If you are new to Rest API SharePoint, check an article on SharePoint Rest API Tutorial and Examples.


Create a Custom People Directory using REST API in SharePoint

Let’s begin to create a custom people directory by using SharePoint out of box contact list that contains custom columns as below screenshot.

Create a Custom People Directory using REST API in SharePoint Online
Create a Custom People Directory using REST API in SharePoint online

Let’s see how we can retrieve data using Rest API and show the result in a script editor web part in SharePoint.

Create a javaScript file in Notepad ++ and paste the below code inside a script editor web part in SharePoint page or you can add it inside Visual Studio to make it Visual web part.

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<script>
function LoadContacts(firstName)
{
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Contacts')/items?$select=Title,FirstName&$filter=(FirstName eq '"+firstName+"')",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR)
{
$('#JSONData').empty();
$.each(data.d.results, function( index, value )
{
$('#JSONData').append("<h1>" + value.Title + value.FirstName +"</h1>" + "<h2>" + value.FirstName + "</h2>");
});
});
call.fail(function (jqXHR,textStatus,errorThrown)
{
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}
</script>


Search By First Name: <input type="text" id="FirstName">
<input value="Get Contacts" type="button" onClick=LoadContacts($('#FirstName').val());>​
<div id="JSONData"><div>

One thing to notice here, we are using jQuery and Ajax to call the REST API. Using a Search box to search names that match with the Contact’s name.

The above code will parse the JSON data and append the parsed data in the JSON Data div.

Now we go ahead to debug this code. So we need to enter any name in the Text box to see the result.

Create a Custom People Directory using REST API in SharePoint
Create a Custom People Directory using REST API in SharePoint

Since we got the data already, with that we can apply custom HTML and CSS to show the results in nicely formatted way.

Congratulations!! 🎉👏

We have reached the end of our journey. I hope you enjoyed learning with me and now feel confident to continue on to your next adventure.

You may also like following SharePoint Rest API tutorials:

But it doesn’t have to end here. My next article will focus on helping you get started with the very exciting custom Web Parts in SharePoint 2013/2016/2019 and SharePoint online.


To get a notification when my next article is out, you can follow enjoysharepoint on Facebook and follow us on Twitter.

It was a pleasure to be on this journey with you.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

View all posts by Rajkiran Swain →