In this blog I have create a simplest react project with complex form which can save others time to use in the project. Project is uploaded on Git, it is a SharePoint framework web part with react framework. In this project, a forms with DropDown, Datetime picker, Upload File to SharePoint, Input Fields, HtmlTextEdtir,CheckBoxes which will submit data to SharePoint List using pnp. Below are components
(1) react-select to bind with SharePoint List
(2) react-datetime for Date Time on the Form
(3) react-file-reader to Upload File to SharePoint Document Library
(4) react-checkbox-group for Checkbox in the Form
(5) sp-pnp-js to Upload file and submit data to List.
(6) react-medium-editor is used for rich textbox in the form.
Need to install below external compoenent.
react-file-reader (for Uploading Files)
react-medium-editor (for Rich Textbox)
react-datetime (for DateTime Calender)
react-checkbox-group (for checkbox group)
Have a look
Upload button will upload the file to the SharePoint document Library, I used pnp framework to upload, which allow us to update metadata easily.
Now code will insert item to SharePoint List on button click.It will upload file to My Docs in the Same site and insert to list with unique Guid, to maintain relationship between List and document library.
Microsoft SharePoint framework with all its limitation, but the awesome framework for SP developer. Recently I encounter a bit different requirement on SharePoint framework. To filter data of SP List using react-Switch and textbox. The code is uploaded to the Git hub Link.
To Learn about reactJs and reactes6 use this Link – Learn React Js es6 Link
I used Sharepoint rest API and react-switch to filter data on the list.
SharePoint Framework Switch Webpart
(1) Create project using yo @microsoft/SharePoint
(2) Create We part with react extension (by doing this it will create react as component)
(3) Pass SPHttpclient and Page URL as props to the component class.
(4) We will use Rest Call to List data
We office 365 with another intelligent feature with the name MyAnalytics which seems very impressive. It is free available with E5 subscription however for other we have to purchase.
MyAnalytics uses data from Office 365 to help people across your organization understand how they spend their time and discover opportunities to work smarter.
All data surfaced in MyAnalytics is private and available only to the end user.
The new “Trends” chart gives users a visual overview of how their work habits have changed over time. The “Your time investments” chart provides a network map that helps users visualize and prioritize their relationships.
Trends: find long-term trends in your work habits
Your time investments: visualize and strengthen your network
MyAnalytics now visualizes your network so that you can identify missing links, improve your relationships, and prioritize the time you spend with co-workers.
Additional Information – Portal Office
With all improvements and enhancements, another best feature has started to roll out from today in office 365.
The app launcher enables you to navigate across your services and apps in Office 365. we can can also pin up to three apps in navigation bar .
This makes those apps available instantly, from any Office 365 page or app.It will be more beneficial for the admin users.
SharePoint/PnP-PowerShell has provide a great efforts to minimize code and increase productivity in SharePoint Online Development.
Recently we have to remove bulk amount of user from SharePoint Group. We decided to go with pnp power shell script to do it. As per the document Link – Remove User From Group below is the code.
Remove-PnPUserFromGroup -LoginName <String>
PS:> Remove-PnPUserFromGroup -LoginName email@example.com -GroupName 'Marketing Site Members'
But above code didn't work.
Actually we have to provide the -LoginName string like "i:firstname.lastname@example.org"
and its work.Below is the working script.
Remove-PnPUserFromGroup -LoginName "i:email@example.com" -GroupName 'Document'
I am sharing the below power shell snippet to help my fellows to remove all items in a list in the SharePoint online. Often we need to delete items at once using power shell or through JS code. PNP Power shell make it more easier to complete our task. (hats off)
Copy and paste the below code, it will loop through to a list and remove the item. Change the List name as yours.
Connect-PnPOnline –Url https://*********************
$items =Get-PnPListItem -List “ListName” -PageSize 1000
foreach ($item in $items)
Remove-PnPListItem -List “ListName” -Identity $item.Id -Force
} #for each end
To install PNP Power shell check the PnP PowerShell overview.
#Sharing is caring