[BUG] Set-PnPPage with error when using section with full width

HeKr09 commented 3 years ago

Reporting an Issue or Missing Feature

I am creating a page by several Add-PnPPage*-cmdlets. Afterwards I set the header image by using Set-PnPPage and I get an error because I am using a section with full width.

Expected behavior

Set-PnPPage without an error when using a section with full width.

Actual behavior

I am running the following code:

$page = Add-PnPPage -Name $Template -LayoutType Article -PromoteAs Template
# some sections here and WebParts here
Add-PnPPageSection -Page $page -SectionTemplate OneColumnFullWidth -Order 5 -ZoneEmphasis 0
$imgWebPart = Add-PnPPageWebPart -Page $page -DefaultWebPartType Image -Section 5 -Column 1
# some more sections here and WebParts here
Set-PnPPage -Identity $page.Name -HeaderType Custom -PromoteAs Template -ThumbnailUrl "$($placeholderImg.ServerRelativeUrl)" -ServerRelativeImageUrl "$($placeholderImg.ServerRelativeUrl)" -TranslateX 51.6301443078568 -TranslateY 36.0714285714286 -Publish | Out-Null
$json = $imgWebPart.PropertiesJson | ConvertFrom-Json
$json | Add-Member -Name "cropHeight" -Value 400 -MemberType NoteProperty
$json | Add-Member -Name "cropWidth" -Value 1700 -MemberType NoteProperty
$json | Add-Member -Name "cropY" -Value 0 -MemberType NoteProperty
$json | Add-Member -Name "cropX" -Value 0 -MemberType NoteProperty
$json | Add-Member -Name "resizeCoefficient" -Value 1 -MemberType NoteProperty
$json.imgHeight = 400
$json.imgWidth = 1700
$imgWebPart.PropertiesJson = ConvertTo-Json $json
$page.Save()
$page.Publish()

Afterwards I get the following error which does not make any sense to me because I do use a image web part. Nevertheless I don't do anything with the specific section at that moment.

Set-PnPPage : You cannot host text controls inside a one column full width section, only an image web part or hero web
part are allowed
At D:\TFS\Create-ContentTemplate.ps1:279 char:5
+     Set-PnPPage -Identity $page.Name -HeaderType Custom -PromoteAs Te ...
+     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : WriteError: (:) [Set-PnPPage], ClientException
    + FullyQualifiedErrorId : EXCEPTION,PnP.PowerShell.Commands.Pages.SetPage

Steps to reproduce behavior

See code above.

What is the version of the Cmdlet module you are running?

1.5.0

Which operating system/environment are you running PnP PowerShell on?

[x] Windows
[ ] Linux
[ ] MacOS
[ ] Azure Cloud Shell
[ ] Azure Functions
[ ] Other : please specify

jansenbe commented 3 years ago

@HeKr09 : you would also need to add the "isFullWidth": true property as that's being checked to understand which first party and third party web parts support being used in a full width section.

HeKr09 commented 3 years ago

Sorry. Maybe I am to stupid. It did not work for me. Where do I have to paste this property? Changed only at the "Add-PnPPageWebPart" at the WebPartProperties:

Add-PnPPageSection -Page $page -SectionTemplate OneColumnFullWidth -Order 5 -ZoneEmphasis 0
$imgWebPart = Add-PnPPageWebPart -Page $page -DefaultWebPartType Image -Section 5 -Column 1 -WebPartProperties "{`"imageSourceType`":2,`"altText`":`"`",`"overlayText`":`"`",`"fileName`":`"$($placeholderImg.Name)`",`"siteId`":`"$($site.Id)`",`"webId`":`"$($web.Id)`",`"listId`":`"$listId`",`"uniqueId`":`"4cc49832-b660-47fc-b1f1-dd0b31185d89`",`"imgWidth`":1700,`"imgHeight`":400,`"isFullWidth`":true,`"resizeCoefficient`":1,`"alignment`":`"Center`",`"fixAspectRatio`":false,`"cropX`":0,`"cropY`":0,`"cropWidth`":1700,`"cropHeight`":0400,`"captionText`":`"`",`"isFullWidth`":true}"
Set-PnPPage -Identity $page.Name -HeaderType Custom -PromoteAs Template -ThumbnailUrl "$($placeholderImg.ServerRelativeUrl)" -ServerRelativeImageUrl "$($placeholderImg.ServerRelativeUrl)" -TranslateX 51.6301443078568 -TranslateY 36.0714285714286 -Publish | Out-Null
$json = $imgWebPart.PropertiesJson | ConvertFrom-Json
$json | Add-Member -Name "cropHeight" -Value 400 -MemberType NoteProperty
$json | Add-Member -Name "cropWidth" -Value 1700 -MemberType NoteProperty
$json | Add-Member -Name "cropY" -Value 0 -MemberType NoteProperty
$json | Add-Member -Name "cropX" -Value 0 -MemberType NoteProperty
$json | Add-Member -Name "resizeCoefficient" -Value 1 -MemberType NoteProperty
$json.imgHeight = 400
$json.imgWidth = 1700
$imgWebPart.PropertiesJson = ConvertTo-Json $json
$page.Save()
$page.Publish()

No I receive that error again:

Add-PnPPageWebPart : Cannot bind parameter 'WebPartProperties'. Cannot convert value
"{"imageSourceType":2,"altText":"","overlayText":"","fileName":"picture content template.jpg","siteId":"482c2f23-9777-4
373-91da-830319c6d05c","webId":"dad0ad1c-2468-41c0-a1e5-4d5eaacc3e28","listId":"2b4890b9-48db-4a12-8eb4-5c4522196ddc","
uniqueId":"4cc49832-b660-47fc-b1f1-dd0b31185d89","imgWidth":1700,"imgHeight":400,"isFullWidth":true,"resizeCoefficient"
:1,"alignment":"Center","fixAspectRatio":false,"cropX":0,"cropY":0,"cropWidth":1700,"cropHeight":0400,"captionText":"",
"isFullWidth":true}" to type "PnP.PowerShell.Commands.Base.PipeBinds.PropertyBagPipeBind". Error: "'4' is an invalid
end of a number. Expected a delimiter. LineNumber: 0 | BytePositionInLine: 454."
At D:\TFS\Create-ContentTemplate.ps1:214 char:116
+ ... tProperties "{`"imageSourceType`":2,`"altText`":`"`",`"overlayText`": ...
+                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidArgument: (:) [Add-PnPPageWebPart], ParameterBindingException
    + FullyQualifiedErrorId : CannotConvertArgumentNoMessage,PnP.PowerShell.Commands.WebParts.AddWebPart

jansenbe commented 3 years ago

I put an image web part in a full width section and this is the resulting json. Why don't you use the approach you've used before to add properties:

$json | Add-Member -Name "isFullWidth" -Value $true -MemberType NoteProperty

{
  "id": "d1d91016-032f-456d-98a4-721247c305e8",
  "instanceId": "a67f81c9-e01e-4578-a12d-f0f8fd25b937",
  "title": "Image",
  "description": "Add an image, picture or photo to your page including text overlays and ability to crop and resize images.",
  "audiences": [],
  "serverProcessedContent": {
    "htmlStrings": {},
    "searchablePlainTexts": {},
    "imageSources": {
      "imageSource": "/sites/pagetransformationdemotarget/SiteAssets/SitePages/D95_specs/extra4.jpg"
    },
    "links": {},
    "customMetadata": {
      "imageSource": {
        "siteid": "f97d310e-b07f-4a42-9cf5-a8bea48128db",
        "webid": "47c3def3-c010-4069-93d1-06b9a0b56b32",
        "listid": "fce648ed-7f19-4558-a00d-4f13790799f8",
        "uniqueid": "{67EFC354-A032-4677-88E0-E93B5E5AF228}",
        "width": "1500",
        "height": "1125"
      }
    }
  },
  "dataVersion": "1.9",
  "properties": {
    "imageSourceType": 2,
    "captionText": "",
    "altText": "",
    "linkUrl": "",
    "overlayText": "",
    "fileName": "",
    "siteId": "f97d310e-b07f-4a42-9cf5-a8bea48128db",
    "webId": "47c3def3-c010-4069-93d1-06b9a0b56b32",
    "listId": "fce648ed-7f19-4558-a00d-4f13790799f8",
    "uniqueId": "{67EFC354-A032-4677-88E0-E93B5E5AF228}",
    "imgWidth": 1500,
    "imgHeight": 1125,
    "isFullWidth": true,
    "alignment": "Center",
    "resizeCoefficient": 1,
    "resizeDesiredWidth": 1198,
    "fixAspectRatio": false
  }
}

HeKr09 commented 3 years ago

Okay it worked but I had to change the order to:

Add-PnPPageSection -Page $page -SectionTemplate OneColumnFullWidth -Order 5 -ZoneEmphasis 0
$imgWebPart = Add-PnPPageWebPart -Page $page -DefaultWebPartType Image -Section 5 -Column 1
$json = $imgWebPart.PropertiesJson | ConvertFrom-Json
$json | Add-Member -Name "cropHeight" -Value 400 -MemberType NoteProperty
$json | Add-Member -Name "cropWidth" -Value 1700 -MemberType NoteProperty
$json | Add-Member -Name "cropY" -Value 0 -MemberType NoteProperty
$json | Add-Member -Name "cropX" -Value 0 -MemberType NoteProperty
$json | Add-Member -Name "resizeCoefficient" -Value 1 -MemberType NoteProperty
$json | Add-Member -Name "isFullWidth" -Value $true -MemberType NoteProperty
$json.imgHeight = 400
$json.imgWidth = 1700
$imgWebPart.PropertiesJson = ConvertTo-Json $json
$page.Save()
$page.Publish()
Set-PnPPage -Identity $page.Name -HeaderType Custom -PromoteAs Template -ThumbnailUrl "$($placeholderImg.ServerRelativeUrl)" -ServerRelativeImageUrl "$($placeholderImg.ServerRelativeUrl)" -TranslateX 51.6301443078568 -TranslateY 36.0714285714286 -Publish | Out-Null

I removed the WebPartProperties from the Add-PnPPageWebPart and changed the order of Set-PnPPage. That worked for me. Thank you.

pnp / pnpcore