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

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

One comment

 931 total views,  6 views today

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:

  • 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

Create a folder name as “SPFx_Search”.

Navigate to the above-created folder.

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

Then we will get the below screen:

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

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
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
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

Run the web part using the gulp serve command.

Then add the web part into 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 a mockup data.

SPFx Search result web part with mockup data
SPFx Search result web part with mockup data

Now, let’s add the same web part in 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, now we can see the search results from actual Sharepoint Online tenant which matches the “Global” keyword.

SharePoint Online search results from Sharepoint Online site - SPFx Demo
SharePoint Online search results from Sharepoint Online site – SPFx Demo

Summary:

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:

The above source code can be downloaded from here.

See Also

You may also like the below SharePoint SPFx articles:

Free download SharePoint Online & Office 365 Administration eBook(238 Pages)

Get the PDF eBook from here:


 
FREE DOWNLOAD

Send download link to:

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

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