SPFX - List View webpart using pnp List view control

SPFX webpart using PnP List view control

I have recently came across with an requirement to display pending tasks on modern page from different site/subsites within site collection, There is no way as of now to display on modern page apart from highlight webpart.

I decided to try SPFX and it worked pretty well, tried to made it configurable with options like filter, grouping etc.

SPFX webpart to display list data from single/multiple lists using REST API.Easy to configure and re-use

Using PnP list view webpart to reder data with configurable option to search and filter. Webpart can be configured with set to defined filters/views/groups etc.

This webpart can be used to display pending tasks from single task list or from multiple task lists, it can be used to display documents or list items from any site/subsite.

Screen Shot Below :

Webpart can be configured using below options. 

I have posted the code on github which can be easily re-used.

https://github.com/agarawalankur/SPFXPnPListViewWebpartSPOnline/blob/master/README.md

Add Attachment is List using spHttpClient in SPFX React webpart

Below code can be used to add attachment in SPFx webpart using spHttpClient or PnP

import { SPHttpClient, SPHttpClientResponse,ISPHttpClientOptions } from '@microsoft/sp-http';

HTML:

<input type="file" name="Attachment" style={{ paddingTop: '5px' }} id="FileAttachment"></input>

JS:

let file = (document.querySelector("#FileAttachment") as HTMLInputElement).files[0];        

          if (file) { 

              let spOpts : ISPHttpClientOptions  = {

                headers: {

                  "Accept": "application/json",

                  "Content-Type": "application/json"

                },

                body: file       

              };

              var url = this.props.siteURL + `/_api/web/lists(guid'` + Taskitem.ParentListID + `')/items` + `('` + Taskitem.ParentItemID + `')` + `/AttachmentFiles/add(FileName='` + file.name +`')`;

              this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {

                console.log(`Status code: ${response.status}`);

                console.log(`Status text: ${response.statusText}`);

                if(Number(`${response.status}`) >300)

                {

                  alert('Error Uploading file, Try again or contact IT');

                  this._closeDialog();

                  return;

                }

                response.json().then((responseJSON: JSON) => {

                  console.log(responseJSON);                 

                });

              });            

          }

        

     
If you want to use pnp then below code can be used:

         var item = sp.web.lists.getById(Taskitem.ParentListID).items.getById(Taskitem.ParentItemID);
             item.attachmentFiles.add(file.name, file).then(v => {
                    //console.log('Check');
             });

Update list id and item id accordingly.

I have tested uploading 10MB files and it uploaded with in couple of seconds.

Happy Coding!