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

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

SPFx Document Web Part Deprecated?

I am trying to extend the functionality of the Documents web part

I have been trying to gulp serve this: Documents Web Part.

But it is over 2 year old and localhost refuses to work (ERR_SSL_PROTOCOL), I have set NODE_ENV to production and NODE_NO_HTTP2=1.

I just want someone to run the sample as my work is extending it.

EDIT: I have it working locally by disabling https and removing the s in https from initpage in serve.json – however this disables the web part from running on work bench, any ideas?

Not able to getting the result in grid-view after i text enter in text-box in SPFx

Not able to getting the result in grid-view after i text enter in text-box in SPFx.

Framework: no-java-script framework selected

this is my code:

import { Version } from ‘@microsoft/sp-core-library’; import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField } from ‘@microsoft/sp-webpart-base’; import { escape } from ‘@microsoft/sp-lodash-subset’;

import styles from ‘./SearchgridviewWebPart.module.scss’; import * as strings from ‘SearchgridviewWebPartStrings’; import { SPHttpClient, SPHttpClientResponse } from ‘@microsoft/sp-http’;

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

export default class SearchgridviewWebPart extends BaseClientSideWebPart {

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

private _renderListAsync(): void {
this._getListData() .then((response) => { console.log(“respone is ” + this._renderList(response.value)) this._renderList(response.value); }); }

private _renderList(items: ISPList[]): void { let html: string = ”; 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 { this.domElement.querySelector(‘#searchBtn’).addEventListener(‘click’, () => {
this._renderListAsync(); }); }

public render(): void { this.domElement.innerHTML = <div class="$ {styles.gListItems}"> <div class="$ {styles.container}"> <div class="ms-Grid-row ms-fontColor-white $ {styles.row}"> <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">Demo : Retrieve Data from SharePoint List</p> </div> </div> <div class="ms-Grid-row ms-fontColor-white $ {styles.row}"> <input id="searchbox" type="textbox"/><input id="searchBtn" 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

Get User Photo, Name &Title of an office 365 group using SPfx

I am trying get the user details i.e. UserName, Title and Profile picture of users that belong to a office 365 distribution group.

I tried this code sample, but i get an undefined error i.e. msGraphClientFactory is undefined.

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {   public render(): void {     // ...      this.context.msGraphClientFactory       .getClient()       .then((client: MSGraphClient): void => {         // use MSGraphClient here       });   }    // ... }` 

Can someone suggest what i might be doing wrong or suggest an alternative to get the groups members and their user profile info like photo, name an title.

Image Carousel Spfx webpart with video as a source

I want ot bind src whihc is hyperlink in carousel i am able to bind images but video as source not working how to load video wth images

                        <div style={divStyle}>                           <div className={styles.reactCarousel}>                          <Carousel dynamicHeight={true}  showThumbs={false}  autoPlay={true}  >                             {this.state.items.map((imageList,key) => {                             return (<div>                           {/* <iframe src={imageList.Image? imageList.Image["Url"] : ''} width="560" height="315"></iframe>  */}                           <video  src={imageList.Image? imageList.Image["Url"] : ''}> </video>                           {/* <img  src={imageList.Image? imageList.Image["Url"] : ''}  />  */}                         <p className={styles.legends}  onClick={() =>{this._onClickItem(imageList.Title)}}>{imageList.Title}</p>                            </div>)                             })}                             </Carousel>  

Powerapps or spfx to built forms in SharePoint online?

I need to create a few forms on SharePoint online, but first I would like to know which one to use PowerApps or SPFx?

Can I use workflow on powerapps or spfx?

Edit: the complexity of the form is like this: These forms are not bound to a particular list or library. The form will contain different tabs, thus different views. Depending on the status of the workflow, a different view (tab) will be enabled.

Later some graphs can be added.

thank you.