Enhancement: Extend 'spo page section add' template options to include the "Vertical" section

[MistaTwist]

We currently have OneColumn, OneColumnFullWidth, TwoColumn, ThreeColumn, TwoColumnLeft, TwoColumnRight available as section templates to use, but not the Vertical one. Is there any chance we could have the newer Vertical template added to the list, please?

[garrytrinder]

Great suggestion @MistaTwist 👍🏻

Looking at how this is implemented in PnP PowerShell it looks like Vertical is not an option on its own but as an addition to the options already present, for example, OneColumnVerticalSection. The reason for this is down to how the layouts are created and added to the CanvasContent1 field of the target page which we also follow in the CLI.

To implement this enhancement fully, we will also need to implement the below options

• OneColumnVerticalSection
• TwoColumnVerticalSection
• ThreeColumnVerticalSection
• TwoColumnLeftVerticalSection
• TwoColumnRightVerticalSection

[Adam-it]

@pnp/cli-for-microsoft-365-maintainers maybe this we could recheck and try to create a spec for this one to make it more appealing to the contributors?
Any ideas? @garrytrinder 🙏?

[waldekmastykarz]

Great idea @Adam-it! 👏

[Adam-it]

@garrytrinder did you find some additional resource we may use to spec this one out? I tried to investigate this a bit but TBH it seems quite hard, for sure not a good one for a "good first issue"

[garrytrinder]

Managing changes to pages is not trivial, so I agree that this is a wouldn't be a good first issue. I think we should revisit this and do some more research as the issue is a couple of years old.

[mkm17]

@Adam-it @garrytrinder

Hello, while searching for tasks I could contribute to, I came across this specific issue.
If you don't mind, I would like to take on this item.

I have done a quick research by comparing the CanvasContent1 property of a site page with and without a Vertical section in various setups. In my opinion, resolving this issue can be accomplished more easily than in PnP-PowerShell by including only the Vertical option.

To validate this approach, I will continue to check the implementation in PnP-PowerShell and next I will test my proposal in further scenarios.

Since it involves the same part of the code, I can also address the missing functionality of setting the zoneEmphasis per section.

Please let me know if this sounds good to you and if I have your permission for taking over the task.

Best,
Michal

[Jwaegebaert]

Sounds good to me @mkm17 👍

I'll already assign you to this issue. Thanks for your help.

[nicodecleyre]

Great to hear that you want to help out with tackling this issue @mkm17 🤩. Don't hesitate to contact us if you need any help or join our discord if you haven't done so where you can reach out to us in case you need any help https://aka.ms/cli-m365/discord

[mkm17]

Hi @Jwaegebaert @nicodecleyre,
I have submitted a new pull request that extends the 'spo page section add' command. Link

In this update, I have implemented the ability to add a Vertical section.

Additionally, I have included a handler for zoneEmphasis (the background color of a section) in all templates and added the option for isLayoutReflowOnTop for the Vertical section. This allows users to choose whether the Vertical section should appear at the top or bottom for smaller screens.

Since this is my first pull request for the project, I would appreciate it if you could review and confirm whether everything is in line with the project's guidelines :)

[Jwaegebaert]

Awesome, thanks for your pr @mkm17. We'll try to review it asap.