Tag: view

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