Add-PnPClientSideWebPart

Create Web Part in Modern SharePoint Online: PowerShell

Premise

In this post, I’ll create a new web part in modern SharePoint Online site using PnP PowerShell.

Solution

For the purpose of this post, I’ll be creating a Quick Link web part. In order to create a Quick Link or any web part, we require its WebPartProperties. WebPartProperties are the default configuration of your web part, when it is created. I’ll post my WebPartProperties below but, you can generate this property value using the SharePoint workbench. In case you are already aware of the process to generate this WebPartProperties, you can directly jump to the create web part section.

Generate WebPartProperties

  • Launch SharePoint Online workbench using the following URL,
{SiteURL}/_layouts/15/workbench.aspx
  • Add a Quick Link web part.
  • Configure the Quick links web parts in the page.
Quick links web part
Quick links web part
  • This is important. Click on the option, Web part data, on the top left menu bar.
Web part data
Web part data
  • This will launch the web part JSON in the modal with our configuration. Copy and save the same.
Web part data JSON
Web part data JSON

I’ll be using a PnP PowerShell cmdlet, Add-PnPClientSideWebPart, to create the web part. The point to remember is that, it accepts a parameter, WebPartProperties, which we copied earlier. This information is required to create your web part from a base configuration.

Connect-PnPOnline -Url "https://{tenant}.sharepoint.com/teams/TeamPiyushTest1"

Add-PnPClientSideWebPart -Page "Quick-Link-Web-Part" -DefaultWebPartType QuickLinks -WebPartProperties $jsonProps -Section 1 -Column 1 -Order 1

The variable, $jsonProps is defined below;

$jsonProps = @"
{
		"controlType": 3,
		"id": "4171e08d-8db5-4371-b416-925665c5e35c",
		"position": {
			"zoneIndex": 1,
			"sectionIndex": 1,
			"controlIndex": 1
		},
		"webPartId": "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd",
		"webPartData": {
			"id": "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd",
			"instanceId": "4171e08d-8db5-4371-b416-925665c5e35c",
			"title": "Quick links",
			"description": "Add links to important documents and pages.",
			"serverProcessedContent": {
				"htmlStrings": {},
				"searchablePlainTexts": {
					"title": "Microsoft Power Platform",
					"items[0].title": "PowerApps",
					"items[1].title": "Flow",
					"items[2].title": "Power BI",
					"items[0].description": "",
					"items[1].description": "",
					"items[2].description": "",
					"items[0].altText": "",
					"items[1].altText": "",
					"items[2].altText": ""
				},
				"imageSources": {
					"items[0].image.url": "/teams/TeamPiyushTest1/SiteAssets/SitePages/workbench/microsoftpowerapps-300x150.png",
					"items[1].image.url": "/teams/TeamPiyushTest1/SiteAssets/SitePages/workbench/FLOW1.png",
					"items[2].image.url": "/teams/TeamPiyushTest1/SiteAssets/SitePages/workbench/PowerBI1.png"
				},
				"links": {
					"baseUrl": "https://{tenantName}.sharepoint.com/teams/TeamPiyushTest1",
					"items[0].sourceItem.url": "https://make.powerapps.com",
					"items[1].sourceItem.url": "https://flow.microsoft.com",
					"items[2].sourceItem.url": "https://powerbi.microsoft.com"
				},
				"componentDependencies": {
					"layoutComponentId": "706e33c8-af37-4e7b-9d22-6e5694d92a6f"
				}
			},
			"dataVersion": "2.2",
			"properties": {
				"items": [{
						"sourceItem": {
							"itemType": 2,
							"fileExtension": "",
							"progId": ""
						},
						"thumbnailType": 1,
						"id": 3,
						"image": {
							"guids": {
								"listId": "f064475d-004f-49c4-8ba6-516922275d85",
								"uniqueId": "4cd04a82-2dfe-482b-b83e-424682fda780",
								"webId": "48843959-caf3-4641-9d0b-3f531a7ef640",
								"siteId": "b3bc8902-b3d9-4ad6-8827-114ffb0e1470"
							},
							"imageFit": 2
						}
					}, {
						"sourceItem": {
							"itemType": 2,
							"fileExtension": "",
							"progId": ""
						},
						"thumbnailType": 1,
						"id": 2,
						"image": {
							"guids": {
								"listId": "f064475d-004f-49c4-8ba6-516922275d85",
								"uniqueId": "4a03b7fc-0a96-438d-8910-c64e935f2786",
								"webId": "48843959-caf3-4641-9d0b-3f531a7ef640",
								"siteId": "b3bc8902-b3d9-4ad6-8827-114ffb0e1470"
							},
							"imageFit": 2
						}
					}, {
						"sourceItem": {
							"itemType": 2,
							"fileExtension": "",
							"progId": ""
						},
						"thumbnailType": 1,
						"id": 1,
						"image": {
							"guids": {
								"listId": "f064475d-004f-49c4-8ba6-516922275d85",
								"uniqueId": "0ee4f899-ff81-4e12-8a36-0321f76e8488",
								"webId": "48843959-caf3-4641-9d0b-3f531a7ef640",
								"siteId": "b3bc8902-b3d9-4ad6-8827-114ffb0e1470"
							},
							"imageFit": 2
						}
					}
				],
				"isMigrated": true,
				"layoutId": "Grid",
				"shouldShowThumbnail": true,
				"buttonLayoutOptions": {
					"showDescription": false,
					"buttonTreatment": 2,
					"iconPositionType": 2,
					"textAlignmentVertical": 2,
					"textAlignmentHorizontal": 2,
					"linesOfText": 2
				},
				"listLayoutOptions": {
					"showDescription": false,
					"showIcon": true
				},
				"waffleLayoutOptions": {
					"iconSize": 1,
					"onlyShowThumbnail": false
				},
				"hideWebPartWhenEmpty": true,
				"dataProviderId": "QuickLinks",
				"webId": "48843959-caf3-4641-9d0b-3f531a7ef640",
				"siteId": "b3bc8902-b3d9-4ad6-8827-114ffb0e1470",
				"pane_link_button": 0
			}
		},
		"emphasis": {},
		"reservedHeight": 296,
		"reservedWidth": 744
	}

The script will create a Quick link web part on the given page.

Quick link web part

The web part properties can be classified into the following crucial values:

PropertyDescription
baseUrlSite URL
searchablePlainTextsName of the web part as well as links
imageSourcesImage source, if used, to appear against each link
linksURL of each link
dataVersionAt the time of writing this post it was 2.2. It can differ in the future

The above properties are exclusively for quick links web part.


Key Takeaways

  • The example used here, is that of quick link web part. But, the same can be applied on any other web part as well.
  • The most important segment here is, WebPartProperties. This is the default configuration of the web part, to be created.
  • The JSON properties used here is formatted as Here-Strings. So, just ensure it’s correct formatting.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.