The SharePoint Framework (SPFx) is a page and webpart model that provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps on SharePoint.
In this blog, we will take the example of “Click2Cloud Executives Comm’s” solution for better understanding of SharePoint modern webpart solution.
“Click2Cloud Executives Comm’s” is a SharePoint Framework (SPFx) solution designed for the Click2Cloud Executive team. The solution allows the comms teams working for executives to manage events and have a location to share files throughout the development process. They used this solution to share the contents with other executives or teammates for discussion or contribution.
Five main custom web-parts in Executive Comm’s are listed below:
This web-part allow users to create Event. Event creator can maintain files in private and public folder. Event creator can keep the files in Public folder and these files can be shared with any user from organization. Files stored in Private folder can be access by Event creator and other Executives. Files can be drag and drop from physical location or from another library or another folder to ‘Public’ or ‘Private’ folder.
Also, event creator can provide read/write permission in file of Public folder to any specific user.
This web-part is used to maintain the Click2Cloud Executives private documents for their personal work.
In this web-part, users can check their upcoming events and having a feature to add events in outlook calendar
In this web-part, Executive can grant or discard permission of the Click2Cloud user for the event.
This web-part is very useful to search documents from all Public and Private folders with respective users.
Please see the below example to create the webpart using ReactJS typescript, let see how to create ‘Event’ webpart by using the following command.
Please find below screenshot for more details:
You can perform action specified from Step 2 of ‘How to create a webpart in project’ section for creation of other webparts.
In next blog, you will be learning how to build, deploy the package on SharePoint Modern site.