Merge pull request #1712 from saiiiiiii/layoutcustomizer

Author: hugoabernier

samples/js-application-layout-customizer/.eslintrc.js

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/js-application-layout-customizer/.gitignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/js-application-layout-customizer/.npmignore

@@ -0,0 +1 @@
+v18.20.8

samples/js-application-layout-customizer/.nvmrc

@@ -0,0 +1,22 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.20.8",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
+    "libraryName": "three-column-layout",
+    "libraryId": "e32ff069-e26e-4e48-8525-41867ecd37c5",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "three-column-layout",
+    "solutionShortDescription": "three-column-layout description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "extension",
+    "extensionType": "ApplicationCustomizer"
+  }
+}

samples/js-application-layout-customizer/.yo-rc.json

@@ -0,0 +1,94 @@
+# LayoutCustomizer — SPFx Application Customizer
+
+A SharePoint Framework (SPFx) Application Customizer that applies a responsive **3-column grid layout** to SharePoint Modern pages. Provides a Fluent-styled floating toolbar and modal panel for live column-width configuration, persisted via `localStorage`.
+
+---
+
+![Layout Customizer](./assets/layout-customizer-demo.gif)
+
+## Features
+
+- Responsive 3-column layout applied to SharePoint Modern pages.
+- Converts page sections into a flexible Left, Main, and Right grid layout.
+- Floating toolbar for quick layout actions.
+- Fluent-style configuration panel for adjusting column widths.
+- Live layout preview when changing column values.
+- Slider and numeric input support for precise column configuration.
+- Optional right navigation panel that can be enabled or disabled.
+- Layout configuration stored in browser localStorage (can be enhanced to store settings in the SharePoint page).
+- Reset option to clear saved layout settings.
+- Lightweight implementation using SPFx Application Customizer.
+
+## Compatibility
+
+| :warning: Important          |
+|:---------------------------|
+| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to Toolchain this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
+|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility.   |
+
+This sample is optimally compatible with the following environment configuration:
+
+![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
+![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
+![Toolchain: Heft](https://img.shields.io/badge/Toolchain-Heft-green.svg)
+![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
+![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
+![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
+![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
+![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
+
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
+
+## Prerequisites
+
+- Node.js v18.17.1 or compatible version
+- SharePoint Online environment
+- Site Collection Administrator permissions (for deployment)
+
+## Contributors
+
+-[@saiiiiiii](https://github.com/saiiiiiii) |
+
+## Version history
+
+| Version | Date | Comments |
+| ------- | ---- | -------- |
+| 1.0.0 | March 2026 | Initial release |
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- In the command-line run:
+  - `npm install`
+  - `gulp serve`
+- To deploy:
+  - `gulp bundle --ship`
+  - `gulp package-solution --ship`
+  - Upload the `.sppkg` file to your App Catalog
+  - Install the app on your site
+
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp)
+- [PnPjs Documentation](https://pnp.github.io/pnpjs/)
+
+## Help
+
+If you encounter any issues while using this sample, [create a new issue](https://github.com/saiiiiiii/js-application-layout-customizer/issues/new).
+
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/js-application-layout-customizer" />

samples/js-application-layout-customizer/README.md

@@ -0,0 +1,67 @@
+[
+    {
+      "name": "pnp-sp-dev-spfx-extensions-js-application-layout-customizer",
+      "source": "pnp",
+      "title": "SharePoint Page Indexer",
+      "shortDescription": "A SharePoint Framework (SPFx) Application Customizer that applies a responsive 3-column grid layout to SharePoint Modern pages. Provides a Fluent-styled floating toolbar and modal panel for live column-width configuration, persisted via localStorage.",
+      "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-layout-customizer",
+      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-layout-customizer",
+      "longDescription": [
+        "A SharePoint Framework (SPFx) Application Customizer that applies a responsive 3-column grid layout to SharePoint Modern pages. Provides a Fluent-styled floating toolbar and modal panel for live column-width configuration, persisted via localStorage."
+      ],
+      "creationDateTime": "2026-03-11",
+      "updateDateTime": "2026-03-11",
+      "products": [
+        "SharePoint",
+        "Office"
+      ],
+      "metadata": [
+        {
+          "key": "CLIENT-SIDE-DEV",
+          "value": "TypeScript"
+        },
+        {
+          "key": "SPFX-VERSION",
+          "value": "1.20.0"
+        }
+      ],
+      "thumbnails": [
+        {
+          "name": "layout-customizer-demo.gif",
+          "type": "image",
+          "order": 100,
+          "url": "https://github.com/saiiiiiii/js-application-layout-customizer/raw/main/assets/layout-customizer-demo.gif",
+          "alt": "SharePoint Page Layout Customizer"
+        }
+      ],
+      "authors": [
+        {
+          "gitHubAccount": "saiiiiiii",
+          "pictureUrl": "https://avatars.githubusercontent.com/u/46020510?v=4",
+          "name": "Sai Siva Ram Bandaru"
+        }
+      ],
+      "references": [
+        {
+          "name": "Getting started with SharePoint Framework",
+          "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
+          "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
+        },
+        {
+          "name": "Build your first SharePoint Framework Extension",
+          "description": "Learn how to build your first SharePoint Framework Application Customizer.",
+          "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension"
+        },
+        {
+          "name": "Microsoft 365 Patterns and Practices",
+          "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.",
+          "url": "https://aka.ms/m365pnp"
+        },
+        {
+          "name": "PnPjs Documentation",
+          "description": "PnPjs is a collection of fluent libraries for consuming SharePoint, Graph, and Office 365 REST APIs.",
+          "url": "https://pnp.github.io/pnpjs/"
+        }
+      ]
+    }
+  ]

samples/js-application-layout-customizer/assets/layout-customizer-demo.gif

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "layout-customizer-application-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/layoutCustomizer/LayoutCustomizerApplicationCustomizer.js",
+          "manifest": "./src/extensions/layoutCustomizer/LayoutCustomizerApplicationCustomizer.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "LayoutCustomizerApplicationCustomizerStrings": "lib/extensions/layoutCustomizer/loc/{locale}.js"
+  }
+}

samples/js-application-layout-customizer/assets/sample.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "three-column-layout",
+  "accessKey": "<!-- ACCESS KEY -->"
+}