Pnpjs: ClientSidePages: All controls are added to the same column
Category
- [x] Enhancement
- [ ] Bug
- [ ] Question
- [ ] Documentation gap/issue
Version
1.2.10-3
Expected / Desired Behavior / Question
Using the ClientSidePage part of pnpjs I except to be able to add controls to separate columns and sections. All parts are added to the same column and section, and also in the wrong order.
This my code:
Sections.forEach(s => {
const section = page.addSection();
s.Columns.forEach(col => {
const column = section.addColumn(col.Factor);
col.Controls.forEach(control => {
const [partDef] = partDefinitions.filter(c => c.Id.toLowerCase().indexOf(control.Id.toLowerCase()) !== -1);
if (partDef) {
try {
const part = ClientSideWebpart
.fromComponentDef(partDef)
.setProperties<any>(JSON.parse(this.tokenHelper.replaceTokens(JSON.stringify(control.Properties))));
super.log_info("processClientSidePage", `Adding ${partDef.Name} to client side page ${Name}`);
column.addControl(part);
} catch (error) {
console.log(error);
super.log_info("processClientSidePage", `Failed adding part ${partDef.Name} to client side page ${Name}`);
}
} else {
super.log_warn("processClientSidePage", `Client side web part with definition id ${control.Id} not found.`);
}
});
});
});
await page.save();
olemp
All 9 comments
Export using PnP-Sites-Core before API update:
<pnp:ClientSidePages>
<pnp:ClientSidePage PageName="Hjem.aspx" PromoteAsNewsArticle="false" Overwrite="true" Layout="Home" EnableComments="false" Title="Hjem">
<pnp:Sections>
<pnp:Section Order="1" Type="OneColumn">
<pnp:Controls>
<pnp:CanvasControl WebPartType="Custom" JsonControlData="{ "dataVersion": "1.0", "properties": {"description":"","phaseSubTextProperty":"","phaseField":"Fase","automaticReload":true,"confirmPhaseChange":true,"reloadTimeout":0,"updateViewsDocuments":false,"updateViewsTasks":false,"updateViewsRisks":false,"gutter":15,"fontSize":13,"entity":{"listName":"Prosjekter","contentTypeId":"0x0100805E9E4FEAAB4F0EABAB2600D30DB70C","fieldsGroupName":"Prosjektportalenkolonner","siteIdFieldName":"GtSiteId"}}}" ControlId="4449d3dc-fa58-4982-b87c-5a893114e7b7" Order="1" Column="1" />
</pnp:Controls>
</pnp:Section>
<pnp:Section Order="2" Type="TwoColumnLeft">
<pnp:Controls>
<pnp:CanvasControl WebPartType="List" JsonControlData="{ "dataVersion": "1.0", "properties": {"isDocumentLibrary":true,"selectedListId":"{listid:Prosjektdokumenter}","listTitle":"Prosjektdokumenter","selectedListUrl":"{site}/Prosjektdokumenter","webRelativeListUrl":"/Prosjektdokumenter","webpartHeightKey":4}}" ControlId="f92bf067-bc19-489e-a556-7fe95f508720" Order="1" Column="1" />
<pnp:CanvasControl WebPartType="Custom" JsonControlData="{ "dataVersion": "1.0", "properties": {"title":"Prosjektinformasjon","entity":{"listName":"Prosjekter","contentTypeId":"0x0100805E9E4FEAAB4F0EABAB2600D30DB70C","fieldsGroupName":"Prosjektportalenkolonner","siteIdFieldName":"GtSiteId"}}}" ControlId="b8bec0be-2354-443d-a3ca-24b36e8ea7dc" Order="1" Column="2" />
<pnp:CanvasControl WebPartType="List" JsonControlData="{ "dataVersion": "1.0", "properties": {"isDocumentLibrary":false,"selectedListId":"{listid:Usikkerhet}","listTitle":"Usikkerhet","selectedListUrl":"{site}/Lists/Usikkerhet","webRelativeListUrl":"/Lists/Usikkerhet","webpartHeightKey":4}}" ControlId="f92bf067-bc19-489e-a556-7fe95f508720" Order="2" Column="2" />
</pnp:Controls>
</pnp:Section>
</pnp:Sections>
<pnp:Header Type="Default" />
</pnp:ClientSidePage>
</pnp:ClientSidePages>
Export using PnP-Sites-Core after API update:
<pnp:ClientSidePages>
<pnp:ClientSidePage PageName="Hjem.aspx" PromoteAsNewsArticle="false" Overwrite="true" Layout="Home" EnableComments="false" Title="Hjem">
<pnp:Sections>
<pnp:Section Order="1" Type="OneColumn">
<pnp:Controls>
<pnp:CanvasControl WebPartType="Custom" JsonControlData="{ "dataVersion": "1.0", "properties": {"description":"","phaseSubTextProperty":"","phaseField":"Fase","automaticReload":true,"confirmPhaseChange":true,"reloadTimeout":0,"updateViewsDocuments":true,"updateViewsTasks":false,"updateViewsRisks":true,"gutter":15,"fontSize":13,"entity":{"listName":"Prosjekter","contentTypeId":"0x0100805E9E4FEAAB4F0EABAB2600D30DB70C","fieldsGroupName":"Prosjektportalenkolonner","siteIdFieldName":"GtSiteId"},"updateViewName":"Gjeldende fase"}}" ControlId="4449d3dc-fa58-4982-b87c-5a893114e7b7" Order="1" Column="2" />
<pnp:CanvasControl WebPartType="List" JsonControlData="{ "dataVersion": "1.0", "properties": {"isDocumentLibrary":true,"selectedListId":"{listid:Prosjektdokumenter}","webpartHeightKey":4}}" ControlId="f92bf067-bc19-489e-a556-7fe95f508720" Order="2" Column="2" />
<pnp:CanvasControl WebPartType="Custom" JsonControlData="{ "dataVersion": "1.0", "properties": {"title":"Prosjektinformasjon","entity":{"listName":"Prosjekter","contentTypeId":"0x0100805E9E4FEAAB4F0EABAB2600D30DB70C","fieldsGroupName":"Prosjektportalenkolonner","siteIdFieldName":"GtSiteId"}}}" ControlId="b8bec0be-2354-443d-a3ca-24b36e8ea7dc" Order="3" Column="2" />
<pnp:CanvasControl WebPartType="List" JsonControlData="{ "dataVersion": "1.0", "properties": {"isDocumentLibrary":false,"selectedListId":"{listid:Usikkerhet}","webpartHeightKey":4}}" ControlId="f92bf067-bc19-489e-a556-7fe95f508720" Order="4" Column="2" />
</pnp:Controls>
</pnp:Section>
</pnp:Sections>
<pnp:Header Type="Default" />
</pnp:ClientSidePage>
</pnp:ClientSidePages>
Can you share some sample data for the structure you are using? The one you are looping with Sections, Columns, Controls?
I can't immediately reproduce this so it is likely something to do with the how you are processing it is not being handled correctly by the library and I want to make sure I can repro it correctly. Thanks!
patrick-rodgers
on 7 Mar 2019
Here:
{
"Name": "Hjem.aspx",
"Title": "Hjem",
"PageLayoutType": "Home",
"CommentsDisabled": true,
"Sections": [
{
"Columns": [
{
"Factor": 12,
"Controls": [
{
"Id": "4449d3dc-fa58-4982-b87c-5a893114e7b7",
"Properties": {
"description": "",
"phaseSubTextProperty": "",
"phaseField": "Fase",
"automaticReload": true,
"confirmPhaseChange": true,
"reloadTimeout": 0,
"updateViewsDocuments": true,
"updateViewsRisks": true,
"updateViewName": "Gjeldende fase",
"gutter": 15,
"fontSize": 13,
"entity": {
"listName": "Prosjekter",
"contentTypeId": "0x0100805E9E4FEAAB4F0EABAB2600D30DB70C",
"fieldsGroupName": "{parameter:fieldsgroup}",
"siteIdFieldName": "GtSiteId"
}
}
}
]
}
]
},
{
"Columns": [
{
"Factor": 8,
"Controls": [
{
"Id": "f92bf067-bc19-489e-a556-7fe95f508720",
"Properties": {
"isDocumentLibrary": true,
"selectedListId": "{listid:Prosjektdokumenter}",
"webpartHeightKey": 4
}
}
]
},
{
"Factor": 4,
"Controls": [
{
"Id": "b8bec0be-2354-443d-a3ca-24b36e8ea7dc",
"Properties": {
"title": "Prosjektinformasjon",
"entity": {
"listName": "Prosjekter",
"contentTypeId": "0x0100805E9E4FEAAB4F0EABAB2600D30DB70C",
"fieldsGroupName": "{parameter:fieldsgroup}",
"siteIdFieldName": "GtSiteId"
}
}
},
{
"Id": "f92bf067-bc19-489e-a556-7fe95f508720",
"Properties": {
"isDocumentLibrary": false,
"selectedListId": "{listid:Usikkerhet}",
"webpartHeightKey": 4
}
}
]
}
]
}
]
}
perfect, thanks!
patrick-rodgers
on 7 Mar 2019
Just shout if you need more details @patrick-rodgers, and point me in the right direction if I'm doing something wrong.
olemp
on 7 Mar 2019
No, this is a library bug. I am working through ensuring everything gets set correctly. Thanks
patrick-rodgers
on 7 Mar 2019
👍1
No worries, thanks for your work on this @patrick-rodgers
olemp
on 7 Mar 2019
Holy cow, that was frustrating - but I think I figured it out. About to push a new beta if you could give it a run I think most of the issues are now resolved.
And thank you very much for all your help testing.
patrick-rodgers
on 7 Mar 2019
❤1
🎉1
@patrick-rodgers Tested this morning. Retrieving another error now https://github.com/pnp/pnpjs/issues/542
olemp
on 8 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings
Related issues
AJIXuMuK
路
3Comments
simkessy
路
3Comments
SpliceVW
路
3Comments
simonagren
路
3Comments
bogeorge
路
3Comments
Most helpful comment
Holy cow, that was frustrating - but I think I figured it out. About to push a new beta if you could give it a run I think most of the issues are now resolved.
And thank you very much for all your help testing.