Quick Links not visible when created using TypeScript/PnP

%3CLINGO-SUB%20id%3D%22lingo-sub-297378%22%20slang%3D%22en-US%22%3EQuick%20Links%20not%20visible%20when%20created%20using%20TypeScript%2FPnP%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-297378%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%20all%3C%2FP%3E%3CP%3EI'm%20using%20TypeScript%20and%20the%20%40pnp%2Fsp%20library%20to%20create%20a%20modern%20page%20and%20add%20a%20Quick%20Links%20webpart%20to%20it.%20The%20page%20is%20created%2C%20but%20it's%20empty.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3ETo%20get%20the%20json%2C%20I%20added%20a%20Quick%20Links%20webpart%20to%20the%20workbench%20page%20and%20copied%20the%20info%20from%20Web%20part%20data.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20my%20try%20(I%20cut%20the%20json%20a%20bit%20short%20in%20this%20post)%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Econst%20page%20%3D%20await%20sp.web.addClientSidePage(%22My%20page.aspx%22)%3B%3CBR%20%2F%3Evar%20json%20%3D%20%60%7B%22controlType%22%3A3%2C%22displayMode%22%3A2%2C%22id%22%3A%2215a5cbef-6e4c-40d4-8d53...%7D%60%3B%20%2F%2F%20etc%3CBR%20%2F%3Econst%20typeHash%20%3D%20%7Bjson%7D%3B%3CBR%20%2F%3Epage.addSection().addControl(new%20ClientSideWebpart(%22some%20title%22%2C%22some%20description%22%2C%20typeHash))%3B%3CBR%20%2F%3Eawait%20page.save()%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20page%20is%20created%20nicely%2C%20but%20it's%20empty.%20Can%20anyone%20please%20point%20me%20in%20the%20right%20direction.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-298172%22%20slang%3D%22en-US%22%3ERe%3A%20Quick%20Links%20not%20visible%20when%20created%20using%20TypeScript%2FPnP%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-298172%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20mean%20first%20create%20the%20new%20page%2C%20then%20load%20it%20again%20and%20add%20the%20Quick%20Links%3F%20Ok%2C%20I'll%20give%20it%20a%20try.%20Thanks%20for%20your%20answer.%3C%2FP%3E%3CP%3E%2FPapi%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-297759%22%20slang%3D%22en-US%22%3ERe%3A%20Quick%20Links%20not%20visible%20when%20created%20using%20TypeScript%2FPnP%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-297759%22%20slang%3D%22en-US%22%3E%3CP%3EIt's%20not%20exactly%20the%20same%20way%2C%20but%20I'm%20provisioning%20a%20%22Quick%20Links%22%20web%20part%20as%20part%20of%20a%20Site%20Provisioning%20script%20written%20in%20PnP.%20What%20I%20found%20was%26nbsp%3BI%20had%20to%20configure%20the%20web%20part%20and%20add%20the%20links%20after%20the%20initial%20web%20part%20had%20been%20created%20and%20applied.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3E%24quicklinkswebpart%20%3D%20Add-PnPClientSideWebPart%20-Page%20%24page%20-DefaultWebPartType%20%22QuickLinks%22%20-Section%202%20-Column%201%20%7C%20Select%20-ExpandProperty%20InstanceId%3CBR%20%2F%3E%3CBR%20%2F%3E%23GET%20VARIABLES%20FOR%20JSON%20PROPERTIES%3CBR%20%2F%3E%24jsonsite%20%3D%20Get-PnPSite%3CBR%20%2F%3E%24jsonsiteurl%20%3D%20%24jsonsite.url%3CBR%20%2F%3E%24jsongetwebid%20%3D%20Get-PnPWeb%20%7C%20Select%20-ExpandProperty%20id%3CBR%20%2F%3E%24jsonwebid%20%3D%20%24jsongetwebid.guid%3CBR%20%2F%3E%24getquicklinks%20%3D%20Get-PnPClientSidePage%20-Identity%20%24pagename%20%7C%20Select%20-ExpandProperty%20Controls%20%7C%20Where-Object%20%7B%24_.Title%20-eq%20%22Quick%20links%22%7D%20%7C%20Select%20-ExpandProperty%20InstanceId%3C%2FP%3E%3CP%3E%23SET%20JSON%20PROPERTIES%20FOR%20QUICK%20LINKS%3CBR%20%2F%3E%24jsonProps%20%3D%20%40%22%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22controlType%22%3A3%2C%3CBR%20%2F%3E%22displayMode%22%3A2%2C%3CBR%20%2F%3E%22id%22%3A%22%24getquicklinks%22%2C%3CBR%20%2F%3E%22position%22%3A%7B%3CBR%20%2F%3E%22zoneIndex%22%3A1%2C%3CBR%20%2F%3E%22sectionIndex%22%3A1%2C%3CBR%20%2F%3E%22controlIndex%22%3A1%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22webPartId%22%3A%22c70391ea-0b10-4ee9-b2b4-006d3fcad0cd%22%2C%3CBR%20%2F%3E%22webPartData%22%3A%7B%3CBR%20%2F%3E%22id%22%3A%22c70391ea-0b10-4ee9-b2b4-006d3fcad0cd%22%2C%3CBR%20%2F%3E%22instanceId%22%3A%22%24getquicklinks%22%2C%3CBR%20%2F%3E%22title%22%3A%22Quick%20links%22%2C%3CBR%20%2F%3E%22description%22%3A%22Add%20links%20to%20important%20documents%20and%20pages.%22%2C%3CBR%20%2F%3E%22serverProcessedContent%22%3A%7B%3CBR%20%2F%3E%22htmlStrings%22%3A%7B%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22searchablePlainTexts%22%3A%7B%3CBR%20%2F%3E%22title%22%3A%22Quick%20links%22%2C%3CBR%20%2F%3E%22items%5B0%5D.title%22%3A%22Link%201%22%2C%3CBR%20%2F%3E%22items%5B1%5D.title%22%3A%22Link%202%22%2C%3CBR%20%2F%3E%22items%5B2%5D.title%22%3A%22Link%203%22%2C%3CBR%20%2F%3E%22items%5B0%5D.description%22%3A%22%22%2C%3CBR%20%2F%3E%22items%5B1%5D.description%22%3A%22%22%2C%3CBR%20%2F%3E%22items%5B2%5D.description%22%3A%22%22%2C%3CBR%20%2F%3E%22items%5B0%5D.altText%22%3A%22%22%2C%3CBR%20%2F%3E%22items%5B1%5D.altText%22%3A%22%22%2C%3CBR%20%2F%3E%22items%5B2%5D.altText%22%3A%22%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22imageSources%22%3A%7B%3CBR%20%2F%3E%22items%5B1%5D.rawPreviewImageUrl%22%3A%22%3CA%20href%3D%22https%3A%2F%2Fs.yimg.com%2Fdh%2Fap%2Fdefault%2F130909%2Fy_200_a.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fs.yimg.com%2Fdh%2Fap%2Fdefault%2F130909%2Fy_200_a.png%3C%2FA%3E%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22links%22%3A%7B%3CBR%20%2F%3E%22baseUrl%22%3A%22%24siteurl%22%2C%3CBR%20%2F%3E%22items%5B0%5D.sourceItem.url%22%3A%22%3CA%20href%3D%22https%3A%2F%2Fsomelink.com%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsomelink.com%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22items%5B1%5D.sourceItem.url%22%3A%22%3CA%20href%3D%22https%3A%2F%2Fsomeotherlink.com%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsomeotherlink.com%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22items%5B2%5D.sourceItem.url%22%3A%22%3CA%20href%3D%22https%3A%2F%2Fanotherlink.com%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fanotherlink.com%3C%2FA%3E%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22componentDependencies%22%3A%7B%3CBR%20%2F%3E%22layoutComponentId%22%3A%22706e33c8-af37-4e7b-9d22-6e5694d92a6f%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22dataVersion%22%3A%222.1%22%2C%3CBR%20%2F%3E%22properties%22%3A%7B%3CBR%20%2F%3E%22items%22%3A%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22sourceItem%22%3A%7B%3CBR%20%2F%3E%22itemType%22%3A2%2C%3CBR%20%2F%3E%22fileExtension%22%3A%22%22%2C%3CBR%20%2F%3E%22progId%22%3A%22%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22thumbnailType%22%3A3%2C%3CBR%20%2F%3E%22id%22%3A3%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22sourceItem%22%3A%7B%3CBR%20%2F%3E%22itemType%22%3A2%2C%3CBR%20%2F%3E%22fileExtension%22%3A%22%22%2C%3CBR%20%2F%3E%22progId%22%3A%22%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22thumbnailType%22%3A3%2C%3CBR%20%2F%3E%22id%22%3A2%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22sourceItem%22%3A%7B%3CBR%20%2F%3E%22itemType%22%3A2%2C%3CBR%20%2F%3E%22fileExtension%22%3A%22%22%2C%3CBR%20%2F%3E%22progId%22%3A%22%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22thumbnailType%22%3A3%2C%3CBR%20%2F%3E%22id%22%3A1%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%2C%3CBR%20%2F%3E%22isMigrated%22%3Atrue%2C%3CBR%20%2F%3E%22layoutId%22%3A%22CompactCard%22%2C%3CBR%20%2F%3E%22shouldShowThumbnail%22%3Atrue%2C%3CBR%20%2F%3E%22buttonLayoutOptions%22%3A%7B%3CBR%20%2F%3E%22showDescription%22%3Afalse%2C%3CBR%20%2F%3E%22buttonTreatment%22%3A2%2C%3CBR%20%2F%3E%22iconPositionType%22%3A2%2C%3CBR%20%2F%3E%22textAlignmentVertical%22%3A2%2C%3CBR%20%2F%3E%22textAlignmentHorizontal%22%3A2%2C%3CBR%20%2F%3E%22linesOfText%22%3A2%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22listLayoutOptions%22%3A%7B%3CBR%20%2F%3E%22showDescription%22%3Afalse%2C%3CBR%20%2F%3E%22showIcon%22%3Atrue%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22waffleLayoutOptions%22%3A%7B%3CBR%20%2F%3E%22iconSize%22%3A1%2C%3CBR%20%2F%3E%22onlyShowThumbnail%22%3Afalse%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22hideWebPartWhenEmpty%22%3Atrue%2C%3CBR%20%2F%3E%22dataProviderId%22%3A%22QuickLinks%22%2C%3CBR%20%2F%3E%22webId%22%3A%22%24jsonwebid%22%2C%3CBR%20%2F%3E%22siteId%22%3A%22%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%22%40%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

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.

 

2 Replies

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