Skip to content

1685 change flexible layout position from int to double.#1688

Merged
jansenbe merged 3 commits intopnp:devfrom
MondayCoffee:1685_FlexLayout_PositionValueType
Sep 25, 2025
Merged

1685 change flexible layout position from int to double.#1688
jansenbe merged 3 commits intopnp:devfrom
MondayCoffee:1685_FlexLayout_PositionValueType

Conversation

@czullu
Copy link
Copy Markdown

@czullu czullu commented Sep 5, 2025

This is fix for #1685 which does have a depending fix in pnp.framework.
Thank you @PedroMordeP for your research.

this wil need fix in pnp.framework as well
@codecov-commenter
Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

❌ Patch coverage is 33.33333% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.26%. Comparing base (63545f3) to head (48658cb).
⚠️ Report is 2651 commits behind head on dev.

Files with missing lines Patch % Lines
...ore/Model/SharePoint/Pages/Internal/PageWebPart.cs 0.00% 4 Missing ⚠️
...rePoint/Pages/Internal/SectionBackgroundControl.cs 0.00% 4 Missing ⚠️
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.
Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #1688      +/-   ##
==========================================
- Coverage   82.42%   81.26%   -1.16%     
==========================================
  Files         416      637     +221     
  Lines       28590    45266   +16676     
  Branches        0     4750    +4750     
==========================================
+ Hits        23565    36785   +13220     
- Misses       5025     7086    +2061     
- Partials        0     1395    +1395     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@PedroMordeP
Copy link
Copy Markdown

@czullu I got your changes and did some tests, and it is passing in the validation "control is EmptySection". The validation is done by the ControlType?
I cropped the image with some values in the Watch

Image

@czullu
Copy link
Copy Markdown
Author

czullu commented Sep 9, 2025

@PedroMordeP Can you may be share your canvasContent1 with me?
The strange thing is the ControlType - in propertiesJson we can see it is 1 but the parameter ControlType shows 3
In CanvasControl.cs GetType you can see that ControlType=3 should be PageWebPart.

If i create a Page from UI with just Empty Sections (3-Column) and then read it with pnpcore and use SaveAs to store as different Page it still works.
image

The CanvasControl1 on my end looks like this:

<div>
	<div data-sp-canvascontrol=\"\" data-sp-canvasdataversion=\"1.0\" data-sp-controldata=\"&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1,&quot;zoneId&quot;&#58;&quot;0de9c5a1-efd0-48e3-b6e9-e6018bfab9c7&quot;,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;0,&quot;controlIndex&quot;&#58;1&#125;,&quot;id&quot;&#58;&quot;295ce483-ca50-4412-9ac4-31e8bea71b89&quot;,&quot;controlType&quot;&#58;3,&quot;isFromSectionTemplate&quot;&#58;false,&quot;addedFromPersistedData&quot;&#58;true,&quot;webPartId&quot;&#58;&quot;cbe7b0a9-3504-44dd-a3a3-0e5cacd07788&quot;,&quot;reservedWidth&quot;&#58;2161,&quot;reservedHeight&quot;&#58;367&#125;\">
		<div data-sp-webpart=\"\" data-sp-webpartdataversion=\"1.6\" data-sp-webpartdata=\"&#123;&quot;id&quot;&#58;&quot;cbe7b0a9-3504-44dd-a3a3-0e5cacd07788&quot;,&quot;instanceId&quot;&#58;&quot;295ce483-ca50-4412-9ac4-31e8bea71b89&quot;,&quot;title&quot;&#58;&quot;Title area&quot;,&quot;description&quot;&#58;&quot;Title area description&quot;,&quot;audiences&quot;&#58;[],&quot;hideOn&quot;&#58;&#123;&quot;mobile&quot;&#58;false&#125;,&quot;serverProcessedContent&quot;&#58;&#123;&quot;htmlStrings&quot;&#58;&#123;&#125;,&quot;searchablePlainTexts&quot;&#58;&#123;&#125;,&quot;imageSources&quot;&#58;&#123;&quot;imageSource&quot;&#58;&quot;/_layouts/15/images/sleektemplateimagetile.jpg&quot;&#125;,&quot;links&quot;&#58;&#123;&#125;,&quot;customMetadata&quot;&#58;&#123;&quot;imageSource&quot;&#58;&#123;&#125;&#125;&#125;,&quot;dataVersion&quot;&#58;&quot;1.6&quot;,&quot;properties&quot;&#58;&#123;&quot;imageSourceType&quot;&#58;2,&quot;title&quot;&#58;&quot;TestEmptySections&quot;,&quot;textAlignment&quot;&#58;&quot;Left&quot;,&quot;showPublishDate&quot;&#58;false,&quot;showTopicHeader&quot;&#58;false,&quot;layoutType&quot;&#58;&quot;CutInShape&quot;,&quot;topicHeader&quot;&#58;&quot;&quot;,&quot;enableGradientEffect&quot;&#58;true,&quot;isDecorative&quot;&#58;true,&quot;authors&quot;&#58;[&#123;&quot;id&quot;&#58;&quot;i&#58;0#.f|membership|test@me.onmicrosoft.com&quot;,&quot;upn&quot;&#58;&quot;test@me.onmicrosoft.com&quot;,&quot;email&quot;&#58;&quot;test@me.onmicrosoft.com&quot;,&quot;name&quot;&#58;&quot;christian zuellig&quot;,&quot;role&quot;&#58;&quot;TestDepartment&quot;&#125;],&quot;customContentDropSupport&quot;&#58;&quot;externallink&quot;,&quot;showTimeToRead&quot;&#58;false,&quot;authorByline&quot;&#58;[&quot;test@me.onmicrosoft.com&quot;]&#125;,&quot;containsDynamicDataSource&quot;&#58;false&#125;\">
			<div data-sp-componentid=\"cbe7b0a9-3504-44dd-a3a3-0e5cacd07788\"/>
			<div data-sp-htmlproperties=\"\">
				<img data-sp-prop-name=\"imageSource\" src=\"/_layouts/15/images/sleektemplateimagetile.jpg\"/>
			</div>
		</div>
	</div>
	<div data-sp-canvascontrol=\"\" data-sp-canvasdataversion=\"1.0\" data-sp-controldata=\"&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;2,&quot;zoneId&quot;&#58;&quot;786e65b1-4d91-498c-870e-7a57061cf4eb&quot;,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;4,&quot;controlIndex&quot;&#58;1&#125;,&quot;id&quot;&#58;&quot;emptySection&quot;,&quot;controlType&quot;&#58;1,&quot;addedFromPersistedData&quot;&#58;true&#125;\"/>
	<div data-sp-canvascontrol=\"\" data-sp-canvasdataversion=\"1.0\" data-sp-controldata=\"&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;2,&quot;zoneId&quot;&#58;&quot;786e65b1-4d91-498c-870e-7a57061cf4eb&quot;,&quot;sectionIndex&quot;&#58;2,&quot;sectionFactor&quot;&#58;4,&quot;controlIndex&quot;&#58;1&#125;,&quot;id&quot;&#58;&quot;emptySection&quot;,&quot;controlType&quot;&#58;1,&quot;addedFromPersistedData&quot;&#58;true&#125;\"/>
	<div data-sp-canvascontrol=\"\" data-sp-canvasdataversion=\"1.0\" data-sp-controldata=\"&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;2,&quot;zoneId&quot;&#58;&quot;786e65b1-4d91-498c-870e-7a57061cf4eb&quot;,&quot;sectionIndex&quot;&#58;3,&quot;sectionFactor&quot;&#58;4,&quot;controlIndex&quot;&#58;1&#125;,&quot;id&quot;&#58;&quot;emptySection&quot;,&quot;controlType&quot;&#58;1,&quot;addedFromPersistedData&quot;&#58;true&#125;\"/>
	<div data-sp-canvascontrol=\"\" data-sp-canvasdataversion=\"1.0\" data-sp-controldata=\"&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;3,&quot;zoneId&quot;&#58;&quot;9093e727-a49f-4392-8455-6aa38acaa409&quot;,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;controlIndex&quot;&#58;1&#125;,&quot;id&quot;&#58;&quot;emptySection&quot;,&quot;controlType&quot;&#58;1,&quot;addedFromPersistedData&quot;&#58;true&#125;\"/>
	<div data-sp-canvascontrol=\"\" data-sp-canvasdataversion=\"1.0\" data-sp-controldata=\"&#123;&quot;controlType&quot;&#58;0,&quot;pageSettingsSlice&quot;&#58;&#123;&quot;isDefaultDescription&quot;&#58;true,&quot;isDefaultThumbnail&quot;&#58;true,&quot;isSpellCheckEnabled&quot;&#58;true,&quot;globalRichTextStylingVersion&quot;&#58;1,&quot;rtePageSettings&quot;&#58;&#123;&quot;contentVersion&quot;&#58;5,&quot;indentationVersion&quot;&#58;2&#125;,&quot;isEmailReady&quot;&#58;false,&quot;webPartsPageSettings&quot;&#58;&#123;&quot;isTitleHeadingLevelsEnabled&quot;&#58;true,&quot;isLowQualityImagePlaceholderEnabled&quot;&#58;false&#125;&#125;&#125;\"/>
</div>

@PedroMordeP
Copy link
Copy Markdown

PedroMordeP commented Sep 9, 2025

@czullu I'm using this template, it has 2 empty flexible layouts sections

48099408456742cfa3c04750ad92580d.txt

Maybe some code has not yet been merged that is missing on my side?

@czullu
Copy link
Copy Markdown
Author

czullu commented Sep 10, 2025

@czullu I'm using this template, it has 2 empty flexible layouts sections

48099408456742cfa3c04750ad92580d.txt

Maybe some code has not yet been merged that is missing on my side?

Are you testing from pnp.framework? If so the problem might be over there in one of this 2 files:
image
As schema does not support all new features there is a remapping done. My best guess is that in there we map the data to the wrong control in some case. i will try to have a look at it within the next few days.. if you can provide a fix, that would be great as well

@PedroMordeP
Copy link
Copy Markdown

PedroMordeP commented Sep 10, 2025

@czullu I'm using this template, it has 2 empty flexible layouts sections
48099408456742cfa3c04750ad92580d.txt
Maybe some code has not yet been merged that is missing on my side?

Are you testing from pnp.framework? If so the problem might be over there in one of this 2 files: image As schema does not support all new features there is a remapping done. My best guess is that in there we map the data to the wrong control in some case. i will try to have a look at it within the next few days.. if you can provide a fix, that would be great as well

I'm testing using PnP.PowerShell with local PnP.Framework and PnP.Core to Get and Set a template.
I'm trying to figure out where is the issue but don't know where to look. In the files you mentioned, when retrieving the template the control is identified as emptySection.

image

But when is deploying the template maybe is not "parsing" well from XML !?

I did a temporary fix like this, but maybe this is not the way

image

Thank you

@jansenbe jansenbe self-assigned this Sep 25, 2025
@jansenbe jansenbe added the area: pages API 📄 Working with modern pages label Sep 25, 2025
jansenbe pushed a commit that referenced this pull request Sep 25, 2025
@jansenbe jansenbe merged commit 4509931 into pnp:dev Sep 25, 2025
3 checks passed
@PedroMordeP
Copy link
Copy Markdown

@czullu @jansenbe I ended up changing my code to this, and for me it's all working now.
Is there a better way or can we go with this solution for now?

image

File with my changes
CanvasColumn.zip

@czullu
Copy link
Copy Markdown
Author

czullu commented Sep 26, 2025

@czullu @jansenbe I ended up changing my code to this, and for me it's all working now. Is there a better way or can we go with this solution for now?

image File with my changes [CanvasColumn.zip](https://github.com/user-attachments/files/22557549/CanvasColumn.zip)

Thank you for the fix, unfortunately i habe been quite busy and could not follow up.
I still think the Issue must come from Page.cs => LoadFromHtml -> the Line 1230 with: var controlType = CanvasControl.GetType(controlData);

or we have an issue with the syntex dedection starting at Line 1519

i other words - your fix does handle a case which should not happen. As still have your sample from 2 weeks ago, i will give it a chance and see if i can spot why the control ends up having the wrong type. It might as well come from pnp-framework creating the Objects from the XML Info..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: pages API 📄 Working with modern pages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants