SharePoint Modern Framework

2019-05-15 : BY CLICK2CLOUD-BLOG

SharePoint Modern Webpart:

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:

Event Webpart:

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.


Exec Assets Webpart:

This web-part is used to maintain the Click2Cloud Executives private documents for their personal work.


Calendar Webpart:

In this web-part, users can check their upcoming events and having a feature to add events in outlook calendar


Permission Webpart:

In this web-part, Executive can grant or discard permission of the Click2Cloud user for the event.


Search Webpart:

This web-part is very useful to search documents from all Public and Private folders with respective users.


How to create a webpart in project?

Please see the below example to create the webpart using ReactJS typescript, let see how to create ‘Event’ webpart by using the following command.

  1. Create a new project directory in your favorite location.

md <<YourProjectName>>

  1. Go to the project directory.

cd <<YourProjectName>>

  1. Create a new webpart as ‘Event’ in <<YourProjectName>> solution by running the following command.

yo @microsoft/sharepoint

  1. When prompted:
  • Accept the default <<YourProjectName>>as your solution name, and then select Enter.
  • Select SharePoint Online only (latest) and select Enter.
  • Select Use the current folderfor where to place the files.
  • Select to allow solution to be deployed to all sites immediately.
  • Select Non the question if solution contains unique permissions.
  • Select Webpartas the client-side component type to be created.
  • Accept the default Event as your webpart name, and then select Enter.
  • Accept the default Event descriptionas your webpart description, and then select Enter.
  • Accept the default No JavaScript web frameworkas the framework you would like to use, and then select Enter.

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.