0

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.

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
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.