Level: Intermediate
Example: People Finder Example
The PeopleSearch() function is great for doing basic searches, but the search resource for our backend REST API supports much more functionality, including "facets", which allow you to give members the opportunity to narrow their search by industry, location, or the distance in their network. This tutorial demonstrates one example of this functionality, with a people finder featuring location facets.
When we're finished, you'll have a people finder with a search box and buttons down the side for the member to narrow their search by location. These buttons will be different for each member, based on the locations for the people in their network.
First, you'll need to set up your application. We're going to include a form for the message sending (which will be hidden by jquery until it's opened), a div to show the connections, and the login button for authentication.
See the JSAPI Authentication Tutorial for more information.
The framework is loaded with the instruction to let the user stay logged in:
We need to add search functionality so that the page works as expected. There is a lot of code here, all combined together - so if you want to grab this whole cloth, just get the example code from the bottom of the page or from example.html rather than trying to build it from here.
We need to use the Raw API for this call, because facets are not supported by IN.API.PeopleSearch(). More information on how the Raw call works can be found in the documentation. We will use the REST API people search resource to get the information we need. The documentation for that resource covers the use of facets and how to use them to narrow searches.
Here is how we'll build the URL we need to use for our application. When requesting facets, it's necessary to call out exactly what fields you want for people. What we need is their first name, last name, and a picture. For the facets, we want to have the code for the location as well as the name. We'll restrict the search to 15 results and add the keyword, and add any location facets the user has selected with the buttons. *whew*
All that work is just to build the URL. Now that we have it put together we can create the IN.API.Raw() call. This section is a little complicated. First, it makes the call to get the search results. First, the call itself:
The result object will be comprised of facets and people. We'll go through the people first to generate the return list. The fields requested were first name, last name and picture URL, and those are used to build a basic list of results.
Next the facets need to be processed. For each location returned, create a checkbox (selected if the location was previously selected), and build that list into the page.
That's pretty much all the functionality. You can see the full application below, which has some extra styling and behaviors, but the actual functionality is just what's described here.