spfx-demos

This is a sample project with different web parts showing different capabilities.

Please follow my blog Knowledge Share for detailed explanation and concepts used.

Preview

demo1 - Using DateTime control PropertyFieldCollectionData Property Pane Control

demo2 - Using FilePicker and FileTypeIcon control

demo3 - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data

demo4 - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data

pivotSample - Office UI Fabric react Pivot with different variations.

uniteGallery

React Custom Hooks

Toastr

MSGraph API

PnPLogging

PnPStorage

PnPCaching

HelloMGT

MGT-Person

MGT-Person-Card

Solution

Webparts	Description
demo1	Usage of PropertyFieldCollectionData pane control with DateTimePicker control. Click here for more info
demo2	Using FilePicker and FileTypeIcon to upload the file to the list item as an attachment. Click here for more info
demo3	Using DetailsList and PropertyFieldCodeEditor to display the JSON data from the webpart properties in the DetailsList. Click here for more info
demo4	Using DetailsList and PropertyFieldCodeEditor to display the CSV data from the webpart properties in the DetailsList. Click here for more info
reactContextDemo	Click here for more info
pivotSample	Click here for more info
uniteGallerySample	Click here for more info
React Custom Hooks	Click here for more info
ToastrSample	Click here for more info
MSGraphAPISample	Click here for more info
PnPLogging	Click here for more info
PnPStorage	Click here for more info
PnPCaching	Click here for more info
HelloMGT	Click here for more info
MGTPerson	Click here for more info
MGTPersonCard	Click here for more info
MSGraphAPIBatching	Click here for more info

Building the code

git clone the repo
npm i
npm i -g gulp
gulp

This package produces the following:

• lib/* - intermediate-stage commonjs build artifacts
• dist/* - the bundled script, along with other resources
• deploy/* - all resources which should be uploaded to a CDN.

Build options

gulp clean - TODO gulp test - TODO gulp serve - TODO gulp bundle - TODO gulp package-solution - TODO