From 929b47bcc6c39676dbda81f56daca02c6c6ecfba Mon Sep 17 00:00:00 2001 From: Harminder Singh Date: Sat, 26 Apr 2025 15:07:35 +0530 Subject: [PATCH] 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."