Skip to content

Commit 0797945

Browse files
andrewconnellandrewconnell
authored
Merge pull request SharePoint#6207 from pschaeflein/patch-2
Improved and corrected the display of querystring parameters
2 parents 465e39f + 5c30866 commit 0797945

File tree

1 file changed

+38
-23
lines changed

1 file changed

+38
-23
lines changed

‎docs/spfx/debug-modern-pages.md

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Debug SharePoint Framework solutions on modern SharePoint pages
33
description: Guidance on how to debug SharePoint Framework solutions on modern SharePoint pages
4-
ms.date: 05/09/2020
4+
ms.date: 09/30/2020
55
ms.prod: sharepoint
66
localization_priority: Priority
77
---
@@ -96,13 +96,18 @@ To debug an Application Customizer, to the URL of your modern page, add `?loadSP
9696
Following are the query string parameters that you need to add:
9797

9898
| Parameter | Description |
99-
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
99+
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
100100
| `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. |
101101
| `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). |
102102
| `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. |
103-
| `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. |
104-
| `___location` | The type of custom action. Use `ClientSideExtension.ApplicationCustomizer` for the Application Customizer extension. |
105-
| `properties` | An optional JSON object that contains properties that are available via the this.properties member |
103+
104+
The `customActions` parameter has the following tokens that should be replaced:
105+
106+
| Token | Description |
107+
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
108+
| `<extensionId>` | 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. |
109+
| `<extensionType>` | The type of custom action. Use `ClientSideExtension.ApplicationCustomizer` for the Application Customizer extension. |
110+
| `<propertiesJSON>` | An optional JSON object that contains properties that are available via the this.properties member |
106111

107112
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.
108113

@@ -112,18 +117,23 @@ Once you confirm, the page will load with the extensions you specified in your s
112117

113118
#### Debug field customizer
114119

115-
To debug a field customizer, to the URL of your list view page, add `?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"<fieldName>":{"id":"<fieldCustomizerId>","properties":<properties>}}`, for example: `https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"id":"45a1d299-990d-4917-ba62-7cb67158be16","properties":{"sampleText":"Hello!"}}}`.
120+
To debug a field customizer, to the URL of your list view page, add `?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"<fieldName>":{"id":"<fieldCustomizerId>","properties":<propertiesJSON>}}`, for example: `https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"id":"45a1d299-990d-4917-ba62-7cb67158be16","properties":{"sampleText":"Hello!"}}}`.
116121

117122
Following are the query string parameters that you need to add:
118123

119-
|Parameter|Description|
120-
|---------|-----------|
121-
|`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.|
122-
|`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).|
123-
|`fieldCustomizers`|indicates which fields in your list should have their rendering controlled by the Field Customizer. The ID parameter specifies the GUID of the extension that should be used to control the rendering of the field. The properties parameter is an optional text string containing a JSON object that is deserialized into `this.properties` for your extension.|
124-
|`key`|Use the internal name of the field as the key.|
125-
|`id`|The GUID of the Field Customizer extension associated with this field.|
126-
|`properties`|The property values defined in the extension. In this example, `sampleText` is a property defined by the extension.|
124+
|Parameter |Description |
125+
|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
126+
|`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. |
127+
|`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). |
128+
|`fieldCustomizers` |indicates which fields in your list should have their rendering controlled by the Field Customizer. The ID parameter specifies the GUID of the extension that should be used to control the rendering of the field. The properties parameter is an optional text string containing a JSON object that is deserialized into `this.properties` for your extension.|
129+
130+
The `fieldCustomizers` parameter has the following tokens that should be replaced:
131+
132+
| Token | Description |
133+
|-----------------------|---------------------------------------------------------------------------------------------------------------------|
134+
| `<fieldName>` | The internal name of the field. |
135+
| `<fieldCustomizerId>` | The GUID of the Field Customizer extension associated with this field. |
136+
| `<propertiesJSON>` | The property values defined in the extension. In this example, `sampleText` is a property defined by the extension. |
127137

128138
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.
129139

@@ -133,18 +143,23 @@ Once you confirm, the page will load with the extensions you specified in your s
133143

134144
#### Debug list view command set
135145

136-
To debug a list view command set, to the URL of your list view page, add `?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"<extensionId>":{"___location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":<properties>}}`, for example: `https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6":{"___location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}`.
146+
To debug a list view command set, to the URL of your list view page, add `?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"<extensionId>":{"___location":"<extensionType>","properties":<propertiesJSON>}}`, for example: `https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6":{"___location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}`.
137147

138148
Following are the query string parameters that you need to add:
139149

140-
| Parameter | Description |
141-
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
142-
| `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. |
143-
| `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). |
144-
| `customActions` | simulates a custom action. You can set many properties on this CustomAction object that affect the look, feel, and ___location of your button; we’ll cover them all later. |
145-
| `key` | GUID of the extension. |
146-
| `Location` | Where the commands are displayed. The possible values are: `ClientSideExtension.ListViewCommandSet.ContextMenu`: The context menu of the item(s), `ClientSideExtension.ListViewCommandSet.CommandBar`: The top command set menu in a list or library. `ClientSideExtension.ListViewCommandSet`: Both the context menu and the command bar (corresponds to `SPUserCustomAction.Location="CommandUI.Ribbon"`). |
147-
| `properties` | An optional JSON object containing properties that are available via the this.properties member. |
150+
| Parameter | Description |
151+
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
152+
| `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. |
153+
| `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). |
154+
| `customActions` | simulates a custom action. You can set many properties on this CustomAction object that affect the look, feel, and ___location of your button; we’ll cover them all later. |
155+
156+
The `customActions` parameter has the following tokens that should be replaced:
157+
158+
| Token | Description |
159+
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
160+
| `<extensionId>` | GUID of the extension. |
161+
| `<extensionType>` | Where the commands are displayed. The possible values are:<br/> `ClientSideExtension.ListViewCommandSet.ContextMenu`: The context menu of the item(s),<br/> `ClientSideExtension.ListViewCommandSet.CommandBar`: The top command set menu in a list or library.<br/> `ClientSideExtension.ListViewCommandSet`: Both the context menu and the command bar (corresponds to `SPUserCustomAction.Location="CommandUI.Ribbon"`). |
162+
| `<propertiesJSON>` | An optional JSON object containing properties that are available via the this.properties member. |
148163

149164
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.
150165

0 commit comments

Comments
 (0)