@pnp/cli-microsoft365 9.1.0-beta.4ee36d4 → 9.1.0-beta.8c76288

package/dist/m365/spo/commands/page/page-section-add.js

@@ -3,13 +3,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _SpoPageSectionAddCommand_instances, _a, _SpoPageSectionAddCommand_initTelemetry, _SpoPageSectionAddCommand_initOptions, _SpoPageSectionAddCommand_initValidators;
+var _SpoPageSectionAddCommand_instances, _SpoPageSectionAddCommand_initTelemetry, _SpoPageSectionAddCommand_initOptions, _SpoPageSectionAddCommand_initValidators, _SpoPageSectionAddCommand_initTypes;
+import { v4 } from 'uuid';
 import request from '../../../../request.js';
 import { formatting } from '../../../../utils/formatting.js';
 import { validation } from '../../../../utils/validation.js';
 import SpoCommand from '../../../base/SpoCommand.js';
 import commands from '../../commands.js';
-import { CanvasSectionTemplate, ZoneEmphasis } from './clientsidepages.js';
+import { CanvasSectionTemplate } from './clientsidepages.js';
 class SpoPageSectionAddCommand extends SpoCommand {
     get name() {
         return commands.PAGE_SECTION_ADD;
@@ -20,13 +21,18 @@ class SpoPageSectionAddCommand extends SpoCommand {
     constructor() {
         super();
         _SpoPageSectionAddCommand_instances.add(this);
+        this.sectionTemplate = ['OneColumn', 'OneColumnFullWidth', 'TwoColumn', 'ThreeColumn', 'TwoColumnLeft', 'TwoColumnRight', 'Vertical'];
+        this.zoneEmphasis = ['None', 'Neutral', 'Soft', 'Strong', 'Image', 'Gradient'];
+        this.iconAlignment = ['Left', 'Right'];
+        this.fillMode = ['ScaleToFill', 'ScaleToFit', 'Tile', 'OriginalSize'];
         __classPrivateFieldGet(this, _SpoPageSectionAddCommand_instances, "m", _SpoPageSectionAddCommand_initTelemetry).call(this);
         __classPrivateFieldGet(this, _SpoPageSectionAddCommand_instances, "m", _SpoPageSectionAddCommand_initOptions).call(this);
         __classPrivateFieldGet(this, _SpoPageSectionAddCommand_instances, "m", _SpoPageSectionAddCommand_initValidators).call(this);
+        __classPrivateFieldGet(this, _SpoPageSectionAddCommand_instances, "m", _SpoPageSectionAddCommand_initTypes).call(this);
     }
     async commandAction(logger, args) {
         let pageFullName = args.options.pageName.toLowerCase();
-        if (pageFullName.indexOf('.aspx') < 0) {
+        if (!pageFullName.endsWith('.aspx')) {
             pageFullName += '.aspx';
         }
         let canvasContent;
@@ -66,11 +72,22 @@ class SpoPageSectionAddCommand extends SpoCommand {
                 .sort();
             // zoneIndex for the new section to add
             const zoneIndex = this.getSectionIndex(zoneIndices, args.options.order);
+            let zoneId;
+            let backgroundControlToAdd = undefined;
+            if (args.options.zoneEmphasis && ['image', 'gradient'].includes(args.options.zoneEmphasis.toLowerCase())) {
+                zoneId = v4();
+                // get background control based on control type 14
+                const backgroundControl = canvasContent.find(c => c.controlType === 14);
+                backgroundControlToAdd = this.setBackgroundControl(zoneId, backgroundControl, args);
+                if (!backgroundControl) {
+                    canvasContent.push(backgroundControlToAdd);
+                }
+            }
             // get the list of columns to insert based on the selected template
-            const columnsToAdd = this.getColumns(zoneIndex, args.options.sectionTemplate, args.options.zoneEmphasis, args.options.isLayoutReflowOnTop);
+            const columnsToAdd = this.getColumns(zoneIndex, args, zoneId);
             // insert the column in the right place in the array so that
             // it stays sorted ascending by zoneIndex
-            let pos = canvasContent.findIndex(c => typeof c.controlType === 'undefined' && c.position.zoneIndex > zoneIndex);
+            let pos = canvasContent.findIndex(c => typeof c.controlType === 'undefined' && c.position && c.position.zoneIndex > zoneIndex);
             if (pos === -1) {
                 pos = canvasContent.length - 1;
             }
@@ -107,71 +124,146 @@ class SpoPageSectionAddCommand extends SpoCommand {
         }
         return zoneIndices[order - 2] + ((zoneIndices[order - 1] - zoneIndices[order - 2]) / 2);
     }
-    getColumns(zoneIndex, sectionTemplate, zoneEmphasis, isLayoutReflowOnTop) {
+    getColumns(zoneIndex, args, zoneId) {
         const columns = [];
         let sectionIndex = 1;
-        switch (sectionTemplate) {
+        switch (args.options.sectionTemplate) {
             case 'OneColumnFullWidth':
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 0, zoneEmphasis));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 0, args, zoneId));
                 break;
             case 'TwoColumn':
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 6, zoneEmphasis));
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 6, zoneEmphasis));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 6, args, zoneId));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 6, args, zoneId));
                 break;
             case 'ThreeColumn':
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, zoneEmphasis));
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, zoneEmphasis));
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, zoneEmphasis));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, args, zoneId));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, args, zoneId));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, args, zoneId));
                 break;
             case 'TwoColumnLeft':
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 8, zoneEmphasis));
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, zoneEmphasis));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 8, args, zoneId));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, args, zoneId));
                 break;
             case 'TwoColumnRight':
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, zoneEmphasis));
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 8, zoneEmphasis));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 4, args, zoneId));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 8, args, zoneId));
                 break;
             case 'Vertical':
-                columns.push(this.getVerticalColumn(zoneEmphasis, isLayoutReflowOnTop));
+                columns.push(this.getVerticalColumn(args, zoneId));
                 break;
             case 'OneColumn':
             default:
-                columns.push(this.getColumn(zoneIndex, sectionIndex++, 12, zoneEmphasis));
+                columns.push(this.getColumn(zoneIndex, sectionIndex++, 12, args, zoneId));
                 break;
         }
         return columns;
     }
-    getColumn(zoneIndex, sectionIndex, sectionFactor, zoneEmphasis) {
+    getColumn(zoneIndex, sectionIndex, sectionFactor, args, zoneId) {
+        const { zoneEmphasis, isCollapsibleSection, isExpanded, showDivider, iconAlignment } = args.options;
         const columnValue = {
             displayMode: 2,
             position: {
                 zoneIndex: zoneIndex,
                 sectionIndex: sectionIndex,
                 sectionFactor: sectionFactor,
-                layoutIndex: 1
+                layoutIndex: 1,
+                zoneId: zoneId
             },
             emphasis: {}
         };
-        if (zoneEmphasis) {
-            const zoneEmphasisValue = ZoneEmphasis[zoneEmphasis];
+        if (zoneEmphasis && ['none', 'neutral', 'soft', 'strong'].includes(zoneEmphasis?.toLocaleLowerCase())) {
+            // Just these zoneEmphasis values should be added to column emphasis
+            const zoneEmphasisValue = ['none', 'neutral', 'soft', 'strong'].indexOf(zoneEmphasis.toLocaleLowerCase());
             columnValue.emphasis = { zoneEmphasis: zoneEmphasisValue };
         }
+        if (isCollapsibleSection) {
+            columnValue.zoneGroupMetadata = {
+                type: 1,
+                isExpanded: !!isExpanded,
+                showDividerLine: !!showDivider,
+                iconAlignment: iconAlignment && iconAlignment.toLocaleLowerCase() === "right" ? "right" : "left"
+            };
+        }
         return columnValue;
     }
-    getVerticalColumn(zoneEmphasis, isLayoutReflowOnTop) {
-        const columnValue = this.getColumn(1, 1, 12, zoneEmphasis);
-        columnValue.position.isLayoutReflowOnTop = isLayoutReflowOnTop !== undefined ? true : false;
+    getVerticalColumn(args, zoneId) {
+        const columnValue = this.getColumn(1, 1, 12, args, zoneId);
+        columnValue.position.isLayoutReflowOnTop = args.options.isLayoutReflowOnTop !== undefined;
         columnValue.position.layoutIndex = 2;
         columnValue.position.controlIndex = 1;
         return columnValue;
     }
+    setBackgroundControl(zoneId, backgroundControl, args) {
+        const { overlayColor, overlayOpacity, useLightText, imageUrl } = args.options;
+        const backgroundDetails = this.getBackgroundDetails(args);
+        if (!backgroundControl) {
+            backgroundControl = {
+                controlType: 14,
+                webPartData: {
+                    properties: {
+                        zoneBackground: {}
+                    },
+                    serverProcessedContent: {
+                        htmlStrings: {},
+                        searchablePlainTexts: {},
+                        imageSources: {},
+                        links: {}
+                    },
+                    dataVersion: "1.0"
+                }
+            };
+        }
+        backgroundControl.webPartData.properties.zoneBackground[zoneId] = {
+            ...backgroundDetails,
+            useLightText: !!useLightText,
+            overlay: {
+                color: overlayColor ? overlayColor : "#FFFFFF",
+                opacity: overlayOpacity ? overlayOpacity : 60
+            }
+        };
+        if (imageUrl && backgroundControl.webPartData.serverProcessedContent.imageSources) {
+            backgroundControl.webPartData.serverProcessedContent.imageSources[`zoneBackground.${zoneId}.imageData.url`] = imageUrl;
+        }
+        return backgroundControl;
+    }
+    getBackgroundDetails(args) {
+        const { gradientText, imageUrl, imageHeight, imageWidth, fillMode } = args.options;
+        const backgroundDetails = {};
+        if (gradientText) {
+            backgroundDetails.type = "gradient";
+            backgroundDetails.gradient = gradientText;
+        }
+        if (imageUrl) {
+            backgroundDetails.type = "image";
+            backgroundDetails.imageData = {
+                source: 2,
+                fileName: "sectionbackground.jpg",
+                height: imageHeight ? imageHeight : 955,
+                width: imageWidth ? imageWidth : 555
+            };
+            backgroundDetails.fillMode = fillMode ? this.fillMode.indexOf(fillMode) : 0;
+        }
+        return backgroundDetails;
+    }
 }
-_a = SpoPageSectionAddCommand, _SpoPageSectionAddCommand_instances = new WeakSet(), _SpoPageSectionAddCommand_initTelemetry = function _SpoPageSectionAddCommand_initTelemetry() {
+_SpoPageSectionAddCommand_instances = new WeakSet(), _SpoPageSectionAddCommand_initTelemetry = function _SpoPageSectionAddCommand_initTelemetry() {
     this.telemetry.push((args) => {
         Object.assign(this.telemetryProperties, {
             order: typeof args.options.order !== 'undefined',
             zoneEmphasis: typeof args.options.zoneEmphasis !== 'undefined',
-            isLayoutReflowOnTop: !!args.options.isLayoutReflowOnTop
+            isLayoutReflowOnTop: !!args.options.isLayoutReflowOnTop,
+            isCollapsibleSection: !!args.options.isCollapsibleSection,
+            showDivider: !!typeof args.options.showDivider,
+            iconAlignment: typeof args.options.iconAlignment !== 'undefined',
+            isExpanded: !!args.options.isExpanded,
+            gradientText: typeof args.options.gradientText !== 'undefined',
+            imageUrl: typeof args.options.imageUrl !== 'undefined',
+            imageHeight: typeof args.options.imageHeight !== 'undefined',
+            imageWidth: typeof args.options.imageWidth !== 'undefined',
+            fillMode: typeof args.options.fillMode !== 'undefined',
+            useLightText: !!args.options.useLightText,
+            overlayColor: typeof args.options.overlayColor !== 'undefined',
+            overlayOpacity: typeof args.options.overlayOpacity !== 'undefined'
         });
     });
 }, _SpoPageSectionAddCommand_initOptions = function _SpoPageSectionAddCommand_initOptions() {
@@ -181,14 +273,40 @@ _a = SpoPageSectionAddCommand, _SpoPageSectionAddCommand_instances = new WeakSet
         option: '-u, --webUrl <webUrl>'
     }, {
         option: '-t, --sectionTemplate <sectionTemplate>',
-        autocomplete: _a.SectionTemplate
+        autocomplete: this.sectionTemplate
     }, {
         option: '--order [order]'
     }, {
         option: '--zoneEmphasis [zoneEmphasis]',
-        autocomplete: _a.ZoneEmphasis
+        autocomplete: this.zoneEmphasis
     }, {
         option: '--isLayoutReflowOnTop'
+    }, {
+        option: '--isCollapsibleSection'
+    }, {
+        option: '--showDivider'
+    }, {
+        option: '--iconAlignment [iconAlignment]',
+        autocomplete: this.iconAlignment
+    }, {
+        option: '--isExpanded'
+    }, {
+        option: '--gradientText [gradientText]'
+    }, {
+        option: '--imageUrl [imageUrl]'
+    }, {
+        option: '--imageHeight [imageHeight]'
+    }, {
+        option: '--imageWidth [imageWidth]'
+    }, {
+        option: '--fillMode [fillMode]',
+        autocomplete: this.fillMode
+    }, {
+        option: '--useLightText'
+    }, {
+        option: '--overlayColor [overlayColor]'
+    }, {
+        option: '--overlayOpacity [overlayOpacity]'
     });
 }, _SpoPageSectionAddCommand_initValidators = function _SpoPageSectionAddCommand_initValidators() {
     this.validators.push(async (args) => {
@@ -201,8 +319,8 @@ _a = SpoPageSectionAddCommand, _SpoPageSectionAddCommand_instances = new WeakSet
             }
         }
         if (typeof args.options.zoneEmphasis !== 'undefined') {
-            if (!(args.options.zoneEmphasis in ZoneEmphasis)) {
-                return 'The value of parameter zoneEmphasis must be None|Neutral|Soft|Strong';
+            if (!this.zoneEmphasis.some(zoneEmphasisValue => zoneEmphasisValue.toLocaleLowerCase() === args.options.zoneEmphasis?.toLowerCase())) {
+                return `The value of parameter zoneEmphasis must be ${this.zoneEmphasis.join(', ')}`;
             }
         }
         if (typeof args.options.isLayoutReflowOnTop !== 'undefined') {
@@ -210,10 +328,43 @@ _a = SpoPageSectionAddCommand, _SpoPageSectionAddCommand_instances = new WeakSet
                 return 'Specify isLayoutReflowOnTop when the sectionTemplate is set to Vertical.';
             }
         }
+        if (typeof args.options.iconAlignment !== 'undefined') {
+            if (!this.iconAlignment.some(iconAlignmentValue => iconAlignmentValue.toLocaleLowerCase() === args.options.iconAlignment?.toLowerCase())) {
+                return `The value of parameter iconAlignment must be ${this.iconAlignment.join(', ')}`;
+            }
+        }
+        if (typeof args.options.fillMode !== 'undefined') {
+            if (!this.fillMode.some(fillModeValue => fillModeValue.toLocaleLowerCase() === args.options.fillMode?.toLowerCase())) {
+                return `The value of parameter fillMode must be ${this.fillMode.join(', ')}`;
+            }
+        }
+        if (args.options.zoneEmphasis?.toLocaleLowerCase() !== 'image' && (args.options.imageUrl || args.options.imageWidth ||
+            args.options.imageHeight || args.options.fillMode)) {
+            return 'Specify imageUrl, imageWidth, imageHeight or fillMode only when zoneEmphasis is set to Image';
+        }
+        if (args.options.zoneEmphasis?.toLocaleLowerCase() === 'image' && !args.options.imageUrl) {
+            return 'Specify imageUrl when zoneEmphasis is set to Image';
+        }
+        if (args.options.zoneEmphasis?.toLowerCase() !== 'gradient' && args.options.gradientText) {
+            return 'Specify gradientText only when zoneEmphasis is set to Gradient';
+        }
+        if (args.options.zoneEmphasis?.toLowerCase() === 'gradient' && !args.options.gradientText) {
+            return 'Specify gradientText when zoneEmphasis is set to Gradient';
+        }
+        if (args.options.overlayOpacity && (args.options.overlayOpacity < 0 || args.options.overlayOpacity > 100)) {
+            return 'The value of parameter overlayOpacity must be between 0 and 100';
+        }
+        if (args.options.overlayColor && !/^#[0-9a-f]{6}$/i.test(args.options.overlayColor)) {
+            return 'The value of parameter overlayColor must be a valid hex color';
+        }
+        if (!(args.options.zoneEmphasis && ['image', 'gradient'].includes(args.options.zoneEmphasis.toLowerCase())) && (args.options.overlayColor || args.options.overlayOpacity || args.options.useLightText)) {
+            return 'Specify overlayColor or overlayOpacity only when zoneEmphasis is set to Image or Gradient';
+        }
         return validation.isValidSharePointUrl(args.options.webUrl);
     });
+}, _SpoPageSectionAddCommand_initTypes = function _SpoPageSectionAddCommand_initTypes() {
+    this.types.string = ['pageName', 'webUrl', 'sectionTemplate', 'zoneEmphasis', 'iconAlignment', 'gradientText', 'imageUrl', 'fillMode', 'overlayColor'];
+    this.types.boolean = ['isLayoutReflowOnTop', 'isCollapsibleSection', 'showDivider', 'isExpanded', 'useLightText'];
 };
-SpoPageSectionAddCommand.SectionTemplate = ['OneColumn', 'OneColumnFullWidth', 'TwoColumn', 'ThreeColumn', 'TwoColumnLeft', 'TwoColumnRight', 'Vertical'];
-SpoPageSectionAddCommand.ZoneEmphasis = ['None', 'Neutral', 'Soft', 'Strong'];
 export default new SpoPageSectionAddCommand();
 //# sourceMappingURL=page-section-add.js.map

package/dist/utils/spo.js

@@ -490,10 +490,10 @@ export const spo = {
    * @param webUrl Web url
    * @param email The email of the user
    * @param logger the Logger object
-   * @param verbose set if verbose logging should be logged
+   * @param verbose set for verbose logging
    */
     async getUserByEmail(webUrl, email, logger, verbose) {
-        if (verbose) {
+        if (verbose && logger) {
             await logger.logToStderr(`Retrieving the spo user by email ${email}`);
         }
         const requestUrl = `${webUrl}/_api/web/siteusers/GetByEmail('${formatting.encodeQueryParameter(email)}')`;
@@ -564,10 +564,10 @@ export const spo = {
     * @param webUrl Web url
     * @param name The name of the group
     * @param logger the Logger object
-    * @param verbose set if verbose logging should be logged
+    * @param verbose set for verbose logging
     */
     async getGroupByName(webUrl, name, logger, verbose) {
-        if (verbose) {
+        if (verbose && logger) {
             await logger.logToStderr(`Retrieving the group by name ${name}`);
         }
         const requestUrl = `${webUrl}/_api/web/sitegroups/GetByName('${formatting.encodeQueryParameter(name)}')`;
@@ -586,10 +586,10 @@ export const spo = {
     * @param webUrl Web url
     * @param name the name of the role definition
     * @param logger the Logger object
-    * @param debug set if debug logging should be logged
+    * @param verbose set for verbose logging
     */
-    async getRoleDefinitionByName(webUrl, name, logger, debug) {
-        if (debug) {
+    async getRoleDefinitionByName(webUrl, name, logger, verbose) {
+        if (verbose && logger) {
             await logger.logToStderr(`Retrieving the role definitions for ${name}`);
         }
         const roledefinitions = await odata.getAllItems(`${webUrl}/_api/web/roledefinitions`);
@@ -1516,6 +1516,29 @@ export const spo = {
         };
         const itemsResponse = await request.get(requestOptionsItems);
         return (itemsResponse);
+    },
+    /**
+    * Retrieves the file by id.
+    * Returns a FileProperties object
+    * @param webUrl Web url
+    * @param id the id of the file
+    * @param logger the Logger object
+    * @param verbose set for verbose logging
+    */
+    async getFileById(webUrl, id, logger, verbose) {
+        if (verbose && logger) {
+            await logger.logToStderr(`Retrieving the file with id ${id}`);
+        }
+        const requestUrl = `${webUrl}/_api/web/GetFileById('${formatting.encodeQueryParameter(id)}')`;
+        const requestOptions = {
+            url: requestUrl,
+            headers: {
+                'accept': 'application/json;odata=nometadata'
+            },
+            responseType: 'json'
+        };
+        const file = await request.get(requestOptions);
+        return file;
     }
 };
 //# sourceMappingURL=spo.js.map

package/docs/docs/cmd/spo/page/page-section-add.mdx

@@ -26,10 +26,46 @@ m365 spo page section add [options]
 : Order of the section to add.
 
 `--zoneEmphasis [zoneEmphasis]`
-: Section background shading. Allowed values `None`, `Neutral`, `Soft`, `Strong`
+: Section background shading. Allowed values `None`, `Neutral`, `Soft`, `Strong`, `Image`,`Gradient`
 
 `--isLayoutReflowOnTop`
-: The position of the Vertical section for smaller screens. Applied only for Vertical section.
+: The position of the Vertical section for smaller screens. Applied only for `Vertical` section.
+
+`--isCollapsibleSection`
+: Set section to be collapsible.
+
+`--showDivider`
+: Shows a divider line between sections.
+
+`--iconAlignment [iconAlignment]`
+: Specifies the alignment of the expand/collapse icon. Sets `Left` alignment if not specified.
+
+`--isExpanded`
+: Sets the default display state of the collapsible section. Sets `false` if not specified.
+
+`--gradientText [gradientText]`
+: Sets the gradient setting of the background of a section. Required when `zoneEmphasis` is `Gradient`.
+
+`--imageUrl [imageUrl]`
+: The background image URL. Required when `zoneEmphasis` is `Image`.
+
+`--imageHeight [imageHeight]`
+: The height of the background image. Applied only when when `zoneEmphasis` is `Image`. Sets `955` value if not specified.
+
+`--imageWidth [imageWidth]`
+: The width of the background image. Applied only when `zoneEmphasis` is `Image`. Sets `555` value if not specified.
+
+`--fillMode [fillMode]`
+: The fill mode of the background image. Applied only when `zoneEmphasis` is `Image`. Possible values are `ScaleToFill`, `ScaleToFit`, `Tile`, `OriginalSize`. Sets `ScaleToFill` value if not specified.
+
+`--useLightText`
+: Specifies whether to use light text for the background. Applied only when `zoneEmphasis` is `Image`.
+
+`--overlayColor [overlayColor]`
+:	The overlay color for the background in #RRGGBB format. Applied only when `zoneEmphasis` is `Image` or `Gradient`. Sets `#ffffff` value if not specified.
+
+`--overlayOpacity [overlayOpacity]`	
+: The overlay opacity for the background. Applied only when `zoneEmphasis` is `Image` or `Gradient`. Sets `60` value if not specified.
 ```
 
 <Global />
@@ -64,6 +100,25 @@ Add Vertical section with background shading to the modern page with adjusting t
 m365 spo page section add --pageName home.aspx --webUrl https://contoso.sharepoint.com/sites/newsletter --sectionTemplate Vertical --zoneEmphasis Neutral --isLayoutReflowOnTop
 ```
 
+Add OneColumn section as a collapsible section as expanded with icon alligned to the left
+
+```sh
+m365 spo page section add --pageName home.aspx --webUrl https://contoso.sharepoint.com/sites/newsletter --sectionTemplate OneColumn --isCollapsibleSection --isExpanded --iconAlignment Left
+```
+
+Add TwoColumn section with Image background
+
+```sh
+m365 spo page section add --pageName home.aspx --webUrl https://contoso.sharepoint.com/sites/newsletter --sectionTemplate TwoColumn --imageUrl "https://contoso.com/image.jpg" --zoneEmphasis Image --fillMode Tile
+```
+
+Add OneColumn section with Gradient background
+
+```sh
+m365 spo page section add --pageName home.aspx --webUrl https://contoso.sharepoint.com/sites/newsletter --sectionTemplate TwoColumn --zoneEmphasis Gradient --gradientText "linear-gradient(72.44deg, #E6FBFE 0%, #EDDDFB 100%)"
+```
+
+
 ## Response
 
 The command won't return a response on success.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pnp/cli-microsoft365",
-  "version": "9.1.0-beta.4ee36d4",
+  "version": "9.1.0-beta.8c76288",
   "description": "Manage Microsoft 365 and SharePoint Framework projects on any platform",
   "license": "MIT",
   "main": "./dist/api.js",