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.
- This is important. Click on the option, Web part data, on the top left menu bar.
- This will launch the web part JSON in the modal with our configuration. Copy and save the same.
Create Quick links web part
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.
The web part properties can be classified into the following crucial values:
| Property | Description |
|---|---|
| baseUrl | Site URL |
| searchablePlainTexts | Name of the web part as well as links |
| imageSources | Image source, if used, to appear against each link |
| links | URL of each link |
| dataVersion | At 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.
Piyush K Singh 
I would like to open an (or launch an application) exe reside on the local computer while clicking on
Quick link webpart on modern communication site. Can you suggest how to launch an application?
LikeLike