initial tests with clientsidepages.ts

.vscode/launch.json

@@ -16,7 +16,20 @@
       // 'm365 spo site get --url /', you'd use:
       // "args": ["spo", "site", "get", "--url", "/"]
       // after debugging, revert changes so that they won't end up in your PR
-      "args": [],
+      "args": [
+        "spo",
+        "page",
+        "text",
+        "add",
+        "--webUrl",
+        "https://contoso.sharepoint.com/sites/audienceTest",
+        "--pageName",
+        "Test5.aspx",
+        "--text",
+        "Divider",
+        "--section",
+        "1"
+      ],
       "console": "integratedTerminal",
       "env": {
         "NODE_OPTIONS": "--enable-source-maps"

src/m365/spo/commands/page/Page.ts

@@ -109,4 +109,4 @@ export class Page {
 
     return pageName;
   }
-}
+}

src/m365/spo/commands/page/clientsidepages.ts

@@ -265,7 +265,8 @@ function reindex(collection?: { order: number, columns?: { order: number }[], co
  */
 export class ClientSidePage {
   public sections: CanvasSection[] = [];
-
+  public pageSettings?: PageSettings;
+  public backgroundSettings?: BackgroundSettings;
   /**
    * Converts a json object to an escaped string appropriate for use in attributes when storing client-side controls
    * 
@@ -324,9 +325,17 @@ export class ClientSidePage {
       html.push(this.sections[i].toHtml());
     }
 
-    html.push("</div>");
+    if (this.backgroundSettings) {
+      html.push(this.backgroundSettings.toHtml());
+    }
 
-    return html.join("");
+    if (this.pageSettings) {
+      html.push(this.pageSettings.toHtml());
+    }
+
+    html.push("</div>");
+    const result = html.join("");
+    return result;
   }
 
   /**
@@ -344,20 +353,27 @@ export class ClientSidePage {
     getBoundedDivMarkup(html, /<div\b[^>]*data-sp-canvascontrol[^>]*?>/i, markup => {
 
       // get the control type
-      const ct = /controlType&quot;&#58;(\d*?),/i.exec(markup);
+      const ct = /controlType&quot;&#58;(\d*?)(,|&)/i.exec(markup);
 
       // if no control type is present this is a column which we give type 0 to let us process it
-      const controlType = ct == null || ct.length < 2 ? 0 : parseInt(ct[1], 10);
+      const controlType = ct == null || ct.length < 0 ? -1 : parseInt(ct[1], 10);
 
       let control: CanvasControl | null = null;
 
       switch (controlType) {
-        case 0:
+        case -1:
           // empty canvas column
           control = new CanvasColumn(null, 0);
           control.fromHtml(markup);
           page.mergeColumnToTree(<CanvasColumn>control);
           break;
+        case 0:
+          // page settings
+          control = new PageSettings();
+          control.fromHtml(markup);
+          page.pageSettings = <PageSettings>control;
+          // page.mergeColumnToTree(<CanvasColumn>control);
+          break;
         case 3:
           // client side webpart
           control = new ClientSideWebpart("");
@@ -370,6 +386,12 @@ export class ClientSidePage {
           control.fromHtml(markup);
           page.mergePartToTree(<ClientSidePart>control);
           break;
+        case 14:
+          // BackgroundSection
+          control = new BackgroundSettings();
+          control.fromHtml(markup);
+          page.backgroundSettings = <BackgroundSettings>control;
+          break;
       }
     });
 
@@ -544,6 +566,25 @@ abstract class CanvasControl {
   protected abstract getControlData(): ClientSideControlData;
 }
 
+export class PageSettings extends CanvasControl {
+  constructor() {
+    super(0, "1.0");
+  }
+
+  protected getControlData(): ClientSideControlData {
+    return this.controlData as any;
+  }
+
+  public toHtml(): string {
+    return `<div data-sp-canvascontrol="" data-sp-canvasdataversion="${this.dataVersion}" data-sp-controldata="${this.jsonData}"></div>`;
+  }
+
+  public fromHtml(html: string): void {
+    super.fromHtml(html);
+
+  }
+}
+
 export class CanvasColumn extends CanvasControl {
 
   constructor(
@@ -648,6 +689,73 @@ export abstract class ClientSidePart extends CanvasControl {
   }
 }
 
+export class BackgroundSettings extends ClientSidePart {
+  public propertieJson: TypedHash<any> = {};
+  protected serverProcessedContent: ServerProcessedContent | null = null;
+
+  constructor() {
+    super(0, "1.0");
+  }
+
+  protected getControlData(): ClientSideControlData {
+    return {
+      controlType: this.controlType
+    } as any;
+  }
+
+  public toHtml(): string {
+    // will form the value of the data-sp-webpartdata attribute
+    const data = {
+      dataVersion: this.dataVersion,
+      instanceId: this.id,
+      properties: this.propertieJson,
+      serverProcessedContent: this.serverProcessedContent,
+    };
+
+
+    const html: string[] = [];
+
+    html.push(`<div data-sp-canvascontrol="" data-sp-canvasdataversion="${this.dataVersion}" data-sp-controldata="${this.jsonData}">`);
+
+    html.push(`<div data-sp-webpart="" data-sp-webpartdataversion="${this.dataVersion}" data-sp-webpartdata="${ClientSidePage.jsonToEscapedString(data)}">`);
+
+    html.push(`<div data-sp-componentid="">`);
+    html.push("</div>");
+
+    html.push(`<div data-sp-htmlproperties="">`);
+    html.push("</div>");
+
+    html.push("</div>");
+    html.push("</div>");
+
+    return html.join("");
+  }
+
+  private setProperties<T = any>(properties: T): this {
+    this.propertieJson = extend(this.propertieJson, properties);
+    return this;
+  }
+
+  public fromHtml(html: string): void {
+    super.fromHtml(html);
+    const webPartData = ClientSidePage.escapedStringToJson<ClientSideWebpartData>(getAttrValueFromString(html, "data-sp-webpartdata"));
+
+    this.setProperties(webPartData.properties);
+
+    if (typeof webPartData.serverProcessedContent !== "undefined") {
+      this.serverProcessedContent = webPartData.serverProcessedContent;
+    }
+
+    if (typeof webPartData.dynamicDataPaths !== "undefined") {
+      this.dynamicDataPaths = webPartData.dynamicDataPaths;
+    }
+
+    if (typeof webPartData.dynamicDataValues !== "undefined") {
+      this.dynamicDataValues = webPartData.dynamicDataValues;
+    }
+  }
+}
+
 export class ClientSideText extends ClientSidePart {
 
   private _text: string = '';

src/m365/spo/commands/page/page-clientsidewebpart-add.ts

@@ -270,14 +270,14 @@ class SpoPageClientSideWebPartAddCommand extends SpoCommand {
         id: webPart.id,
         position: Object.assign({}, control.position),
         webPartId: webPart.webPartId,
-        emphasis: {}
+        emphasis: {},
+        zoneGroupMetadata: control.zoneGroupMetadata
       }, webPart);
 
       if (!control.controlType) {
         // it's an empty column so we need to replace it with the web part
         // ignore the specified order
         webPartControl.position.controlIndex = 1;
-        webPartControl.zoneGroupMetadata = control.zoneGroupMetadata;
         canvasContent.splice(controlIndex, 1, webPartControl);
       }
       else {