Forum Discussion
Quick Links not visible when created using TypeScript/PnP
Hi, all
I'm using TypeScript and the @pnp/sp library to create a modern page and add a Quick Links webpart to it. The page is created, but it's empty.
To get the json, I added a Quick Links webpart to the workbench page and copied the info from Web part data.
This is my try (I cut the json a bit short in this post):
const page = await sp.web.addClientSidePage("My page.aspx");
var json = `{"controlType":3,"displayMode":2,"id":"15a5cbef-6e4c-40d4-8d53...}`; // etc
const typeHash = {json};
page.addSection().addControl(new ClientSideWebpart("some title","some description", typeHash));
await page.save();
The page is created nicely, but it's empty. Can anyone please point me in the right direction.
It's not exactly the same way, but I'm provisioning a "Quick Links" web part as part of a Site Provisioning script written in PnP. What I found was I had to configure the web part and add the links after the initial web part had been created and applied.
$quicklinkswebpart = Add-PnPClientSideWebPart -Page $page -DefaultWebPartType "QuickLinks" -Section 2 -Column 1 | Select -ExpandProperty InstanceId
#GET VARIABLES FOR JSON PROPERTIES
$jsonsite = Get-PnPSite
$jsonsiteurl = $jsonsite.url
$jsongetwebid = Get-PnPWeb | Select -ExpandProperty id
$jsonwebid = $jsongetwebid.guid
$getquicklinks = Get-PnPClientSidePage -Identity $pagename | Select -ExpandProperty Controls | Where-Object {$_.Title -eq "Quick links"} | Select -ExpandProperty InstanceId#SET JSON PROPERTIES FOR QUICK LINKS
$jsonProps = @"
{
"controlType":3,
"displayMode":2,
"id":"$getquicklinks",
"position":{
"zoneIndex":1,
"sectionIndex":1,
"controlIndex":1
},
"webPartId":"c70391ea-0b10-4ee9-b2b4-006d3fcad0cd",
"webPartData":{
"id":"c70391ea-0b10-4ee9-b2b4-006d3fcad0cd",
"instanceId":"$getquicklinks",
"title":"Quick links",
"description":"Add links to important documents and pages.",
"serverProcessedContent":{
"htmlStrings":{
},
"searchablePlainTexts":{
"title":"Quick links",
"items[0].title":"Link 1",
"items[1].title":"Link 2",
"items[2].title":"Link 3",
"items[0].description":"",
"items[1].description":"",
"items[2].description":"",
"items[0].altText":"",
"items[1].altText":"",
"items[2].altText":""
},
"imageSources":{
"items[1].rawPreviewImageUrl":"https://s.yimg.com/dh/ap/default/130909/y_200_a.png"
},
"links":{
"baseUrl":"$siteurl",
"items[0].sourceItem.url":"https://somelink.com",
"items[1].sourceItem.url":"https://someotherlink.com",
"items[2].sourceItem.url":"https://anotherlink.com"
},
"componentDependencies":{
"layoutComponentId":"706e33c8-af37-4e7b-9d22-6e5694d92a6f"
}
},
"dataVersion":"2.1",
"properties":{
"items":[
{
"sourceItem":{
"itemType":2,
"fileExtension":"",
"progId":""
},
"thumbnailType":3,
"id":3
},
{
"sourceItem":{
"itemType":2,
"fileExtension":"",
"progId":""
},
"thumbnailType":3,
"id":2
},
{
"sourceItem":{
"itemType":2,
"fileExtension":"",
"progId":""
},
"thumbnailType":3,
"id":1
}
],
"isMigrated":true,
"layoutId":"CompactCard",
"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":"$jsonwebid",
"siteId":""
}
}
}
"@You mean first create the new page, then load it again and add the Quick Links? Ok, I'll give it a try. Thanks for your answer.
/Papi
