Pnp-sites-core: Unable to provision a QuickLinks modern web part with content

[wobba]

Category

[x] Bug

Environment

[x] Office 365 / SharePoint Online

Expected or Desired Behavior

When saving a template from a modern site which has a QuickLinks web parts on the page with content, and applying the template, I expect the links added to show.

Observed Behavior

When applying a template saved with Pages/PageContents handlers, the quick links web part is added, but the links are not rendered - even though they appear to be present in the JsonControlData.

Steps to Reproduce

Edit for example the home page on a Group team site. Remove all web parts and add a quick links web part. Then add one link and save the page.

Extract a template from the site with Get-PnPProvisioningTemplate -Out .\home_page.xml -Handlers PageContents,Pages. Change overwrite from false to true in the template, then run Apply-PnPProvisioningTemplate -Path .\home_page.xml.

The page will now be blank. If you edit the page you see the web part, but with no links.

[chrisobriensp]

I'm also struggling to provision this web part. I've tried several approaches, including:

• setting the JsonControlData to a value obtained from an existing, configured control on the page (also tried various flavours of cleaning this up)
• using both PnP XML and the PnP ClientSidePage API to set JsonControlData
• attempting to set Properties rather than PropertiesJson

No joy so far. Any ideas at all @jansenbe?

Thanks for any help :)

[jansenbe]

Seems like the web part is not storing the actual links in it's JSON properties...will need to investigate this one.

[LudwigVanGysel]

I would like this too so I can provision a web part with predefined links using CSOM. The properties are indeed not stored in the "Properties" but in the "WebPartData" which has only a getter and not a setter.

[zplume]

Hi,

Same issue here.

I almost got this working, but not quite.

The following process fails to add Quick Links items:

1. Create a modern page via CSOM/PnP
2. Add a Quick Links web part to the page via CSOM/PnP
3. Use CSOM/PnP to add "items" to the Quick Links web part Properties (using reflection to also update the private ClientSideWebPart.htmlPropertiesData property on the quick links web part - example code/description here: https://gist.github.com/zplume/ca292d0f03451b285753e681514d182c).

The following process allows me to add Quick Links items:

1. Create a modern page via CSOM/PnP
2. Add a Quick Links web part to the page via CSOM/PnP
3. Edit and 'publish' the page via the browser
4. Use CSOM/PnP to add items to the Quick Links web part Properties (again using reflection to also set the ClientSideWebPart.htmlPropertiesData property)

Unfortunately the 'edit/publish in the browser' workaround is not a viable solution for my client - we need to automate modern home page creation for several thousand existing site collections (migration from classic pages with Promoted Links) and for all new sites (again automated creation).

Any help would be much appreciated.

Thanks!

[zplume]

Thanks to some PnP updates and discussion here...
https://www.youtube.com/watch?v=axgAhVkWb34

...and picking through the updated OfficeDev PnP code here...
https://github.com/SharePoint/PnP-Sites-Core/blob/62d3a007ea4f52d4715ce57928928ebe0e0b06b7/Core/OfficeDevPnP.Core/Pages/ClientSidePageControls.cs

...I've finally got this working!

I've updated my example code:
https://gist.github.com/zplume/ca292d0f03451b285753e681514d182c

Cheers @jansenbe!

[jansenbe]

Nice one, thanks for sharing. To further improve the experience one of the things I've been considering is creating classes per web part (e.g. a QuickLinksWebPart or ImageWebPart) inheriting from the ClientSideWebPart class and in there one could add logic that will generate the needed JSON. So adding a method "AddImage" to the web part would then generate the correct JSON (or even upload the image if needed). Obviously a lot of work and still requires some thinking, but wanted to check your thoughts on this?

[zplume]

@jansenbe that would be a great help!

Thanks again

[tomjan7]

I have successfully used it to add quick links with layoutId = "FilmStrip"
When I try to use it with layoutId = "CompactCard" I am not able to make the link icon appear (apart from that it works).
It seems that in this case the CompactImageInfo should contain more information. I tried specyfying imageUrl inside compactImageInfo but it is still not rendering the image
Do you have a working sample with layoutId = "CompactCard"?

[ndl7]

Did anyone had any luck creating a new Quick Links web part with PnP PowerShell (Add-PnPClientSideWebPart)?

[jansenbe]

The page API does support adding quick link web part, it's a matter of correctly defining the json properties. Would recommend configuring the web part in workbench and then copy the json properties from there. Since PnP PS is simply calling the page API this should work as well.

[robbert-vanandel]

I too am unable to add the web part. I've done all manner of combination of properties, including using the full set of properties.

First try

$options = @{
        "items"=@(
            @{"sourceItem"=@{"url"="https://teams.microsoft.com";"itemType"=2;"fileExtension"="";"progId"=""};"thumbnailType"=3;"id"=2},
            @{"sourceItem"=@{"url"="https://mytenant.sharepoint.com/sites/eng";"itemType"=2;"fileExtension"="";"progId"=""};"thumbnailType"=3;"id"=1}
        );
        "isMigrated"=$true;
        "layoutId"="CompactCard";
        "shouldShowThumbnail"=$true;
        "deprecatedItems"=@();
        "hideWebPartWhenEmpty"=$true;
        "dataProviderId"="QuickLinks";
        "webId"=$web.Id;
    }

That didn't work. I just puts two blank links on the quick links that eventually end up on the page. I've gradually added more and of the web part's properties from the site's workbench, to no avail.

The last attempt

$options =  @{
   "controlType" = 3;
   "displayMode" = 2;
   "id" = "0fd2d4fb-556f-4167-860c-0ac5f8022c6a";
   "webPartId" = "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd";
   "webPartData" = @{
      "id" = "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd";
      "instanceId" = "0fd2d4fb-556f-4167-860c-0ac5f8022c6a";
      "title" = "Quick links";
      "description" = "Add links to important documents and pages.";
      "serverProcessedContent" = @{
         "htmlStrings" = @{ };
         "searchablePlainTexts" = @{
            "title" = "";
            "items[0].title" = "Teams";
            "items[1].title" = "Site";
            "items[0].description" = "";
            "items[1].description" = "";
            "items[0].altText" = "";
            "items[1].altText" = "";
         };
         "imageSources" = @{
            "items[1].rawPreviewImageUrl" = "/_layouts/15/images/siteIcon.png";
         };
         "links" = @{
            "baseUrl" = "https = //mytenant.sharepoint.com/sites/WebPartTest2";
         };
         "componentDependencies" = @{
            "layoutComponentId" = "706e33c8-af37-4e7b-9d22-6e5694d92a6f";
         };
      };
      "dataVersion" = "2.0";
      "properties" = @{
         "items" = @(
            @{
               "sourceItem" = @{
                  "url" = "https = //teams.microsoft.com";
                  "itemType" = 2;
                  "fileExtension" = "";
                  "progId" = "";
               };
               "thumbnailType" = 3;
               "id" = 2;
            };
            @{
               "sourceItem" = @{
                  "url" = "https = //mytenant.sharepoint.com/sites/eng";
                  "itemType" = 2;
                  "fileExtension" = "";
                  "progId" = "";
               };
               "thumbnailType" = 3;
               "id" = 1;
            }
         );
         "isMigrated" = $true;
         "layoutId" = "CompactCard";
         "shouldShowThumbnail" = $true;
         "deprecatedItems" = @();
         "hideWebPartWhenEmpty" = $true;
         "dataProviderId" = "QuickLinks";
         "webId" = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
         "siteId" = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
      }
   }
};
@{
   "displayMode" = 2;     
}

This last attempt leaves me with an empty Quick Links web part with a message Nothing to show here.

[prawnz]

After dissecting some information, it seems like the PnP Code is pulling some wrong fields..
Here are my findings

1. WIthin searchablePlainTexts , items[0].altText should be items[0].pictureAltText
2. If you need images, this is what I used
   "properties":{ "items":[ { "thumbnailType":1, "id":0, "renderInfo":{ "imageUrl":"{sitecollection}/siteassets/placeholder.png", "imageFit":2, "forceStandardImageSize":false, "isFetching":false } }]

Hope this helps someone or everyone.

@jansenbe and @erwinvanhunen Are you able to verify and check if the provisioning get-template rendering the right fields or not.

[jansenbe]

Yesterday I fixed an issue around dataVersion handling: essentially in my scenario an extracted page with quicklinks did not result in an working quicklinks after being applied to another site. Root cause was that the pages API was not correctly handling the dataversion and wrongly used version 1.0 while the quicklinks data model currently is at version 2.0. With this change I was able to export/import quicklinks web parts without an issue...so would recommend checking the current dev build to see if that fixes things for you.

[WhereCodeGoesToDie]

@jansenbe I am using the August version of PnP Powershell and I am still unable to read out or add a link to the Quick Links web part. Is this now fixed? I am using it within a Runbook. Thanks

[jansenbe]

Nothing really changed and quicklinks, like any other web part, has been working fine. The key thing to remember is to take all web part properties when you configure your quicklinks web part. What I typically do is configure it via WorkBench, take the full properties JSON and then ensure that needed guids and urls are replaced with the values for my target site. WHen you leave these fields empty or assume that the webpart will "complete" the data then often that's not the case.

[jansenbe]

Closing this issue...feel free to re-open if you still feel this is blocking you.