SharePoint Modern Webpart

04-Jun, 2019
click2cloud blogs- SharePoint Modern Webpart

In the last blogs, we have seen: What is SharePoint modern framework? How to create a webpart & webpart folder structure? How to build a custom web part to the local server and SharePoint modern site?

In this blog, we will see: How to package solution? Deploy your client-side webpart to App Catalog. Install solution on SharePoint Modern site and add the web part to the page.

To use client-side webparts on modern SharePoint server-side pages, you need to deploy and register the webpart with SharePoint. First, you need to package the webpart and then deploy the webpart package to App Catalog in SharePoint site. Let’s go through below steps which are required to add webpart in modern pages.

Package the webpart

  1. Open package-solution.json from the config folder.
  2. The package-solution.jsonfile defines the package metadata as shown in the following code:

Name: <<your solution name>>

ID: Unique and Auto-generated according to the webpart.

Version: <<project version>>

IncludeClientSideAssets: Add true if you want to include all assets in package solution.

ZippedPackage: Location where you want your package solution.

Office 365 Sharepoint-json-package-solution-location-Click2Cloud

3. In the console window, enter the following command to package your client-side solution that contains the webpart:

gulp package-solution

The command creates the package in the location mentioned in <<zippedPackage>>

Deploy the package to App Catalog

  1. Go to <<your site’s>> App Catalog. Every O365 tenant has one App Catalog site collection.
  2. Upload or drag and drop the <<.sppkg>> file generated during package solution, to the app catalog.

Office 365 Sharepoint-apps for sharepoint-Click2Cloud

3. Above step deploys the client-side solution package. Because this is a full trust client-side solution, SharePoint displays a dialog and asks you to trust the client-side solution to deploy

Office 365 Sharepoint-deploy-Click2Cloud

Select Deploy

Install the client-side solution on your site

  1. Go to your developer site collection or site collection which you want to use for testing.
  2. Select the gears icon on the top nav bar on the right, and then select Add an app to go to your Apps page.
  3. In the Search box, enter <<your solution name>>, and select Enter to filter your apps.

Office 365 Sharepoint-site-content-Click2Cloud

Select the <<your solution name>> to install the app on the site.

The client-side solution and the web part are installed on your developer site.

The Site Contents page shows you the installation status of your client-side solution. Make sure the installation is complete before going to the next step.

Add the webpart to modern page

  1. In your browser, go to your site where the solution was just installed
  2. Select the gears icon in the top nav bar on the right, and then select Add a page.
  3. Edit the page.
  4. Open the web part picker and select your webpart.

Office 365 Sharepoint-add-page -Click2Cloud

5. On the toolbar, select Save and close to save the page.

Congratulations! You have deployed a client-side webpart to a modern SharePoint page.

Recent Posts

Get In Touch With Us

location Nagpur

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

location Hyderabad

B-wing 1006, The Platina, Gachibowli, Hyderabad - 500032. | +91 7263985000 

location Bhilai

P-n-P #02, Mangal Bhavan, Nehru Nagar (E), STPI, Bhilai, Chhattisgarh 490020. | +91 7263985000 

location Click2Cloud Inc. , Suite #05-143, 800 Bellevue Way NE Bellevue, WA, 98004, USA.


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