Create a Quick Links web part with items defined in a datasource

Summary

This script will enable you to create a Quick Links web part where the items are defined in some kind of data source, in this case a SharePoint list. However it could just as well be a csv or similar.

The script contains both the setup for the data source (SP List) as well as the Quick Links creator.

Please be advised that this script only enables you to specify the title, the URL and the icon for each item/Quick link.

PnP PowerShell

Implementation

• Open VS Code
• Create a new file
• Copy a script below

• PnP PowerShell

function Create-QuickLinkList ($siteUrl , $ListName)
{
    $connection = Connect-PnPOnline -Url $siteUrl -ReturnConnection -Interactive
    try
    {
      $list = Get-PnPList -Identity $ListName
      if(-not $list)
      {
        $list = New-PnPList -Title $ListName -Template  GenericList
        Add-PnPField -List $list -Type Text -InternalName "Url" -DisplayName "Url" -AddToDefaultView -Required
        Add-PnPField -List $list -Type Text -InternalName "Iconname" -DisplayName "Iconname"  -AddToDefaultView -Required
        Add-PnPField -List $list -Type Text -InternalName "TemplateName" -DisplayName "TemplateName"  -AddToDefaultView -Required

        Add-PnPListItem -List $list -Values @{"Title"= "test";"Url"= "https://github.com/pnp/script-samples"; "Iconname"= "internetsharing";"TemplateName"= "Template1"} -Connection $connection
        
      }
    }
    catch
    {
        throw $_Exception
    }
    finally 
    {
      Disconnect-PnPOnline -Connection $connection  
    }
}
$siteUrl = "https://YourTenantName.sharepoint.com/sites/QuickLinksTest"
$ListName = "QuickLinkDefinitions"
Create-QuickLinkList -siteUrl $siteUrl -ListName $ListName

function Create-PropertiesJson ($webparttitle, $QuickLinksitems)
{
  $base = '{"controlType":3,"id":"00000000-0000-0000-0000-000000000000","position":{"zoneIndex":1,"sectionIndex":1,"controlIndex":1,"layoutIndex":1},"webPartId":"00000000-0000-0000-0000-000000000000","webPartData":{"id":"00000000-0000-0000-0000-000000000000","instanceId":"00000000-0000-0000-0000-000000000000","title":"Quick links","description":"Add links to important documents and pages.",'
  $imageSources = '"imageSources":{},'
  $componentDependencies = '"componentDependencies":{"layoutComponentId":"706e33c8-af37-4e7b-9d22-6e5694d92a6f"}},"dataVersion":"2.2",'
  $end = '"hideWebPartWhenEmpty":true,"dataProviderId":"QuickLinks","webId":"00000000-0000-0000-0000-000000000000","siteId":"00000000-0000-0000-0000-000000000000"}},"emphasis":{},"reservedHeight":164,"reservedWidth":744}'
  
  $links = '"links":{"baseUrl":"",'
  $serverProcessedContent = '"serverProcessedContent":{"htmlStrings":{},"searchablePlainTexts":{"title":"' + $webparttitle + '",'
  $properties = '"properties":{"items":['
  $idx = 0
  foreach($QuickLinksitem in $QuickLinksitems)
  {
    $links+= '"items['+$idx+'].sourceItem.url":"'+ $QuickLinksitem["Url"]+'"'
    $serverProcessedContent += '"items['+ $idx +'].title":"'+ $QuickLinksitem["Title"]+ '"'
    $properties += '{"sourceItem":{"itemType":2,"fileExtension":"","progId":""},"thumbnailType":2,"id":1,"fabricReactIcon":{"iconName":"' + $QuickLinksitem["Iconname"]+'"}}'
    if($idx -lt $QuickLinksitems.Count-1)
    {
      $links+=','
      $serverProcessedContent += ','
      $properties +=  ','
    }
    $idx++
  
  }
  $links += '},'
  $serverProcessedContent +=  '},' 
  $properties += '],"isMigrated":true,"layoutId":"Button","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},'
  
  $jsonPropsQuickLinks = $base + $serverProcessedContent + $imageSources + $links + $componentDependencies + $properties + $end
  return $jsonPropsQuickLinks  
  
}
#Connect to the site where the refence list is placed
$portalConn = Connect-PnPOnline -Url "https://YourTenantName.sharepoint.com/sites/QuickLinksTest" -Interactive -ReturnConnection
$QuickLinksitems = Get-PnPListItem -List $ListName -Connection $portalConn | Where-Object {$_["TemplateName"] -eq "Template1"} 

$jsonPropsQuickLinks = Create-PropertiesJson -webparttitle "Vejledninger" -QuickLinksitems $QuickLinksitems

#Connect to the site where the Quick Links web part should be "deployed"
$destinationurl = "https://YourTenantName.sharepoint.com/sites/QuickLinksTest"
$destinationconn = Connect-PnPOnline -Url $destinationurl -Interactive -ReturnConnection
$web = Get-PnPWeb -Connection $destinationconn
$targetpage = Get-PnPPage -Web  $web -Identity "home.aspx" -Connection $destinationconn
 

Add-PnPPageWebPart -Page $targetpage -DefaultWebPartType "QuickLinks" -WebPartProperties $jsonPropsQuickLinks -Connection $portalConn

Check out the PnP PowerShell to learn more at: https://aka.ms/pnp/powershell

The way you login into PnP PowerShell has changed please read PnP Management Shell EntraID app is deleted : what should I do ?

Contributors

Author(s)
Kasper Larsen

Disclaimer

THESE SAMPLES ARE PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.