You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Changes between Dev Preview and Release Candidate for SharePoint Framework Extensions (preview)
2
+
3
+
If you have created SharePoint Framework Extensions with the developer preview version (released June 2017), you'll have to perform some changes to make them work with Release Candidate (RC) version. Here's a short list of the changes, which were introduced with the latest version.
4
+
5
+
Release Candidate is enabled in the First Release tenants in Office 365, but is not supported yet in production use.
6
+
7
+
## General solution package changes
8
+
9
+
- Use lockstep version for all SPFx packages.
10
+
- Upgrade to TypeScript 2.4.
11
+
- Update to Fabric React 4.32.0.
12
+
- SPFx npm package versions updated to 1.2.
13
+
14
+
### Application Customizer Changes
15
+
16
+
- Placeholder logic has been changed slightly and they have been renamed.
17
+
- Typical placeholders are now called `'top'` and `'bottom'`
18
+
-`onRender` method is deprecated - you should call render from the onInit, if needed and also add event handling for the possible events when placeholders should be re-rendered. See [updated placeholder].(./get-started/using-page-placeholder-with-extensions.md) tutorial for details.
19
+
- Schema definition URL has been updated in the manifest file to point json schema file from the dev.office.com.
20
+
21
+
### Field Customizer Changes
22
+
23
+
- There are changes in the APIs for accessing the actual field values. You should be using `event.fieldValue`. Other options are deprecated.
24
+
- API to access UI element to render the field customizer output has been changed from `event.cellDiv` to `event.domElement`.
25
+
- Schema definition URL has been updated in the manifest file to point json schema file from the dev.office.com.
26
+
27
+
### ListView Command Set Changes
28
+
29
+
-`onRefreshCommand` method deprecated and replaced with `onListViewUpdated`.
30
+
- Manifest json changes around the commands structure. Is using now `items` collections and changes in the title handling of the commands in the json definition.
31
+
- Schema definition URL has been updated in the manifest file to point json schema file from the dev.office.com.
Copy file name to clipboardExpand all lines: docs/spfx/extensions/get-started/build-a-hello-world-extension.md
+17-12Lines changed: 17 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,11 @@
5
5
6
6
Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.
7
7
8
-
>**Note:** Before following the steps in this article, be sure to [Set up your development environment](../../set-up-your-development-environment). Notice that extensions are currently **ONLY** available from Office 365 developer tenants.
8
+
You can also follow these steps by watching the video on the [SharePoint PnP YouTube Channel](https://www.youtube.com/watch?v=0BeS0HukW24&list=PLR9nK3mnD-OXtWO5AIIr7nCR3sWutACpV).
<imgsrc="../../../../images/spfx-ext-youtube-tutorial1.png"alt="Screenshot of the YouTube video player for this tutorial" />
12
+
</a>
9
13
10
14
## Create an extension project
11
15
Create a new project directory in your favorite ___location.
@@ -29,6 +33,8 @@ yo @microsoft/sharepoint
29
33
When prompted:
30
34
31
35
* Accept the default **app-extension** as your solution name and press **Enter**.
36
+
* Choose **Use the current folder** and press **Enter**
37
+
* Choose **N** to require extension to be installed on each site explicitly when it's being used
32
38
* Choose **Extension (Preview)** as the client-side component type to be created.
33
39
* Choose **Application Customizer (Preview)** as the extension type to be created.
34
40
@@ -74,16 +80,15 @@ Notice that base class for the Application Customizer is imported from the **sp-
74
80
75
81
76
82
77
-
The logic for your Application Customizer is contained in the two methods **onInit**and **onRender**.
83
+
The logic for your Application Customizer is contained in the **onInit**method.
78
84
79
-
-**onInit()** is where you should perform any setup needed for your extension. This event occurs after ```this.context``` and ```this.properties``` are assigned, but before the page DOM is ready. As with web parts, ```onInit()``` returns a promise that you can use to perform asynchronous operations; ```onRender()``` will not be called until your promise has resolved. If you don’t need that, simply return ```super.onInit()```.
80
-
-**onRender()** is where your extension can interact with the UI. This event occurs after the application’s initial page DOM structure has been created (although some parts of the UI may not have finished rendering yet).
85
+
-**onInit()** is called when the client-side extension is first activated on the page. This event occurs after ```this.context``` and ```this.properties``` are assigned. As with web parts, ```onInit()``` returns a promise that you can use to perform asynchronous operations.
81
86
82
87
> Notice. The class constructor is called at an early stage, when ```this.context``` and ```this.properties``` are undefined. We do not support including custom initiation logic here.
83
88
84
-
Below are the contents of **onInit()** and **onRender()** in the default solution. This default solution simply writes a log to the Dev Dashboard, and then displays a simple JavaScript alert when the page renders.
89
+
Below is the contents of **onInit()** in the default solution. This default solution simply writes a log to the Dev Dashboard, and then displays a simple JavaScript alert when the page renders.
85
90
86
-
91
+
87
92
88
93
> If your application customizer uses the ClientSideComponentProperties JSON input, it will be deserialized into the BaseExtension.properties object. You can define an interface to describe it. The default template is looking for a property called testMessage, and if it's provided, outputting it in an alert message.
89
94
@@ -95,17 +100,17 @@ First, compile your code and host the compiled files from your local machine by
95
100
gulp serve --nobrowser
96
101
```
97
102
98
-
>**Note:** If you do not have the SPFx developer certificate installed, then Workbench will notify you that it is configured not to load scripts from localhost. Stop currently running process in the console window, execute `gulp trust-dev-cert` command in your project directory console to install the developer certificate before running `gulp serve --nobrowser`command again.
103
+
>**Note:** If you do not have the SPFx developer certificate installed, then Workbench will notify you that it is configured not to load scripts from localhost. Stop currently running process in the console window, execute `gulp trust-dev-cert` command in your project directory console to install the developer certificate before running `gulp serve --nobrowser`command again.
99
104
100
105
Notice that we used the ```--nobrowser``` option, since there's no value in launching the local workbench since you currently cannot debug extensions locally.
101
106
102
107
Once it compiles the code without errors, it will serve the resulting manifest from http://localhost:4321.
To test your extension, navigate to a modern list view page in your SharePoint environment and append the following query string parameters to the URL:
111
+
To test your extension, navigate to a modern list view page in your SharePoint environment and append the following query string parameters to the URL. Notice that you will need to update the id to match your own extension identifier available from the **HelloWorldApplicationCustomizer.manifest.json** file:
107
112
```
108
-
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"d03ae0c2-bbbf-4cf5-9ff7-0986904553da":{"___location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}
113
+
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{"___location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}
109
114
```
110
115
111
116
More detail about the URL query parameters:
@@ -115,7 +120,7 @@ More detail about the URL query parameters:
115
120
***debugManifestsFile:** specifies that we want to load SPFx components that are being locally served. Normally the loader only looks for components in the App Catalog (for your deployed solution) and the SharePoint manifest server (for the system libraries).
116
121
117
122
***customActions:** this URL query parameter simulates a custom action. When we actually deploy and register this component in a site later in this lab, we’ll create this CustomAction object for real and describe all the different properties you can set on it.
118
-
***Key:** use the Guid of the extension as the key to associate with the custom action
123
+
***Key:** use the Guid of the extension as the key to associate with the custom action. This has to match on the id value of your extension available from the extension manifest.json.
119
124
***Location:** the type of custom action, use "ClientSideExtension.ApplicationCustomizer" for the Application Customizer extension
120
125
***Properties:** an optional JSON object containing properties that will be available via the this.properties member. In this HelloWorld example, it defined a ‘testMessage’ property.
121
126
@@ -127,14 +132,14 @@ Extend the URL with the additional query parameters defined above. Notice that y
127
132
The full URL should look similar to the following depending on your tenant URL:
128
133
129
134
```
130
-
contoso.sharepoint.com/Lists/Contoso/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"5fc73e12-8085-4a4b-8743-f6d02ffe1240":{"___location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}
135
+
contoso.sharepoint.com/Lists/Contoso/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{"___location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}
131
136
```
132
137
133
138
134
139
135
140
Click the "**Load debug scripts**" button to continue loading scripts from your local host.
136
141
137
-
You should now see the alert message on your page.
142
+
You should now see the alert message on your page.
138
143
139
144
Copy file name to clipboardExpand all lines: docs/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api.md
+37-19Lines changed: 37 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,11 @@
4
4
5
5
Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online and you can use modern JavaScript tools and libraries to build them.
6
6
7
-
>**Note:** Before following the steps in this article, be sure to [Set up your development environment](../../set-up-your-development-environment). Notice that extensions are currently **ONLY** available from Office 365 developer tenants.
7
+
You can also follow these steps by watching the video on the [SharePoint PnP YouTube Channel](https://www.youtube.com/watch?v=iW0LQQqAY0Y&list=PLR9nK3mnD-OXtWO5AIIr7nCR3sWutACpV).
8
8
9
-
>**Note:** Currently ListView Command Set Extension can only be debugged with the modern experience in classic SharePoint sites. Please ensure that you use a classic team site with modern list experience for the testing.
<imgsrc="../../../../images/spfx-ext-youtube-tutorialcommand.png"alt="Screenshot of the YouTube video player for this tutorial" />
11
+
</a>
10
12
11
13
## Create an extension project
12
14
Create a new project directory in your favorite ___location.
@@ -30,6 +32,8 @@ yo @microsoft/sharepoint
30
32
When prompted:
31
33
32
34
* Accept the default value of **command-extension** as your solution name and press **Enter**.
35
+
* Choose **Use the current folder** and press **Enter**.
36
+
* Choose **N** to require extension to be installed on each site explicitly when it's being used.
33
37
* Choose **Extension (Preview)** as the client-side component type to be created.
34
38
* Choose **ListView Command Set (Preview)** as the extension type to be created.
35
39
@@ -75,21 +79,33 @@ Open the **HelloWorldCommandSet.ts** file in the **src\extensions\helloWorld** f
75
79
76
80
Notice that the base class for the ListView Command Set is imported from the **sp-listview-extensibility** package, which contains SharePoint framework code required by the ListView Command Set.
77
81
78
-
82
+
```ts
83
+
import { override } from'@microsoft/decorators';
84
+
import { Log } from'@microsoft/sp-core-library';
85
+
import {
86
+
BaseListViewCommandSet,
87
+
Command,
88
+
IListViewCommandSetListViewUpdatedParameters,
89
+
IListViewCommandSetExecuteEventParameters
90
+
} from'@microsoft/sp-listview-extensibility';
91
+
```
92
+
93
+
The behavior for your custom buttons is contained in the **onListViewUpdated()** and **OnExecute()** methods.
79
94
80
-
The behavior for your custom buttons is contained in the **onRefreshCommand()** and **OnExecute()** methods.
95
+
The **onListViewUpdated()** event occurs separately for each command (e.g. menu item), whenever a change happens in the ListView and the UI needs to be re-rendered. The `“event”` function parameter represents information about the command being rendered. The handler can use this information to customize the title or adjust the visibility. For example, if a command should only be shown when a certain number of items are selected in the list view. Here's the default implementation:
81
96
82
-
The **onRefreshCommand()** event occurs separately for each command (e.g. menu item), whenever the application attempts to display it in the UI. The `“event”` function parameter represents information about the command being rendered. The handler can use this information to customize the title or adjust the visibility. For example, if a command should only be shown when a certain number of items are selected in the list view. Here's the default implementation:
97
+
When using the method `“tryGetCommand”` you’ll get a Command object, which is a representation of the command that shows in the UI. You can modify its values, like `“title”`, or `“visible”` in order to modify the UI element. SPFx will use this information when re-rendering the commands. These objects keep the state from the last render, so if a command is set to `“visible = false”` it will remain invisible until is set back to `“visible = true”`.
@@ -132,7 +148,7 @@ Since our ListView Command Set is hosted from localhost and is running, we can u
132
148
Append the following query string parameters to the URL. Notice that you will need to update the GUID to match the ID of your list view command set extension available in the **HelloWorldCommandSet.manifest.json** file:
***loadSPFX=true:** ensures that the SharePoint Framework is loaded on the page. For performance reasons, the framework is not normally loaded unless at least one extension is registered. Since no components are registered yet, we must explicitly load the framework.
@@ -148,7 +164,7 @@ Append the following query string parameters to the URL. Notice that you will ne
148
164
The full URL should look similar to the following, depending on your tenant URL and the ___location of the list.
@@ -281,6 +298,7 @@ To ensure that our newly added **elements.xml** file is taken into account while
281
298
"name": "command-extension-client-side-solution",
282
299
"id": "dfffbe21-e422-4c0f-a302-d7d62a30c1bf",
283
300
"version": "1.0.0.0",
301
+
"skipFeatureDeployment": false,
284
302
"features": [{
285
303
"title": "ListView Command Set - Deployment of custom action.",
286
304
"description": "Deploys a custom action with ClientSideComponentId association",
@@ -341,15 +359,15 @@ Go to the site where you want to test SharePoint asset provisioning. This could
341
359
342
360
Chose the gear icon on the top navigation bar on the right and choose **Add an app** to go to your Apps page.
343
361
344
-
In the **Search** box, enter '**command**' and press *Enter* to filter your apps.
362
+
In the **Search** box, enter '**extension**' and press *Enter* to filter your apps.
345
363
346
364
347
365
348
366
Choose the **command-extension-client-side-solution** app to install the solution on the site. When the installation is completed, refresh the page by pressing **F5**.
349
367
350
368
When the application has been successfully installed, Click **New** from the toolbar on the **Site Contents** page and choose **List**
351
369
352
-
370
+
353
371
354
372
Provide the name as **Sample** and click **Create**.
0 commit comments