SharePoint Online: Develop custom search web part using PnP JS and SharePoint Framework(SPFx)

PnP modern search: Develop custom search web part using PnP JS and SharePoint Framework(SPFx)

One comment

 25,827 total views,  1 views today

Develop custom search web part using PnP JS (PnP modern search) – in this tutorial, we will learn about how to develop a SharePoint Online custom search web part using the PnP JS and SharePoint Framework (SPFx).

Key-Highlights: Develop custom search web part using PnP JS

  • Project scaffolding process
  • Launch Visual Studio editor
  • SearchService.ts file code
  • SpFxSearchWebPart.ts file (web part main file) code
  • Demo – SPFx framework search results using the PnP JS

Project scaffolding process: Develop custom search web part using PnP JS

Create a folder name “SPFx_Search”.

Navigate to the above created folder.

Develop custom search web part using PnP JS and SPFx
SPFx project scaffolding process

Enter the below parameters when asked:

Let's create a new SharePoint solution.
? What is your solution name? sp-fx-search
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.14.7
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution sp-fx-search.
? What is your Web part name? SPFx_Search
? What is your Web part description? SPFx_Search description
? Which framework would you like to use? (Use arrow keys)
> No JavaScript framework
React
Knockout
Develop custom search web part using PnP JS and SPFx
Develop custom search web part using PnP JS and SPFx

Then we will get the below screen:

Develop custom search web part using PnP JS and SPFx, SPFx project scaffolding process completed
SPFx project scaffolding process completed

We will need to install SharePoint PnP and Office UI Fabric React to our project, now run the following commands in sequence:

npm install sp-pnp-js --save
npm install office-ui-fabric-react --save

The above two commands will install and save the required files in the project. We can see all dependencies in the package.json file.

"dependencies": {
"@microsoft/sp-client-base": "~1.0.0",
"@microsoft/sp-core-library": "~1.0.0",
"@microsoft/sp-webpart-base": "~1.0.0",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"office-ui-fabric": "^2.6.3",
"sp-pnp-js": "^2.0.2"
},

Launch Visual Studio editor: Develop custom search web part using PnP JS and SPFx

Open the project code in the visual studio editor by typing the “code .” command.

Create SearchService.ts file with the two classes MockSearchService (for the mockup search test) and SearchService (for actual Sharepoint Online search test).

SPFx SharePoint Online search service, Develop custom search web part using PnP JS and SPFx
SPFx SharePoint Online search service

SearchService.ts file code:

'use strict';

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

export interface ISearchResult
{

    link : string;

    title : string;

    description : string;

    author:string;

}

export interface ISearchService
{

    GetMockSearchResults(query:string) : Promise<ISearchResult[]>;

}

export class MockSearchService implements ISearchService
{

    public GetMockSearchResults(query:string) : Promise<ISearchResult[]>{

        return new Promise<ISearchResult[]>((resolve,reject) => {
        

      resolve([

                    {title:'This is test title 1',description:'Test Title 1 description',link:'https://globalsharepoint2020.sharepoint.com Jump ',author:'Global SharePoint1'},

                    {title:'This is test title 2',description:'Test Title 2 description',link:'https://globalsharepoint2020.sharepoint.comJump ',author:'Global SharePoint2'},

                    ]);

        });

    }

}

  

export class SearchService implements ISearchService
{

    public GetMockSearchResults(query:string) : Promise<ISearchResult[]>{

        const _results:ISearchResult[] = [];  

        return new Promise<ISearchResult[]>((resolve,reject) => {

                pnp.sp.search({

                     Querytext:query,

                     RowLimit:20,

                     StartRow:0

                    })

                .then((results) => {

                   results.PrimarySearchResults.forEach((result)=>{

                    _results.push({

                        title:result.Title,

                        description:result.HitHighlightedSummary,

                        link:result.Path,

                        author:result.Author

                    });

                   });

                })

                .then(

                   () => { resolve(_results);}

                )

                .catch(

                    () => {reject(new Error("Error")); }

                );

                  

        });

    }

}

Now open the SpFxSearchWebPart.ts file (web part main file):

SPFx SharePoint Online Webpart.ts file, Develop custom search web part using PnP JS and SPFx
SPFx SharePoint Online Webpart.ts file

SpFxSearchWebPart.ts file (web part main file)code:

'use strict';

import { Version,Environment,EnvironmentType } from '@microsoft/sp-core-library';

import {

  IPropertyPaneConfiguration,

  PropertyPaneTextField

} from '@microsoft/sp-property-pane';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './SpFxSearchWebPart.module.scss';

import * as strings from 'SpFxSearchWebPartStrings';

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

import * as SearchService from './Services/SearchService';

import {SPComponentLoader} from "@microsoft/sp-loader";

export interface ISpFxSearchWebPartProps

{

  description: string;

}

export default class SpFxSearchWebPart extends BaseClientSideWebPart <ISpFxSearchWebPartProps>

 {

  public constructor(){

    super();

   SPComponentLoader.loadCss("https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css Jump ");

   SPComponentLoader.loadCss("https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css Jump ");

  }

  public render(): void {

  

    this.domElement.innerHTML = `

      <div class="${styles.spFxSearch}">

        <div class="${styles.container}">

          <div class="ms-Grid-row ms-bgColor-themeLight ms-fontColor-white ${styles.row}">

            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">

              <div>

                <span class="ms-font-xl ms-fontColor-white">${escape(this.properties.description)}</span><br/>

               <div class="ms-Grid">

                    <div class="ms-Grid-row">

                      <div class="ms-Grid-col ms-u-sm10"><input class="ms-TextField-field" id="txtInput" placeholder="Search..." /></div>

                      <div class="ms-Grid-col ms-u-sm2"> <Button class="ms-Button ms-Button--primary" id="btnSearchQuerySubmit" type="submit" value="Submit">Search</Button></div>

                    </div>

                  </div>

                 <div class="ms-List ms-Grid-col ms-u-sm12" id="searchResultsDisplay"></div>

                </div>

            </div>

          </div>        

        </div>

      </div>`;

     this.EventListners();

    

  }

  private EventListners():void

  {

    const btnSearch = this.domElement.querySelector("#btnSearchQuerySubmit");    

    const queryText:HTMLElement = <HTMLInputElement>this.domElement.querySelector("#txtInput");

    btnSearch.addEventListener('click',() => {

         (new SpFxSearchWebPart()).OnChangeEvent(queryText);

    });

   }

    

  public OnChangeEvent(text:HTMLElement):void

  {

   (new SpFxSearchWebPart()).renderSearchResults((<HTMLInputElement>text).value)

      .then((html) =>{

        const element  = document.getElementById("searchResultsDisplay");

        element.innerHTML = html;

      });

  }

  private renderSearchResults(query:string):Promise<string>

  {

    const _search:SearchService.ISearchService = Environment.type == EnvironmentType.SharePoint ? new SearchService.SearchService() : new SearchService.MockSearchService();

    let resultsHtml:string = '';

    

    return new Promise<string>((resolve) => {

      if(query){

         _search.   

         GetMockSearchResults(query)

         .then((results) => {

             results.forEach((result) => {

                 resultsHtml += `<div class=""ms-ListItem ms-Grid-col ms-u-sm8">

                                  <a href="${result.link}"><span class="ms-ListItem-primaryText" >${result.title}</span></a>

                                   <span class="ms-ListItem-secondaryText">${result.author}<span>

                                  <span class="ms-ListItem-tertiaryText">${result.description}</span>

                                  <span class="ms-ListItem-metaText">10:15a</span>

                                   <div class="ms-ListItem-actions">

                                       <div class="ms-ListItem-action" targerUrl="${result.link}"><i class="ms-Icon ms-Icon--OpenInNewWindow">

                                       </i></div>

                                     </div>

                                </div>`;

                   });

               })

        .then(

          () => {

           setTimeout(() => {

             const action:HTMLCollectionOf<Element> = document.getElementsByClassName("ms-ListItem-action");

             for(let i=0;i<action.length;i++){

               action[i].addEventListener('click',(e)=>{

                 window.open((e.currentTarget as Element).getAttribute("TargerUrl"));

               });

             }

           },300);

            resolve(resultsHtml);

           }

        );

      }

      else{

        resultsHtml += "Please provide search query input in searchbox.....";

        resolve(resultsHtml);

      }

    });

  }

  protected get dataVersion(): Version {

  return Version.parse('1.0');

}

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

  return {

    pages: [

      {

        header: {

          description: strings.PropertyPaneDescription

        },

        groups: [

          {

            groupName: strings.BasicGroupName,

            groupFields: [

              PropertyPaneTextField('description', {

                label: strings.DescriptionFieldLabel

              })

            ]

          }

        ]

      }

    ]

  };

}

}

 

Demo – SPFx framework search results using the PnP JS (PnP Modern search)

Run the web part using the gulp serve command.

Then add the web part to the workbench.html page.

Pass “Test” as search text, then hit the “Search” button, we can see the search result which was defined in the SearchService.ts file as mockup data.

Develop custom search web part using PnP JS and SPFx, Search result web part with mockup data
SPFx Search result web part with mockup data

Now, let’s add the same web part to the SharePoint Online page, for example – https://globalsharepoint2020.sharepoint.com/_layouts/15/workbench.aspx.

Then pass “Global” as search text, hit on the “Search” button, and now we can see the search results from the actual Sharepoint Online tenant which matches the “Global” keyword.

Develop custom search web part using PnP JS and SPFx, SharePoint Online search results from Sharepoint Online site - SPFx Demo
SharePoint Online search results from Sharepoint Online site – SPFx Demo

Summary: Develop custom search web part using PnP JS and SPFx

Thus, in this article, we have learned about how to develop a SharePoint Online custom search web part using the PnP JS and SharePoint Framework (SPFx).

Source Code: PnP modern search using SPFx

The above source code can be downloaded from here.

See Also: PnP modern search tutorial

You may also like the below SharePoint SPFx articles:

PDF Download Image

Download SharePoint Online & Office 365 Administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:



Buy SharePoint Online & Office 365 Administration eBook


 

Get the free demo PDF eBook from here:

FREE DOWNLOAD

Send download link to:

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.

About Post Author

1 comments on “PnP modern search: Develop custom search web part using PnP JS and SharePoint Framework(SPFx)”

Do you have a better solution or question on this topic? Please leave a comment