SharePoint Framework Development - Working with Search Using PnP JS



Published: 20 July 2017

 We can seamlessly integrate PnP JS file with SharePoint. The new Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint. Currently it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions. We can use them with SharePoint Framework to work with SharePoint with minimal effort. You can get detailed information and documentation about PnP JS from here

This is a continuation post in the SharePoint Framework Development series, In a previous article, we saw how to set up the development environment for SharePoint Framework. We also saw the basic Hello World web part creation and  how to provision SharePoint List with custom Site Columns and Content Type here.

In this section, we will try to work with SharePoint Search and retrieve the search results based on a keyword using SPFx and PnP JS.The major code files used for the demo are uploaded here

Spin up Node.js command prompt, using which we will be creating the Web part project structure.We can create the directory, where we will be adding the solution, using the command given below.

md RetrieveSearchResults 

Let’s move to the newly created working directory, using the command.

cd RetrieveSearchResults 

We will then create the client Web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the ‘RetrieveSearchResults’ Web part, which will take some time to complete. Once completed, we will get a congratulations message.

Edit the web part

Run ‘Code .’ to open the project in Visual Studio Code.

Install PnP JS Module and Retrieve Search Results

Now we have to load PnP JS file which we will use within the project to retrieve the search results.We will be using npm to add PnP JS file as shown below.

npm install sp-pnp-js --save

Reference the PnP js file in the project by including the below line to the top of the TS file 

import * as pnp from 'sp-pnp-js';

import  { SearchQuery, SearchResults } from "sp-pnp-js";

We can get the search results using the below function. Here we will be using PnP method, ‘pnp.sp.search’ which accepts the search keyword as the parameter. It will return the search results which we will display as a table.

TS File contents for displaying the retrieved search results  

The entire TS file contents is as shown below, ‘this.GetSearchresults()’ in the render method will call the function that will retrieve the search results based on the keyword. It will be then displayed within the div element declared in the render method. 

Test the Web part in SharePoint Online

Now, let’s test the Web part in SharePoint Workbench available in SharePoint Online.  Once we have login in to SharePoint Online, we can invoke the workbench by appending the text ‘_layouts/15/workbench.aspx’ to SharePoint Online URL. Add the webpart to the page by selecting ‘RetrieveSearchResults’ icon.

Thus, the search results have been retrieved and it has been listed in the web part as shown below.

Summary

Thus we saw how to work with Search using SharePoint Framework and PnP JS. In the upcoming article we will see how to work with User Profiles using SharePoint Framework and PnP JS.



Join 7,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here