SharePoint Modern Framework

2019-05-15 : BY CLICK2CLOUD-BLOG
SharePoint Modern Framework

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.

Recent Posts

Get In Touch With

Our Offices

location Plot No. 21, Premier Technology Group, Third Floor, I.T Park Road, Parsodi, Nagpur - 440022(MS)

phone0712-297 0257 / 0712-297 1228 / +91-766 690 5354

location2549, 152nd NE Avenue, NE, Redmond, WA - 98052

phone+1 425 748 9666

location No.401, Unit 8, Building 8, Area 5, HeYiDongLi, Fengtai District, Beijing, China, 100076

phone+86 173 4656 0417

location2806 Bloor Street West, Toronto, ON M5S 0B1

phone+1 425 748 9666

locationOffice No. 121-122Cowork06, Building Number 67 - Regus Doha Dring Building, Street 250 - DRing Road, Zone 45 - Old Airport,PO Box 32522, Doha, Qatar

phone+974 4423 1210

location7 Temasek Boulevard, #12-07, Suntec Tower One, Singapore 038987

locationNo 5, 17/f, strand 50 50 bonham strand, Sheung wan, Hong Kong