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
Copy file name to clipboardExpand all lines: docs/spfx/extensions/get-started/serving-your-extension-from-sharepoint.md
+37-37Lines changed: 37 additions & 37 deletions
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
2
-
# Deploy your extension to site collection (Hello world part 3)
2
+
# Deploy your extension to SharePoint (Hello world part 3)
3
3
4
-
>**Note:** The SharePoint Framework Extensions are currently in preview and is subject to change. SharePoint Framework Extensions are not currently supported for use in production environments.
4
+
>**Note:** The SharePoint Framework Extensions are currently in preview and are subject to change. SharePoint Framework Extensions are not currently supported for use in production environments.
5
5
6
-
In this article, you will learn how to deploy your SharePoint Framework Application Customizer to SharePoint and see it working on a modern SharePoint pages. This article continues with the hello world extension built in the previous article [Using page placeholders from Application Customizer (Hello World part 2)](./using-page-placeholder-with-extensions.md).
6
+
In this article, you will learn how to deploy your SharePoint Framework Application Customizer to SharePoint and see it working on modern SharePoint pages. This article continues with the hello world extension built in the previous article [Using page placeholders from Application Customizer (Hello World part 2)](./using-page-placeholder-with-extensions.md).
7
7
8
-
Be sure you have completed the procedures in the following articles before you start:
8
+
Be sure you have completed the procedures in the following articles before you begin:
9
9
10
10
*[Build your first SharePoint Framework Extension (Hello World part 1)](./build-a-hello-world-extension.md)
11
11
*[Using page placeholders from Application Customizer (Hello World part 2)](./using-page-placeholder-with-extensions.md)
@@ -16,41 +16,41 @@ In the console window, go to the extension project directory created in [Build y
16
16
```
17
17
cd app-extension
18
18
```
19
-
If gulp serve is still running, stop it from running by choosing`Ctrl+C`.
19
+
If gulp serve is still running, stop it from running by pressing`Ctrl+C`.
20
20
21
-
Unlike in the **Debug** mode, in order to use extension on modern SharePoint server-side pages, you need to deploy and register the extension with SharePoint either in `Site collection`, `Site` or `List` scope. Scope defines where and how the Application Customizer will be active. In this particular scenario, we'll register the Application Customizer using `Site Collection` scope.
21
+
Unlike in **Debug** mode, in order to use an extension on modern SharePoint server-side pages, you need to deploy and register the extension with SharePoint in either `Site collection`, `Site`, or `List` scope. The scope defines where and how the Application Customizer will be active. In this particular scenario, we'll register the Application Customizer using the`Site Collection` scope.
22
22
23
-
Before we package our solution, we want to include needed code to automate the extension activation in the site, whenever solution will be installed on the site. In this case, we'll use feature framework elements to perform these actions directly in the solution package, but you could also associate the application customizer to SharePoint site using REST or CSOM object model, for example as part of the site provisioning.
23
+
Before we package our solution, we want to include the code needed to automate the extension activation within the site, whenever the solution is installed on the site. In this case, we'll use feature framework elements to perform these actions directly in the solution package, but you could also associate the application customizer to a SharePoint site using REST or CSOM as part of the site provisioning, for example.
24
24
25
-
1. Install solution package to site where it should be installed, so that extension manifest is being white listed for execution
26
-
2. Associate Application Customizer to the planned scope. This can be performed programmatically (CSOM/REST) or by using feature framework inside of the SharePoint Framework solution package. You'll need to associate following properties in the `UserCustomAction` object at site collection, site or list level.
27
-
***ClientSiteComponentId:** This is the identifier (GUID) of the Field Customizer, which has been installed on the app catalog.
28
-
***ClientSideComponentProperties:** This is optional parameter, which can be used to provide properties for the Field Customizer instance
25
+
1. Install the solution package to the site where it should be installed, so that extension manifest is being white listed for execution
26
+
2. Associate the Application Customizer to the planned scope. This can be performed programmatically (CSOM/REST) or by using the feature framework inside of the SharePoint Framework solution package. You'll need to associate the following properties in the `UserCustomAction` object at the site collection, site or list level.
27
+
***ClientSiteComponentId:** This is the identifier (GUID) of the Field Customizer, which has been installed in the app catalog.
28
+
***ClientSideComponentProperties:** This is an optional parameter, which can be used to provide properties for the Field Customizer instance
29
29
30
-
> Notice. Currently you'll need to install solution packages explicitly to the sites to ensure that extension is being properly executed. There will be alternative ways to achieve this in the future without site-by-site deployment.
30
+
> Notice. Currently you'll need to install solution packages explicitly to sites to ensure the extension is being properly executed. There will be alternative ways to achieve this in the future without site-by-site deployment.
31
31
32
-
In the following steps, we'll create new `CustomAction` definition, which will be then automatically deployed with needed configurations when solution package is installed on a site.
32
+
In the following steps, we'll create a new `CustomAction` definition, which will then be automatically deployed with the needed configurations when the solution package is installed on a site.
33
33
34
-
Move back to your solution package in the Visual Studio Code (or to your preferred editor)
34
+
Return to your solution package in Visual Studio Code (or to your preferred editor).
35
35
36
-
We'll first need to create an **assets** folder where we will place all feature framework assets used to provision SharePoint structures when package is installed.
36
+
We'll first need to create an **assets** folder where we will place all feature framework assets used to provision SharePoint structures when the package is installed.
37
37
38
-
* Create folder called**sharepoint**to the root of the solution
39
-
* Create folder called**assets** as a sub folder for the just created **sharepoint** folder
38
+
* Create a folder named**sharepoint**in the root of the solution
39
+
* Create a folder named**assets** as a sub folder of the just created **sharepoint** folder
40
40
41
-
Your solution structure should be looking like in the following picture
41
+
Your solution structure should look similar to the following picture:
42
42
43
43
44
44
45
-
### Add element.xml file for SharePoint definitions
45
+
### Add an elements.xml file for SharePoint definitions
46
46
47
-
Create a new file inside the **sharepoint\assets** folder named as **elements.xml**
47
+
Create a new file inside the **sharepoint\assets** folder named **elements.xml**
48
48
49
-
Copy the following xml structure into **elements.xml**. Updated the **ClientSideComponentId** property to have the unique Id of your Application Customizer available from the **HelloWorldApplicationCustomizer.manifest.json** file at**src\extensions\helloWorld** folder.
49
+
Copy the following xml structure into **elements.xml**. Be sure to update the **ClientSideComponentId** property to the unique Id of your Application Customizer available in the **HelloWorldApplicationCustomizer.manifest.json** file in the**src\extensions\helloWorld** folder.
50
50
51
-
We also set the **ClientSideComponentProperties**using this xml definition and bypass JSON properties for this extension instance. Notice how the JSON is escaped, so that we can set that properly using XML attribute.
51
+
We also set the **ClientSideComponentProperties** and pass JSON properties for this extension instance. Notice how the JSON is escaped so that we can set it properly within an XML attribute.
52
52
53
-
Notice also that we use specific ___location called`ClientSideExtension.ApplicationCustomizer` to define that this is Application Customizer. Since by default this **element.xml** will be associated to *Web* scoped feature, this `CustomAction` will be automatically added to `Web.UserCustomAction` collection in the site where the solution is being installed.
53
+
Notice also that we use the specific ___location of`ClientSideExtension.ApplicationCustomizer` to define that this is an Application Customizer. Since by default this **elements.xml** will be associated to a *Web* scoped feature, this `CustomAction` will be automatically added to the`Web.UserCustomAction` collection in the site where the solution is being installed.
54
54
55
55
```xml
56
56
<?xml version="1.0" encoding="utf-8"?>
@@ -67,7 +67,7 @@ Notice also that we use specific ___location called `ClientSideExtension.Applicatio
67
67
</Elements>
68
68
```
69
69
70
-
### Ensure that definitions are taken into use in build pipeline
70
+
### Ensure that definitions are taken into account within the build pipeline
71
71
72
72
Open **package-solution.json** from the **config** folder. The **package-solution.json** file defines the package metadata as shown in the following code:
73
73
@@ -85,7 +85,7 @@ Open **package-solution.json** from the **config** folder. The **package-solutio
85
85
86
86
```
87
87
88
-
To ensure that our newly added **element.xml** file is taken into account while solution is being packaged, we'll need to include a Feature Framework feature definition for the solution package. Let's include a JSON definition for needed feature inside of the solution structure as demonstrated in below code.
88
+
To ensure that our newly added **element.xml** file is taken into account while the solution is being packaged, we'll need to include a Feature Framework feature definition for the solution package. Let's include a JSON definition for the needed feature inside of the solution structure as demonstrated below.
89
89
90
90
```json
91
91
{
@@ -112,17 +112,17 @@ To ensure that our newly added **element.xml** file is taken into account while
112
112
113
113
```
114
114
115
-
## Deploy field to SharePoint Online and host JavaScript from local host
115
+
## Deploy the extension to SharePoint Online and host JavaScript from local host
116
116
117
-
Now you are ready to deploy the solution to SharePoint site and to get the `CustomAction` automatically associated on the site level.
117
+
Now you are ready to deploy the solution to a SharePoint site and to have the `CustomAction` automatically associated on the site level.
118
118
119
119
In the console window, enter the following command to package your client-side solution that contains the extension, so that we get the basic structure ready for packaging:
120
120
121
121
```
122
122
gulp bundle
123
123
```
124
124
125
-
Next execute following command, so that the solution package is created:
125
+
Next, execute the following command so that the solution package is created:
126
126
127
127
```
128
128
gulp package-solution
@@ -136,34 +136,34 @@ app-extension.sppkg
136
136
137
137
Next you need to deploy the package that was generated to the App Catalog.
138
138
139
-
Go to your tenant's **App Catalog**.
139
+
Go to your tenant's **App Catalog** and open the **Apps for SharePoint** library.
140
140
141
-
Upload or drag and drop the `app-extension.sppkg` located in the **sharepoint/solution** folder to the App Catalog. SharePoint will display a dialog and ask you to trust the client-side solution to deploy.
141
+
Upload or drag and drop the `app-extension.sppkg` located in the **sharepoint/solution** folder to the App Catalog. SharePoint will display a dialog and ask you to trust the client-side solution.
142
142
143
-
Notice that we did not update the URLs for hosting the solution for this deployment, so URL is still pointing to `https://localhost:4321`.
143
+
Notice that we did not update the URLs for hosting the solution for this deployment, so the URL is still pointing to `https://localhost:4321`. Click the **Deploy** button.
144
144
145
145
146
146
147
-
Move back to your console and ensure that the solution is running. If it's not running, executed following command in the solution folder.
147
+
Move back to your console and ensure that the solution is running. If it's not running, execute the following command in the solution folder:
148
148
149
149
```
150
150
gulp serve --nobrowser
151
151
```
152
152
153
153
Go to the site where you want to test SharePoint asset provisioning. This could be any site collection in the tenant where you deployed this solution package.
154
154
155
-
Chose the gears icon on the top navigation bar on the right and choose **Add an app** to go to your Apps page.
155
+
Choose the gear icon on the top navigation bar on the right and choose **Add an app** to go to your Apps page.
156
156
157
-
In the **Search** box, enter '**app**' and choose*Enter* to filter your apps.
157
+
In the **Search** box, enter '**app**' and press*Enter* to filter your apps.
158
158
159
159
160
160
161
-
Choose the **app-extension-client-side-solution** app to install the solution on the site. When installation is completed, refresh the page by pressing **F5**.
161
+
Choose the **app-extension-client-side-solution** app to install the solution on the site. When the installation is completed, refresh the page by pressing **F5**.
162
162
163
-
When application has been successfully installed, you can see the header and footer being rendered in similar ways as with the debug query parameters.
163
+
When the application has been successfully installed, you can see the header and footer being rendered just like with the debug query parameters.
164
164
165
165
166
166
167
167
## Next steps
168
168
169
-
Congratulations! You have deployed an extension to a modern SharePoint page from app catalog. You can continue building out your Hello World extension in the next topic, [Hosting extension from Office 365 CDN (Hello world part 4)](./hosting-extension-from-office365-cdn.md), where you will learn how to deploy and load the extension assets from a CDN instead of localhost.
169
+
Congratulations, you have deployed an extension to a modern SharePoint page from the app catalog! You can continue building out your Hello World extension in the next topic, [Hosting extension from Office 365 CDN (Hello world part 4)](./hosting-extension-from-office365-cdn.md), where you will learn how to deploy and load the extension assets from a CDN instead of localhost.
0 commit comments