From 929b47bcc6c39676dbda81f56daca02c6c6ecfba Mon Sep 17 00:00:00 2001 From: Harminder Singh Date: Sat, 26 Apr 2025 15:07:35 +0530 Subject: [PATCH 1/8] manifests.js file path reference updated --- docs/spfx/debug-in-vscode.md | 12 ++++-- docs/spfx/debug-modern-pages.md | 37 ++++++++++++++----- .../migrate-from-ecb-to-spfx-extensions.md | 9 ++++- .../migrate-from-jslink-to-spfx-extensions.md | 4 +- ...om-usercustomactions-to-spfx-extensions.md | 9 ++++- 5 files changed, 53 insertions(+), 18 deletions(-) diff --git a/docs/spfx/debug-in-vscode.md b/docs/spfx/debug-in-vscode.md index b398c830f8..f7c0764572 100644 --- a/docs/spfx/debug-in-vscode.md +++ b/docs/spfx/debug-in-vscode.md @@ -1,7 +1,7 @@ --- title: Debug SharePoint Framework solutions in Visual Studio Code description: Prerequisites and steps for configuring Visual Studio Code for debugging SharePoint Framework solutions. -ms.date: 07/15/2022 +ms.date: 04/26/2025 ms.localizationpriority: high --- # Debug SharePoint Framework solutions in Visual Studio Code @@ -116,7 +116,7 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P ```json ?loadSPFX=true - &debugManifestsFile=https://localhost:4321/temp/manifests.js + &debugManifestsFile=https://localhost:4321/temp/build/manifests.js &customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{ "location":"ClientSideExtension.ApplicationCustomizer", "properties":{ @@ -125,6 +125,9 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P }} ``` + > [!NOTE] + > Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + More detail about the URL parameters: - **loadSPFX=true**: Ensures that the SharePoint Framework is loaded on the page. For performance reasons, the framework does not load unless at least one extension is registered. Because no components are registered, you must explicitly load the framework. @@ -142,7 +145,7 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P ```json https://contoso.sharepoint.com/Lists/Contoso/AllItems.aspx ?loadSPFX=true - &debugManifestsFile=https://localhost:4321/temp/manifests.js + &debugManifestsFile=https://localhost:4321/temp/build/manifests.js &customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{ "location":"ClientSideExtension.ApplicationCustomizer", "properties":{ @@ -151,6 +154,9 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P }} ``` + > [!NOTE] + > Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + 1. Select **Load debug scripts** to continue loading scripts from your local host. ![Allow Debug Manifest question from the page](../images/ext-app-debug-manifest-message.png) diff --git a/docs/spfx/debug-modern-pages.md b/docs/spfx/debug-modern-pages.md index 4d2aa5f4d1..3d0cb22503 100644 --- a/docs/spfx/debug-modern-pages.md +++ b/docs/spfx/debug-modern-pages.md @@ -1,7 +1,7 @@ --- title: Debug SharePoint Framework solutions on modern SharePoint pages description: Guidance on how to debug SharePoint Framework solutions on modern SharePoint pages -ms.date: 12/14/2023 +ms.date: 04/26/2025 ms.localizationpriority: high --- # Debug SharePoint Framework solutions on modern SharePoint pages @@ -96,7 +96,7 @@ To debug an Application Customizer, add the following to the URL of your modern ```json ?loadSPFX=true -&debugManifestsFile=https://localhost:4321/temp/manifests.js +&debugManifestsFile=https://localhost:4321/temp/build/manifests.js &customActions={"":{ "location":"", "properties": @@ -108,7 +108,7 @@ For example: ```text https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx ?loadSPFX=true - &debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={ + &debugManifestsFile=https://localhost:4321/temp/build/manifests.js&customActions={ "e5625e23-5c5a-4007-a335-e6c2c3afa485":{ "location":"ClientSideExtension.ApplicationCustomizer", "properties":{ @@ -118,6 +118,10 @@ https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx } ``` +> [!NOTE] +> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + + Following are the query string parameters that you need to add: | Parameter | Description | @@ -149,7 +153,7 @@ To debug a field customizer, add the following to the URL of your modern page: ```json ?loadSPFX=true -&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={ +&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&fieldCustomizers={ "":{ "id":"", "properties": @@ -162,7 +166,7 @@ For example: ```text https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx ?loadSPFX=true - &debugManifestsFile=https://localhost:4321/temp/manifests.js + &debugManifestsFile=https://localhost:4321/temp/build/manifests.js &fieldCustomizers={ "Percent":{ "id":"45a1d299-990d-4917-ba62-7cb67158be16", @@ -173,6 +177,11 @@ https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx } ``` + +> [!NOTE] +> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + + Following are the query string parameters that you need to add: |Parameter |Description | @@ -204,7 +213,7 @@ To debug a list view command set, add the following to the URL of your modern pa ```json ?loadSPFX=true -&debugManifestsFile=https://localhost:4321/temp/manifests.js +&debugManifestsFile=https://localhost:4321/temp/build/manifests.js &customActions={"":{ "location":"", "properties": @@ -216,7 +225,7 @@ For example: ```text https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx ?loadSPFX=true - &debugManifestsFile=https://localhost:4321/temp/manifests.js + &debugManifestsFile=https://localhost:4321/temp/build/manifests.js &customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6":{ "location":"ClientSideExtension.ListViewCommandSet.CommandBar", "properties":{ @@ -226,6 +235,11 @@ https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx }} ``` + +> [!NOTE] +> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + + Following are the query string parameters that you need to add: | Parameter | Description | @@ -259,7 +273,7 @@ gulp serve --nobrowser Next, in the web browser, navigate to the modern page, on which you want to test the web parts. After the page loaded, add the following to the URL: ```text -?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js +?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js ``` For example: @@ -270,9 +284,14 @@ For example: ```text https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx ?loadSPFX=true - &debugManifestsFile=https://localhost:4321/temp/manifests.js + &debugManifestsFile=https://localhost:4321/temp/build/manifests.js ``` + +> [!NOTE] +> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + + The page will reload and show a popup asking you to confirm that you now will be loading debug scripts. ![Popup to confirm loading debug scripts on a modern page in SharePoint Online](../images/ext-com-accept-debug-scripts.png) diff --git a/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md b/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md index 6cb8549323..9e592c090a 100644 --- a/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md +++ b/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md @@ -1,7 +1,7 @@ --- title: Tutorial - Migrating from Edit Control Block (ECB) menu item to SharePoint Framework Extension description: Migrate from old "classic" customizations (ECB) to the new model based on SharePoint Framework extensions. -ms.date: 06/13/2022 +ms.date: 04/26/2025 ms.localizationpriority: medium --- @@ -198,9 +198,14 @@ To reproduce the same behavior of the ECB menu item built by using the SharePoin 1. Open your favorite browser and go to a "modern" library of any "modern" team site. Append the following query string parameters to the **AllItems.aspx** page URL. ```html - ?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"6c5b8ee9-43ba-4cdf-a106-04857c8307be":{"location":"ClientSideExtension.ListViewCommandSet.ContextMenu","properties":{"targetUrl":"ShowDetail.aspx"}}} + ?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&customActions={"6c5b8ee9-43ba-4cdf-a106-04857c8307be":{"location":"ClientSideExtension.ListViewCommandSet.ContextMenu","properties":{"targetUrl":"ShowDetail.aspx"}}} ``` + +> [!NOTE] +> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + + In the previous query string, replace the GUID with the `id` value you saved from the **CustomEcbCommandSet.manifest.json** file. Moreover, there's a `location` property that assumes the value of **ClientSideExtension.ListViewCommandSet.ContextMenu**, which instructs SPFx to render the Command Set as an ECB menu item. Following are all the options for the `location` property: diff --git a/docs/spfx/extensions/guidance/migrate-from-jslink-to-spfx-extensions.md b/docs/spfx/extensions/guidance/migrate-from-jslink-to-spfx-extensions.md index b1f33242d1..2c84e5cbb6 100644 --- a/docs/spfx/extensions/guidance/migrate-from-jslink-to-spfx-extensions.md +++ b/docs/spfx/extensions/guidance/migrate-from-jslink-to-spfx-extensions.md @@ -1,7 +1,7 @@ --- title: Tutorial - Migrating from JSLink to SharePoint Framework extensions description: Migrate from old "classic" customizations (JSLink) to the new model based on SharePoint Framework extensions. -ms.date: 06/13/2022 +ms.date: 04/26/2025 ms.localizationpriority: high --- # Migrating from JSLink to SharePoint Framework extensions @@ -244,7 +244,7 @@ To reproduce the same behavior of the `JSLink` custom field rendering, you need 1. Open your favorite browser, and go to a "modern" list, which has a custom field with the name **Color** and the type **Choice** with the same value options as before (Red, Green, Blue, Yellow). You can eventually use the list you created in the "classic" site, just viewing it with the new "modern" experience. Now, append the following query string parameters to the **AllItems.aspx** page URL. ```http - ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Color":{"id":"c3070978-d85e-4298-8758-70b5b5933076"}} + ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&fieldCustomizers={"Color":{"id":"c3070978-d85e-4298-8758-70b5b5933076"}} ``` In this query string, replace the GUID with the `id` value you saved from the **CustomColorFieldFieldCustomizer.manifest.json** file, and the **Color** property name refers to the name of the field to customize. If you like, you can also provide a custom configuration object, serialized in JSON format, as an additional parameter for the field customizer construction. diff --git a/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md b/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md index 5c92c4549d..81fee28ff4 100644 --- a/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md +++ b/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md @@ -1,7 +1,7 @@ --- title: Tutorial - Migrating from UserCustomAction to SharePoint Framework extensions description: Migrate from old "classic" customizations (CustomAction) to the new model based on SharePoint Framework extensions. -ms.date: 06/13/2022 +ms.date: 04/26/2025 ms.localizationpriority: medium --- @@ -326,9 +326,14 @@ The UI elements of the custom footer are rendered using React and a custom React 1. Now open your favorite browser and go to a "modern" page of any "modern" team site. Now, append the following query string parameters to the page's URL. ```html - ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"82242bbb-f951-4c71-a978-80eb8f35e4c1":{"location":"ClientSideExtension.ApplicationCustomizer"}} + ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&customActions={"82242bbb-f951-4c71-a978-80eb8f35e4c1":{"location":"ClientSideExtension.ApplicationCustomizer"}} ``` + +> [!NOTE] +> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + + In this query string, replace the GUID with the `id` value you saved from the **CustomFooterApplicationCustomizer.manifest.json** file. Notice that when executing the page request, you're prompted with a warning message box with the title "Allow debug scripts?", which asks your consent to run code from localhost for security reasons. If you want to locally debug and test the solution, you have to allow it to "Load debug scripts." From bacee8b844964f18ae3b5ed57943c3c9bf9bf2af Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 2 May 2025 11:48:37 -0400 Subject: [PATCH 2/8] typo & grammatical fixes --- docs/spfx/debug-in-vscode.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/spfx/debug-in-vscode.md b/docs/spfx/debug-in-vscode.md index f7c0764572..958dd08d1d 100644 --- a/docs/spfx/debug-in-vscode.md +++ b/docs/spfx/debug-in-vscode.md @@ -8,13 +8,13 @@ ms.localizationpriority: high Visual Studio Code is a popular code editor frequently used for building SharePoint Framework solutions. By setting up debugging of your SharePoint Framework solution in Visual Studio Code, you can more efficiently step through your code and fix errors. -You can also see the required steps to enable debugging in Visual Studio Code in this video on the Microsoft 365 Platform Communtiy (PnP) YouTube Channel: +You can also see the required steps to enable debugging in Visual Studio Code in this video on the Microsoft 365 Platform Community (PnP) YouTube Channel: > [!VIDEO https://www.youtube.com/embed/oNChcluMrm8] ## Prerequisites -The easiest way to configure Visual Studio Code (VS Code) to debug SharePoint Framework solutions is by using the [JavaScript Debugger](https://github.com/microsoft/vscode-js-debug) included in VS Code to debug Chrome & Edge. +The easiest way to configure Visual Studio Code (VS Code) to debug SharePoint Framework solutions is to use the [JavaScript Debugger](https://github.com/microsoft/vscode-js-debug) included in VS Code to debug Chrome & Edge. You also need **Google Chrome** or **Microsoft Edge**. @@ -29,13 +29,13 @@ You can locate the debug configurations in the **./vscode/launch.json** file und ![Breakpoint configured in a SharePoint Framework client-side web part in Visual Studio Code](../images/vscode-debugging-breakpoint-configured.png) 1. In Visual Studio Code, on the **View** menu, select the **Integrated Terminal** option or select ctrl+` on the keyboard. -1. In the terminal run the following command: +1. In the terminal, run the following command: ```console gulp serve --nobrowser ``` - Running this command builds your SharePoint Framework solution and starts the local webserver to serve the output files. Because the debugger starts its own instance of the browser, you use the **--nobrowser** argument to prevent the **serve** task from opening a browser window. + Running this command builds your SharePoint Framework solution and starts the local web server to serve the output files. Because the debugger starts an instance of the browser, you use the **--nobrowser** argument to prevent the **serve** task from opening a browser window. ![The gulp serve command typed in the integrated terminal in Visual Studio Code](../images/vscode-debugging-gulp-serve.png) @@ -46,7 +46,7 @@ After the gulp task is finished, move the focus to the code area of Visual Studi The debug mode in Visual Studio Code starts, changing the color of the status bar to orange and opening a new window of Google Chrome showing the SharePoint Workbench. > [!NOTE] -> At this point the breakpoint is disabled because the web part's code hasn't been loaded yet. SharePoint Framework loads web parts on demand only after they have been added to the page. +> At this point, the breakpoint is disabled because the web part's code hasn't been loaded yet. SharePoint Framework loads web parts on demand only after they have been added to the page. ![Visual Studio Code in debug mode displayed next to Google Chrome showing the SharePoint workbench](../images/vscode-debugging-chrome-started.png) @@ -104,11 +104,11 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P ![The hosted workbench configuration selected in the debug configurations drop-down in Visual Studio Code](../images/vscode-debugging-debugging-hosted-workbench.png) -1. After initiating the gulp serve in the Terminal start debugging either by selecting F5 or by selecting the **Start Debugging** option on the **Debug** menu. Visual Studio Code switches into debug mode, indicated by the orange status bar, and the Debugger for Chrome extension opens a new instance of Google Chrome with the Microsoft 365 sign-in page. +1. After initiating the gulp serve in the Terminal, start debugging either by selecting F5 or by selecting the **Start Debugging** option on the **Debug** menu. Visual Studio Code switches into debug mode, indicated by the orange status bar, and the Debugger for Chrome extension opens a new instance of Google Chrome with the Microsoft 365 sign-in page. ![Microsoft 365 login page displayed in Google Chrome after starting debugging in the hosted workbench](../images/vscode-debugging-o365-login.png) -1. In the workbench tab that was opened in your browser navigate to a SharePoint Online page that you wish to test your extension. +1. In the workbench tab that was opened in your browser, navigate to a SharePoint Online page that you wish to test your extension. 1. Append the following query string parameters to the URL. Notice that you need to update the ID to match your own extension identifier. This is available in the **HelloWorldApplicationCustomizer.manifest.json** file. > [!CAUTION] @@ -126,16 +126,16 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P ``` > [!NOTE] - > Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + > The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. - More detail about the URL parameters: + Additional details about the URL parameters: - **loadSPFX=true**: Ensures that the SharePoint Framework is loaded on the page. For performance reasons, the framework does not load unless at least one extension is registered. Because no components are registered, you must explicitly load the framework. - **debugManifestsFile**: Specifies that you want to load SPFx components that are locally served. The loader only looks for components in the app catalog (for your deployed solution) and the SharePoint manifest server (for the system libraries). - **customActions**: Simulates a custom action. When you deploy and register this component in a site, you'll create this **CustomAction** object and describe all the different properties you can set on it. - **Key**: Use the GUID of the extension as the key to associate with the custom action. This has to match the ID value of your extension, which is available in the extension manifest.json file. - **Location**: The type of custom action. Use `ClientSideExtension.ApplicationCustomizer` for the Application Customizer extension. - - **Properties**: An optional JSON object that contains properties that are available via the `this.properties` member. In this HelloWorld example, it defined a `testMessage` property. + - **Properties**: An optional JSON object that contains properties that are available via the `this.properties` member. In this HelloWorld example, it defines a `testMessage` property. The full URL should look similar to the following: @@ -155,13 +155,13 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P ``` > [!NOTE] - > Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` + > The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. 1. Select **Load debug scripts** to continue loading scripts from your local host. ![Allow Debug Manifest question from the page](../images/ext-app-debug-manifest-message.png) - When the page loads, you should now be able to see the Extension on your page (in this case a list view command extension): + When the page loads, you should now be able to see the Extension on your page (in this case, a list view command extension): ![SPFx extension loaded in the page](../images/debug-Extension-Loaded.png) @@ -171,10 +171,10 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P ## Debugging with Microsoft Edge or older projects -If you're using an older version of SharePoint Framework Yeoman generator or want to debug with Microsoft Edge, follow these steps to create the launch.json file manually. +If you're using an older version of the SharePoint Framework Yeoman generator or want to debug with Microsoft Edge, follow these steps to create the launch.json file manually. > [!NOTE] -> In order for you to debug with Microsoft Edge, you'll have to install the **Windows 10 April 2018 Update** which includes the Microsoft Edge DevTools Protocol. +> In order for you to debug with Microsoft Edge, you'll have to install the **Windows 10 April 2018 Update**, which includes the Microsoft Edge DevTools Protocol. ### Create debug configuration for hosted workbench From 3ed44a7c7d4153d464fcc86916cddb2ce4ba93ff Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 2 May 2025 11:54:06 -0400 Subject: [PATCH 3/8] typos & grammatical fixes --- docs/spfx/debug-modern-pages.md | 64 +++++++++++++-------------------- 1 file changed, 24 insertions(+), 40 deletions(-) diff --git a/docs/spfx/debug-modern-pages.md b/docs/spfx/debug-modern-pages.md index 3d0cb22503..302be37599 100644 --- a/docs/spfx/debug-modern-pages.md +++ b/docs/spfx/debug-modern-pages.md @@ -6,14 +6,14 @@ ms.localizationpriority: high --- # Debug SharePoint Framework solutions on modern SharePoint pages -When building SharePoint Framework solutions, you can test them on modern SharePoint pages. For building SharePoint Framework extensions, testing on modern pages is the only option, since at this moment the SharePoint Workbench doesn't support loading extensions. Testing on modern pages can however be also used for debugging web parts where it offers developers additional value. +When building SharePoint Framework solutions, you can test them on modern SharePoint pages. For building SharePoint Framework extensions, testing on modern pages is the only option, since at this moment the SharePoint Workbench doesn't support loading extensions. Testing on modern pages can however be also used for debugging web parts, where it offers developers additional value. > [!IMPORTANT] > While there are no technical restrictions for debugging local SharePoint Framework solutions on modern SharePoint pages, you should be careful when using it in your production tenant. This capability allows you to execute code that hasn't been tested and verified against your organization's policies and could be harmful to your production data. ## Debug SharePoint Framework extensions on modern SharePoint pages -At this moment, SharePoint Framework extension can be debugged only on modern SharePoint pages. SharePoint Workbench doesn't support testing extensions. Depending on the version of the SharePoint Framework that you use, there are different ways to debug extensions on modern pages. +At this moment, the SharePoint Framework extension can be debugged only on modern SharePoint pages. SharePoint Workbench doesn't support testing extensions. Depending on the version of the SharePoint Framework that you use, there are different ways to debug extensions on modern pages. ### Debug extensions using serve configuration @@ -55,23 +55,23 @@ When you add a new SharePoint Framework extension to your project, the SharePoin } ``` -Next to the default configuration, the SharePoint Framework Yeoman generator will create an entry for each extension that you add to your project. Each entry contains a URL of the modern page that should be used to test the particular extension, the list of extensions that should be loaded and for each extension, the list of properties that should be set on them. To use the particular serve configuration, execute in the command line: +Next to the default configuration, the SharePoint Framework Yeoman generator will create an entry for each extension that you add to your project. Each entry contains a URL of the modern page that should be used to test the particular extension, the list of extensions that should be loaded and for each extension, the list of properties that should be set on them. To use the particular **serve** configuration, execute in the command line: ```console gulp serve --config= ``` -for example: +For example: ```console gulp serve --config=helloWorld ``` -After running this command, gulp will start your web browser with the modern page specified in your configuration. The page will show a popup asking you to confirm that you now will be loading debug scripts. +After running this command, gulp will start your web browser with the modern page specified in your configuration. The page will show a pop-up asking you to confirm that you now will be loading debug scripts. ![Popup to confirm loading debug scripts on a modern page in SharePoint Online](../images/ext-com-accept-debug-scripts.png) -Once you confirm, the page will load with the extensions you specified in your serve configuration. +Once you confirm, the page will load with the extensions you specified in your **serve** configuration. ### Disabling debug scripts @@ -79,13 +79,13 @@ By default, when debug scripts are enabled and allowed once on a page, they'll b ### Debug extensions by manually building the debug URL -If you're working with a version of the SharePoint Framework older than 1.3.0, and you want to debug an extension on a modern page, you have to manually construct the URL with the required parameters. First, start the local gulp server, by in the command line changing the working directory to your project folder and then executing: +If you're working with a version of the SharePoint Framework older than 1.3.0, and you want to debug an extension on a modern page, you have to manually construct the URL with the required parameters. First, start the local web server in the command line, changing the working directory to your project folder in the command line, and then executing: ```console gulp serve --nobrowser ``` -Next, in the web browser, navigate to the modern page, on which you want to test the extension. After the page loaded, copy its URL. Depending on the type of extension you want to test, there are different parameters that you need to add to the URL. +Next, in the web browser, navigate to the modern page on which you want to test the extension. After the page loaded, copy its URL. Depending on the type of extension you want to test, there are different parameters that you need to add to the URL. #### Debug Application Customizer @@ -119,10 +119,9 @@ https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx ``` > [!NOTE] -> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` - +> The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. -Following are the query string parameters that you need to add: +The following are the query string parameters that you need to add: | Parameter | Description | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -138,11 +137,11 @@ The `customActions` parameter has the following tokens that should be replaced: | `` | The type of custom action. Use `ClientSideExtension.ApplicationCustomizer` for the Application Customizer extension. | | `` | An optional JSON object that contains properties that are available via the `this.properties` member. | -With the parameters added to the URL, reload the page in the web browser. The page will show a popup asking you to confirm that you now will be loading debug scripts. +With the parameters added to the URL, reload the page in the web browser. The page will show a pop-up asking you to confirm that you will now be loading debug scripts. ![Popup to confirm loading debug scripts on a modern page in SharePoint Online](../images/ext-com-accept-debug-scripts.png) -Once you confirm, the page will load with the extensions you specified in your serve configuration. +Once you confirm, the page will load with the extensions you specified in your **serve** configuration. #### Debug field customizer @@ -177,12 +176,7 @@ https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx } ``` - -> [!NOTE] -> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` - - -Following are the query string parameters that you need to add: +The following are the query string parameters that you need to add: |Parameter |Description | |---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -202,7 +196,7 @@ With the parameters added to the URL, reload the page in the web browser. The pa ![Popup to confirm loading debug scripts on a modern page in SharePoint Online](../images/ext-com-accept-debug-scripts.png) -Once you confirm, the page will load with the extensions you specified in your serve configuration. +Once you confirm, the page will load with the extensions you specified in your **serve** configuration. #### Debug list view command set @@ -235,12 +229,7 @@ https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx }} ``` - -> [!NOTE] -> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` - - -Following are the query string parameters that you need to add: +The following are the query string parameters that you need to add: | Parameter | Description | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -260,17 +249,17 @@ With the parameters added to the URL, reload the page in the web browser. The pa ![Popup to confirm loading debug scripts on a modern page in SharePoint Online](../images/ext-com-accept-debug-scripts.png) -Once you confirm, the page will load with the extensions you specified in your serve configuration. +Once you confirm, the page will load with the extensions you specified in your **serve** configuration. ## Debug SharePoint Framework web parts on modern SharePoint pages -To test the local versions of your SharePoint Framework client-side web parts on modern SharePoint pages in your tenant, first, start the local gulp server, by changing the working directory to your project folder and executing in the command line: +To test the local versions of your SharePoint Framework client-side web parts on modern SharePoint pages in your tenant, first, start the local web server, by changing the working directory to your project folder and executing in the command line: ```console gulp serve --nobrowser ``` -Next, in the web browser, navigate to the modern page, on which you want to test the web parts. After the page loaded, add the following to the URL: +Next, in the web browser, navigate to the modern page on which you want to test the web parts. After the page loaded, add the following to the URL: ```text ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js @@ -287,16 +276,11 @@ https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx &debugManifestsFile=https://localhost:4321/temp/build/manifests.js ``` - -> [!NOTE] -> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` - - -The page will reload and show a popup asking you to confirm that you now will be loading debug scripts. +The page will reload and show a pop-up asking you to confirm that you now will be loading debug scripts. ![Popup to confirm loading debug scripts on a modern page in SharePoint Online](../images/ext-com-accept-debug-scripts.png) -Once you confirm, that you want to load the web parts that you're developing, you can edit the page, and in the toolbox, select any of your local web parts. +Once you confirm that you want to load the web parts that you're developing, you can edit the page, and in the toolbox, select any of your local web parts. ![SharePoint toolbox with a local web part highlighted](../images/debug-sharepoint-toolbox-modern-page-local-webpart.png) @@ -304,7 +288,7 @@ Once you confirm, that you want to load the web parts that you're developing, yo When building SharePoint Framework web parts, you can test them using the local workbench. This isn't only convenient but also efficient: each time you change something in your code, the local workbench will automatically reload and show your latest changes. -In some cases, like when building web parts that communicate with SharePoint, you cannot use the local SharePoint workbench, because you need access to the SharePoint APIs that can be called only in the context of a SharePoint site. In such cases, rather than using the local workbench, you can use the hosted SharePoint workbench that you can access by adding `/_layouts/15/workbench.aspx` to the URL of your site, for example `https://contoso.sharepoint.com/sites/team-a/_layouts/15/workbench.aspx`. +In some cases, like when building web parts that communicate with SharePoint, you cannot use the local SharePoint workbench because you need access to the SharePoint APIs that can be called only in the context of a SharePoint site. In such cases, rather than using the local workbench, you can use the hosted SharePoint workbench that you can access by adding `/_layouts/15/workbench.aspx` to the URL of your site, for example `https://contoso.sharepoint.com/sites/team-a/_layouts/15/workbench.aspx`. #### UI constraints @@ -312,18 +296,18 @@ SharePoint Framework workbench conveniently mimics the canvas of modern SharePoi #### Does it work with other web parts and extensions -Using the SharePoint workbench, you can only test web parts from your solution. But what if you wanted to see how your web part works with other web parts on the page? Testing your local solution on modern pages using the approach outlined in this article, is way more efficient than packaging your project, deploying it to the app catalog and adding the web part to the page. +Using the SharePoint workbench, you can only test web parts from your solution. But what if you wanted to see how your web part works with other web parts on the page? Testing your local solution on modern pages using the approach outlined in this article is way more efficient than packaging your project, deploying it to the app catalog, and adding the web part to the page. ## Debug SharePoint Framework web parts - an alternative approach -If you build your web part solution without the **--ship** argument as following: +If you build your web part solution without the **--ship** argument as follows: ```console gulp bundle gulp package-solution ``` -the packages generated will reference the code from your local computer (https://localhost:4321). You can deploy the solution to the app catalog as you normally would. +The packages generated will reference the code from your local computer (https://localhost:4321). You can deploy the solution to the app catalog as you normally would. You can then start your local server by running: From 52c597351c561e636adbf1973a9813ba9858243a Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 2 May 2025 11:55:17 -0400 Subject: [PATCH 4/8] remove dupe note --- docs/spfx/debug-in-vscode.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/spfx/debug-in-vscode.md b/docs/spfx/debug-in-vscode.md index 958dd08d1d..193eb66463 100644 --- a/docs/spfx/debug-in-vscode.md +++ b/docs/spfx/debug-in-vscode.md @@ -154,9 +154,6 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P }} ``` - > [!NOTE] - > The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. - 1. Select **Load debug scripts** to continue loading scripts from your local host. ![Allow Debug Manifest question from the page](../images/ext-app-debug-manifest-message.png) From d075f808aa5824e73526b0ed3f7acba6a0e94a64 Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 2 May 2025 11:55:53 -0400 Subject: [PATCH 5/8] remote dupe note --- .../extensions/guidance/migrate-from-ecb-to-spfx-extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md b/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md index 9e592c090a..c4eff6edf9 100644 --- a/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md +++ b/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md @@ -203,7 +203,7 @@ To reproduce the same behavior of the ECB menu item built by using the SharePoin > [!NOTE] -> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` +> The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. In the previous query string, replace the GUID with the `id` value you saved from the **CustomEcbCommandSet.manifest.json** file. From b20fa9447c8fc423705a70c08b443477a3b6c49b Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 2 May 2025 11:56:29 -0400 Subject: [PATCH 6/8] rephrase note --- .../migrate-from-usercustomactions-to-spfx-extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md b/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md index 81fee28ff4..7f6e7f4a7f 100644 --- a/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md +++ b/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md @@ -331,7 +331,7 @@ The UI elements of the custom footer are rendered using React and a custom React > [!NOTE] -> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js` +> The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. In this query string, replace the GUID with the `id` value you saved from the **CustomFooterApplicationCustomizer.manifest.json** file. From 7c4b8df22f4e0ff18432136eaa9ab5de8ada5e0d Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 2 May 2025 12:00:15 -0400 Subject: [PATCH 7/8] fix auto-finding: incorrect indentation --- .../guidance/migrate-from-ecb-to-spfx-extensions.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md b/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md index c4eff6edf9..756a968860 100644 --- a/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md +++ b/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md @@ -202,13 +202,13 @@ To reproduce the same behavior of the ECB menu item built by using the SharePoin ``` -> [!NOTE] -> The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. + > [!NOTE] + > The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. In the previous query string, replace the GUID with the `id` value you saved from the **CustomEcbCommandSet.manifest.json** file. - Moreover, there's a `location` property that assumes the value of **ClientSideExtension.ListViewCommandSet.ContextMenu**, which instructs SPFx to render the Command Set as an ECB menu item. Following are all the options for the `location` property: + Moreover, there's a `location` property that assumes the value of **ClientSideExtension.ListViewCommandSet.ContextMenu**, which instructs SPFx to render the Command Set as an ECB menu item. The following are all the options for the `location` property: - **ClientSideExtension.ListViewCommandSet.ContextMenu**: The context menu of the item(s). - **ClientSideExtension.ListViewCommandSet.CommandBar**: The top command set menu in a list or library. @@ -216,10 +216,10 @@ To reproduce the same behavior of the ECB menu item built by using the SharePoin Still in the query string, there's a property called `properties` that represents the JSON serialization of an object of type `ICustomEcbCommandSetProperties` that is the type of the custom properties requested by the custom Command Set for rendering. - Notice that when executing the page request, you're prompted with a warning message box with the title "Allow debug scripts?", which asks your consent to run code from localhost for security reasons. If you want to locally debug and test the solution, you have to allow it to "Load debug scripts." + Notice that when executing the page request, you're prompted with a warning message box with the title "Allow debug scripts?", which asks for your consent to run code from localhost for security reasons. If you want to locally debug and test the solution, you have to allow it to "Load debug scripts." > [!NOTE] - > Alternatively, you can create serve configuration entries in the **config/serve.json** file in your project to automate the creation of the debug query string parameters as outlined in this document: [Debug SharePoint Framework solutions on modern SharePoint pages](/sharepoint/dev/spfx/debug-modern-pages#debug-sharepoint-framework-extensions-on-modern-sharepoint-pages) + > Alternatively, you can create **serve** configuration entries in the **config/serve.json** file in your project to automate the creation of the debug query string parameters as outlined in this document: [Debug SharePoint Framework solutions on modern SharePoint pages](/sharepoint/dev/spfx/debug-modern-pages#debug-sharepoint-framework-extensions-on-modern-sharepoint-pages) ## Package and host the solution From 113015fac3d0852b60e9a47943d7b3c633fd8e64 Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 2 May 2025 12:00:59 -0400 Subject: [PATCH 8/8] fix auto-finding: incorrect markdown indentation --- .../migrate-from-usercustomactions-to-spfx-extensions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md b/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md index 7f6e7f4a7f..b77dfd2423 100644 --- a/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md +++ b/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md @@ -330,8 +330,8 @@ The UI elements of the custom footer are rendered using React and a custom React ``` -> [!NOTE] -> The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. + > [!NOTE] + > The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`. In this query string, replace the GUID with the `id` value you saved from the **CustomFooterApplicationCustomizer.manifest.json** file.