🚀 Add 'Set Form Customizer' command to the SharePoint Framework Toolkit

Author: nicodecleyre

package.json

@@ -466,6 +466,12 @@
 				"category": "SharePoint Framework Toolkit",
 				"icon": "$(sync)"
 			},
+			{
+				"command": "spfx-toolkit.setFormCustomizer",
+				"title": "Set Form Customizer",
+				"category": "SharePoint Framework Toolkit",
+				"icon": "$(file-code)"
+			},
 			{
 				"command": "spfx-toolkit.showMoreActions",
 				"title": "...",

src/constants/Commands.ts

@@ -60,5 +60,8 @@ export const Commands = {
   enableAppCatalogApp: `${EXTENSION_NAME}.enableAppCatalogApp`,
   disableAppCatalogApp: `${EXTENSION_NAME}.disableAppCatalogApp`,
   upgradeAppCatalogApp: `${EXTENSION_NAME}.upgradeAppCatalogApp`,
-  showMoreActions: `${EXTENSION_NAME}.showMoreActions`
+  showMoreActions: `${EXTENSION_NAME}.showMoreActions`,
+
+  // Set form customizer
+  setFormCustomizer: `${EXTENSION_NAME}.setFormCustomizer`
 };

src/panels/CommandPanel.ts

@@ -311,6 +311,7 @@ export class CommandPanel {
     actionCommands.push(new ActionTreeItem('Add new component', '', { name: 'add', custom: false }, undefined, Commands.addToProject));
     actionCommands.push(new ActionTreeItem('Scaffold CI/CD Workflow', '', { name: 'rocket', custom: false }, undefined, Commands.pipeline));
     actionCommands.push(new ActionTreeItem('View samples', '', { name: 'library', custom: false }, undefined, Commands.samplesGallery));
+    actionCommands.push(new ActionTreeItem('Set Form Customizer', '', { name: 'checklist', custom: false }, undefined, Commands.setFormCustomizer));
 
     window.registerTreeDataProvider('pnp-view-actions', new ActionTreeDataProvider(actionCommands));
   }

src/services/actions/CliActions.ts

@@ -69,6 +69,9 @@ export class CliActions {
     subscriptions.push(
       commands.registerCommand(Commands.upgradeAppCatalogApp, CliActions.upgradeAppCatalogApp)
     );
+    subscriptions.push(
+      commands.registerCommand(Commands.setFormCustomizer, CliActions.setFormCustomizer)
+    );
   }
 
   /**
@@ -920,4 +923,90 @@ export class CliActions {
       Notifications.error(`${fileName}.tour file not found in path ${path.join(wsFolder.uri.fsPath, '.tours')}. Cannot start Code Tour.`);
     }
   }
+
+  /**
+   * Sets the form customizer for a content type on a list.
+   */
+  public static async setFormCustomizer() {
+    const siteUrl = await window.showInputBox({
+      prompt: 'Enter the site URL',
+      ignoreFocusOut: true,
+      validateInput: (value) => value ? undefined : 'Site URL is required'
+    });
+
+    if (!siteUrl) {
+      return;
+    }
+
+    const listTitle = await window.showInputBox({
+      prompt: 'Enter the list title',
+      ignoreFocusOut: true,
+      validateInput: (value) => value ? undefined : 'List title is required'
+    });
+
+    if (!listTitle) {
+      return;
+    }
+
+    const contentType = await window.showInputBox({
+      prompt: 'Enter the Content Type name',
+      ignoreFocusOut: true,
+      validateInput: (value) => value ? undefined : 'Content Type name is required'
+    });
+
+    if (!contentType) {
+      return;
+    }
+
+    const editFormClientSideComponentId = await window.showInputBox({
+      prompt: 'Enter the Edit form customizer (leave empty to skip)',
+      ignoreFocusOut: true
+    });
+
+    const newFormClientSideComponentId  = await window.showInputBox({
+      prompt: 'Enter the New form customizer (leave empty to skip)',
+      ignoreFocusOut: true
+    });
+
+    const displayFormClientSideComponentId = await window.showInputBox({
+      prompt: 'Enter the View form customizer (leave empty to skip)',
+      ignoreFocusOut: true
+    });
+
+    const commandOptions: any = {
+      webUrl: siteUrl,
+      listTitle: listTitle,
+      name: contentType
+    };
+
+    if (editFormClientSideComponentId) {
+      commandOptions.EditFormClientSideComponentId = editFormClientSideComponentId;
+    }
+
+    if (newFormClientSideComponentId ) {
+      commandOptions.newFormCustomizer = newFormClientSideComponentId ;
+    }
+
+    if (displayFormClientSideComponentId) {
+      commandOptions.DisplayFormClientSideComponentId = displayFormClientSideComponentId;
+    }
+
+    await window.withProgress({
+      location: ProgressLocation.Notification,
+      title: 'Setting form customizer...',
+      cancellable: true
+    }, async (progress: Progress<{ message?: string; increment?: number }>) => {
+      try {
+        const result = await CliExecuter.execute('spo contenttype set', 'json', commandOptions);
+        if (result.stderr) {
+          Notifications.error(result.stderr);
+        } else {
+          Notifications.info('Form customizer set successfully.');
+        }
+      } catch (e: any) {
+        const message = e?.error?.message;
+        Notifications.error(message);
+      }
+    });
+  }
 }