Search the SharePoint using PnP JavaScript Library

This post explains on how to use the PnP JavaScript Library to search the SharePoint sites.

The PnP team releases a new JavaScript library as an open source component, for interacting with SharePoint objects. This PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

This post explains,

How to search SharePoint site and get results using PnP JavaScript Library.

Syntax:

pnp.sp.search  – Returns the collection of search results.

We have different options to send the query request to the search through this library as follows,

  • String  –

    [code language=”javascript”]
    pnp.sp.search("QueryString")
    [/code]

  • Object –

    [code language=”javascript”]
    pnp.sp.search({
    Querytext: ‘QueryString’
    })
    [/code]

Example 1: Get results from SharePoint Site by passing query string

The following example returns all results available from SharePoint site

[code language=”javascript”]

//pnp.sp.search("QueryString")

$pnp.sp.search(‘*’).then(function(result) {
console.log(result);
});

[/code]

Example 2: Get results from SharePoint site by passing query object

The following example also returns the same result, but by passing the search query  as an object

[code language=”javascript”]

//pnp.sp.search( { Querytext: ‘QueryString’ } )

$pnp.sp.search({
Querytext: ‘*’
}).then(function(result) {
console.log(result);
});

[/code]

To run the above examples, we have the file dependencies, PnP.js, fetch.js and promise.js. Follow the below steps for executing the examples.

  1. Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
    • Download pnp.js  PnP JS file
    • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
    • Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
  2. Create new web part page and insert Content Editor web part
  3. Create a sample.html file in Site Assets or Style library and insert the example code snippet

    [code language=”javascript”]
    <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
    <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
    <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>

    <script type="text/javascript">
    // Insert PnP example script
    </script>
    [/code]

  4. Add the URL of sample.html file to the content editor web part
  5. Click ok to apply the changes to the web part and save the page.
  6. Now we can view the result in browser console.

This article covers the starting point to use the PnP JavaScript library to search SharePoint site. We can achieve lot more by passing property information, graph api, etc… Will cover those in my upcoming  posts.

Shantha Kumar
Shantha Kumar
Articles: 278

24,849 Comments

  1. How to open web by url i.e.
    var MyWeb = $pnp.sp.crossDomainWeb(‘https://mysharepoint.sharepoint.com’);

    I am not able to open it up.

Comments are closed.