none
How can i write script for search two different List columns of search boxes related data show on grid view in SPFX? RRS feed

  • Question

  • Am able to search the PR_Number column data, the same i want to search for Description as input in another search box and show the gridview in SPFx.
     Here my code:

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    //import styles from './PrFilter.module.scss';
    import { escape } from '@microsoft/sp-lodash-subset';

    import * as strings from 'PrFilterWebPartStrings';
    import PrFilter from './components/PrFilter';
    import { IPrFilterProps } from './components/IPrFilterProps';
    import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

    export interface IPrFilterWebPartProps {
      description: string;
    }
    export interface ISPLists {
      value: ISPList[];
    }
    export interface ISPList {
      PR_Number: string;
      Description: string;
      Request_Date: string;





    export default class PrFilterWebPart extends BaseClientSideWebPart<IPrFilterWebPartProps> {

      private _getListData(): Promise<ISPLists> {  
        let queryString: string = '';
        let queryStringforPR: string = '';
        let searchboxVal: string=(this.domElement.querySelector('#searchbox') as  HTMLInputElement).value;
        if(searchboxVal!=""){
          // alert("searchboxVal" + searchboxVal);      
          queryString="$filter=substringof('"+searchboxVal+"',PR_Number)";
          queryStringforPR= searchboxVal;
          console.log("qurery string value is " + queryString);
          console.log("queryStringforPR value is " + queryStringforPR);
        }
        return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('PurchaseRequest')/Items?$filter=PR_Number eq ${queryStringforPR}`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 

              return response.json();
            });
      }
      private _renderListAsync(): void 
      {  
        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }

      private _renderList(items: ISPList[]): void 
      {
        //debugger;
        let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
        html += `<th>PR_Number</th><th>Description</th><th>Request_Date</th>`;
        items.forEach((item: ISPList) => {
          html += `
              <tr>
              <td>${item.PR_Number}</td>
              <td>${item.Description}</td>
              <td>${item.Request_Date}</td>
              </tr>
              `;
        });
        html += `</table>`;
        const listContainer: Element = this.domElement.querySelector('#spListContainer');
        listContainer.innerHTML = html;
      }
      private _setSearchBtnEventHandlers(): void 
      {
        //debugger;
        this.domElement.querySelector('#searchBtn').addEventListener('click', () => {
            this._renderListAsync();
        }); 
     }  
      public render(): void {

        this.domElement.innerHTML = `
        <div>
        <div>
        
          <div class="ms-Grid-row ms-fontColor-white">
            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">       
              <p class="ms-font-l ms-fontColor-white" style="text-align: center">P2P Tool</p>
            </div>
          </div>
          <div class="ms-Grid-row ms-fontColor-white "> 
            <input id="searchbox" type="textbox"/><input id="searchBtn" type="button" value="Search"/>
            <input id="searchboxDescription" type="textbox"/><input id="searchBtnDescription" type="button" value="Search"/>     
            <br>
            <div id="spListContainer" />
          </div>
        </div>
      </div>`;
        this._renderListAsync();
        this._setSearchBtnEventHandlers();
      }
      
      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
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }


    • Edited by venusp Friday, October 25, 2019 1:32 PM
    Friday, October 25, 2019 1:26 PM

All replies

  • Hi,

    Please modify the code as below. And the type of "Description" field need single line of text, if it is a multiple line of text it will not works in REST API $filter.

    export default class PrFilterWebPart extends BaseClientSideWebPart<IPrFilterWebPartProps> {
      private _getListData(): Promise<ISPLists> {
        let queryStringforPR: string = '';
        let searchboxVal: string=(this.domElement.querySelector('#searchbox') as  HTMLInputElement).value;
        let searchboxDesVal: string=(this.domElement.querySelector('#searchboxDescription') as  HTMLInputElement).value;
        
        if(searchboxVal!=""){   
          queryStringforPR="$filter=PR_Number eq "+searchboxVal;    
        }
        if(searchboxDesVal!=""){       
          queryStringforPR="$filter=substringof('"+searchboxDesVal+"',Description)";    
        }
        if(searchboxVal!=""&&searchboxDesVal!=""){
          queryStringforPR="$filter=PR_Number eq "+searchboxVal+" and substringof('"+searchboxDesVal+"',Description)";
        }
        return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('PurchaseRequest')/Items?${queryStringforPR}`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 
    
              return response.json();
            });
      }
      private _renderListAsync(): void 
      {  
        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }
    
      private _renderList(items: ISPList[]): void 
      {
        //debugger;
        let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
        html += `<th>PR_Number</th><th>Description</th><th>Request_Date</th>`;
        items.forEach((item: ISPList) => {
          html += `
              <tr>
              <td>${item.PR_Number}</td>
              <td>${item.Description}</td>
              <td>${item.Request_Date}</td>
              </tr>
              `;
        });
        html += `</table>`;
        const listContainer: Element = this.domElement.querySelector('#spListContainer');
        listContainer.innerHTML = html;
      }
      private _setSearchBtnEventHandlers(): void 
      {
        //debugger;
        this.domElement.querySelector('#searchBtn').addEventListener('click', () => {
            this._renderListAsync();
        }); 
        this.domElement.querySelector('#searchBtnDescription').addEventListener('click', () => {
          this._renderListAsync();
        }); 
     }  
      public render(): void {
        this.domElement.innerHTML = `
          <div>
          <div>
          
            <div class="ms-Grid-row ms-fontColor-white">
              <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">       
                <p class="ms-font-l ms-fontColor-white" style="text-align: center">P2P Tool</p>
              </div>
            </div>
            <div class="ms-Grid-row ms-fontColor-white "> 
              <input id="searchbox" type="textbox"/><input id="searchBtn" type="button" value="Search"/>
              <input id="searchboxDescription" type="textbox"/><input id="searchBtnDescription" type="button" value="Search"/>     
              <br>
              <div id="spListContainer" />
            </div>
          </div>
          </div>`;
          this._renderListAsync();
          this._setSearchBtnEventHandlers();
      }
    
      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
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 28, 2019 4:31 AM
    Moderator
  • Hi,

    Any update?

    If my reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best regards,
    Dennis

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, October 30, 2019 9:59 AM
    Moderator
  • Hi,

    Would you please provide us with an update on the status of your issue?

    Best Regards,
    Dennis

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, November 4, 2019 9:15 AM
    Moderator