Provisioned News web part is not filtering correctly base on the configured page property filter

[bogeorge]

Category

[ X ] Bug
[ ] Enhancement

Environment

[ X ] Office 365 / SharePoint Online
[ ] SharePoint 2016
[ ] SharePoint 2013

If SharePoint on-premises, what's exact CU version:

Expected or Desired Behavior

Provisioning a ClientSidePage configured with a News Web part that contains configured Page Property filter should filter based on that filter.

Observed Behavior

• If the News Web part is the first News web part provisioned on the page it does not filter and requires it to be manually removed and then re-added.

• If the News Web part is NOT the first News web part provisioned on the page it does appear to filter correctly but only until the first web part is removed. Then it filters incorrectly (or not at all)

Both of these "Featured Brand News" web parts have the EXACT same JsonControlData except instanceId. When provisioned they show different results, when using Export-PnPClientSidePage the output the exact same output.

Steps to Reproduce

• On any Site Pages library add additional column to use for filtering. In my case I'm using a Managed Metadata Column.
• Add 1 or more News Articles and tag them with unique terms like Featured or some value you are going to filter on. Also Add some that are not tagged, make sure these are "newer" than those you tagged.
• On the home page (or any page), Add a News web part and delete everything else (just to keep it clean).
• Configure the News web part to filter on your tag such as filtered. This should be successful in filtering your News Articles to just those you tagged.
• Export the page using either Export-ClientSidePage or Get-PnPProvisioningTemplate, we just want the Xml for the pnp:ClientSidePage. I would maybe give it another PageName so we don't overwrite the source page it was based on.
• Use Apply-PnPProvisioningTemplate to apply the template to the site it was generated from.
• This should "break" in that the filter doesn't work as it did in the source page and seems to just show the most recent news.
• An additional test I tried was to copy the pnp:CanvasControl for the NewsReal and duplicate it and then change the instanceId slightly. This is what created the screenshot above where instance 1 is "broken" but instance 2 is working. I decided to this after learning that Add-PnPClientSideWebPart had the same result. If that is executed and this is the first and only News web part it will be broken, however if you execute it again, the second copy worked.

Other Notes

I have been using TestMethods in ClientSidePagesTests.cs and trying various updates to ObjectClientSidePages.cs to see if I can figure out a way to fix this but so far have come up short. The JsonControlData that is being set on myWebPart.PropertiesJson looks correct (based on what was exported).

Please let me know if there is any additional information you need from me. I'll keep digging on my end.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[bogeorge]

As another example, I've created a simple script that uses the Add-PnPClientSideWebPart Commandlet.

The JSON for the $newsReel was created by adding the News web part to the home page and configuring it to filter based on "Featured". By adding through the UI, the filter works as expected every time

I then used Export-ClientSidePage to get the CanvasContent and cleaned up the escaped JSON. After running the script below to add the web part it does not filter correctly except upon going into Edit Mode and after first Publish. Subsequent revisits to the page have the wrong filter (or really no filter) applied.

`
Connect-PnPOnline -Url https://boinga.sharepoint.com/sites/testing-brand

$newsReelProperties = @"
{
"id": "8c88f208-6c77-4bdb-86a0-0c47b4316588",
"instanceId": "2bdff1c7-0a50-45bb-a03b-a23563e57539",
"title": "News",
"description": "Display recent news.",
"serverProcessedContent": {
"htmlStrings": {},
"searchablePlainTexts": {},
"imageSources": {},
"links": {
"baseUrl": "https://boinga.sharepoint.com/sites/testing-brand"
},
"componentDependencies": {
"layoutComponentId": "a2752e70-c076-41bf-a42e-1d955b449fbc"
}
},
"dataVersion": "1.9",
"properties": {
"carouselSettings": {
"autoplay": false,
"autoplaySpeed": 5,
"dots": true,
"lazyLoad": true,
"metadata": true,
"swipe": true,
"useStockItems": false
},
"showChrome": true,
"showSocialActions": true,
"layoutId": "FeaturedNews",
"prefetchCount": 4,
"filters": [
{
"filterType": 6,
"values": [
"Featured"
],
"fieldname": "CAI_PageTopic",
"op": 1
}
],
"newsDataSourceProp": 1,
"dataProviderId": "news",
"newsSiteList": [],
"renderItemsSliderValue": 4,
"webId": "c0df7d93-ff70-441d-9a2d-ff8f0fedbf73",
"siteId": "5184ae22-8f3f-4cef-bee4-0bfbf858505e",
"pinnedItems": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"serializedFilterQuery": "Featured0",
"templateId": "FeaturedNews",
"propsLastEdited": "2019-07-08T17:43:09.686Z",
"compactMode": false
}
}
"@

Add-PnPClientSideWebPart -Page "Home" -DefaultWebPartType NewsReel -Section 1 -Column 1 -WebPartProperties $newsReelProperties
Disconnect-PnPOnline
`

[bogeorge]

Finally figured out the cause of my anguish and wanted to share. I do think that eventually a code change may need to be made in PnP so leaving this open but right now I think something may need to change in a REST API first. Below is what I've observed and learned.

The net seems to be that when using PnP to add the News web part a Newsreel with the wrong id is added. I affectionately have called this one the "old news". Old news likely doesn't support emphasis, which is why is has a white background instead of letting the section background through. New news however does allow the emphasis to shine through.

• When exporting a ClientSidePage with a Newsreel web part the output pnp:CanvasControl appears to be correct as it relates to the web part id. It exports id 8c88f208-6c77-4bdb-86a0-0c47b4316588
• However, when importing a ClientSidePage there is code that first must figure out what web parts are available to be added. This code is reliant upon /_api/web/GetClientSideWebParts to give us the web parts and default manifests etc.
• A Newsreel with the id 8c88f208-6c77-4bdb-86a0-0c47b4316588 is NOT returned from the REST API. Instead only a Newsreel with the id a5df8fdf-b508-4b66-98a6-d83bc2597f63 is returned. This is our "old news"
• The PnP code ends up using this web part id to add the Newsreel to the page and for the most part it still works except for the two issues I've seen. This one on filtering and another I logged Web Part background white in Page Section with Zone Emphasis.

Short term my fix is the following PowerShell Code:

# HACK for NewsReel Webpart Id Issues where the "old" web part id is used rather than the "new" web part id
$homeItem = Get-PnPListItem -List "Site Pages" -Query "<View><Query><Where><Eq><FieldRef Name='FileLeafRef'/><Value Type='Text'>Home.aspx</Value></Eq></Where></Query></View>"

if($null -ne $homeItem) {
     $canvasContent = $homeItem["CanvasContent1"];
     $canvasContent = $canvasContent -replace "a5df8fdf-b508-4b66-98a6-d83bc2597f63","8c88f208-6c77-4bdb-86a0-0c47b4316588"
     # update the canvas content after id's are replaced
     $updatedItem = Set-PnPListItem -List "Site Pages" -Identity $homeItem.ID -Values @{"CanvasContent1" = $canvasContent}
     # make sure updates are published and visible
     $page = Set-PnPClientSidePage -Identity "Home" -LayoutType Home -HeaderType None -Publish
}

Long term hopefully the API returns the right ID that can be used in PnP provisioning code.