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/guidance/migrate-jslink-to-spfx-extensions.md
+26-21Lines changed: 26 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Migrating JSLink customizations to SharePoint Framework Field Customizers
3
3
description: Benefits of migrating, along with similarities and differences between the platforms.
4
-
ms.date: 01/11/2018
4
+
ms.date: 01/29/2020
5
5
ms.prod: sharepoint
6
6
localization_priority: Normal
7
7
---
@@ -12,51 +12,56 @@ SharePoint Framework is a new model for building SharePoint customizations. If y
12
12
13
13
First, let's introduce the available options when developing SharePoint Framework Extensions:
14
14
15
-
***Application Customizer**. Extend the native "modern" UI of SharePoint Online by adding custom HTML elements and client-side code to pre-defined placeholders of "modern" pages. At the time of this writing, the available placeholders are the header and the footer of every "modern" page.
16
-
***Command Set**. Add custom ECB menu items or custom buttons to the command bar of a list view for a list or a library. You can associate any JavaScript (TypeScript) action to these commands.
17
-
***Field Customizer**. Customize the rendering of a field in a list view by using custom HTML elements and client-side code.
15
+
-**Application Customizer**. Extend the native "modern" UI of SharePoint Online by adding custom HTML elements and client-side code to pre-defined placeholders of "modern" pages. At the time, of this writing, the available placeholders are the header and the footer of every "modern" page.
16
+
-**Command Set**. Add custom ECB menu items or custom buttons to the command bar of a list view for a list or a library. You can associate any JavaScript (TypeScript) action to these commands.
17
+
-**Field Customizer**. Customize the rendering of a field in a list view by using custom HTML elements and client-side code.
18
18
19
19
Depending on what is the target of your customization, you can leverage any of the above flavors. For example, the **Field Customizers** are a good replacement for the JSLink customizations of fields.
20
20
21
+
> [!TIP]
22
+
> While field customizers are the natural migration path from JSLink, you should also evaluate using list and column formatting to customize the list view. Both technologies have their individual advantages and disadvantages and one may be simpler to implement and maintain than the other depending on your scenario.
23
+
>
24
+
> You can learn more here: [Use column formatting to customize SharePoint](../../../declarative-customization/column-formatting.md)
25
+
21
26
## Benefits of migrating existing JSLink customizations to the SharePoint Framework
22
27
23
28
SharePoint Framework was built thinking about the new SharePoint "modern" experience, which is available on the "modern" team sites and "modern" communication sites, and which targets any device and any platform.
24
29
25
30
### The only supported way of customizing "modern" lists and libraries
26
31
27
-
One of the main benefits of migrating old-school JSLink customizations to the SharePoint Framework is that it is the only supported technique that you have on modern sites for customizing the UI of "modern" lists and libraries. In fact, the "modern" lists and libraries, because of their rendering infrastructure and because of the no-script flag enabled on the "modern" sites, can't rely on old-school JSLink customizations. Thus, if you really want to extend the "modern" UI, you need to upgrade to the SharePoint Framework.
32
+
One of the main benefits of migrating old-school JSLink customizations to the SharePoint Framework is that its the only supported technique that you have on modern sites for customizing the UI of "modern" lists and libraries. In fact, the "modern" lists and libraries, because of their rendering infrastructure and because of the no-script flag enabled on the "modern" sites, can't rely on old-school JSLink customizations. If you really want to extend the "modern" UI, you need to upgrade to the SharePoint Framework.
28
33
29
34
### Easier access to information in SharePoint and Office 365
30
35
31
-
Another fundamental topic to consider is that in the old-school JSLink customizations it was not easy to consume SharePoint content and data. The only way of doing that was by using JSOM (the JavaScript client-side object model of SharePoint) or low-level REST APIs. Moreover, it was almost impossible to consume the full set of services of Office 365 unless you autonomously leveraged ADAL.JS (Azure Active Directory Authentication Library for JavaScript) and custom JavaScript code.
36
+
Another fundamental topic to consider is that in the old-school JSLink customizations it wasn't easy to consume SharePoint content and data. The only way of doing that was by using JSOM (the JavaScript client-side object model of SharePoint) or low-level REST APIs. It was almost impossible to consume the full set of services of Office 365 unless you autonomously leveraged ADAL.JS (Azure Active Directory Authentication Library for JavaScript) and custom JavaScript code.
32
37
33
-
Now, with the SharePoint Framework and the SharePoint Framework Extensions, it is easy and straightforward to consume both the SharePoint REST API and Microsoft Graph. You can now create more powerful solutions, which can consume and interact with the full ecosystem of services provided by Microsoft Office 365.
38
+
Now, with the SharePoint Framework and the SharePoint Framework Extensions, its easy and straightforward to consume both the SharePoint REST API and Microsoft Graph. You can now create more powerful solutions, which can consume and interact with the full ecosystem of services provided by Microsoft Office 365.
34
39
35
40
## Similarities between SharePoint Framework solutions and SharePoint Feature Framework customizations
36
41
37
-
Nevertheless, both the JSLink customizations and the SharePoint Feature Framework customizations share some similarities.
42
+
Both the JSLink customizations and the SharePoint Feature Framework customizations share some similarities.
38
43
39
44
### Provisioning model
40
45
41
-
Both SharePoint Framework Extensions and user custom actions or the Edit Control Block (ECB) menu item solutions leverage an XML manifest file, which is written with the SharePoint Feature Framework syntax. Thus, the deployment is based on the same techniques. However, with the new Field Customizers, you can customize the rendering of a field, and not the rendering of a single view of a list or library. Of course, the custom field can be used in as many lists and libraries as you like.
46
+
Both SharePoint Framework Extensions and user custom actions or the Edit Control Block (ECB) menu item solutions leverage an XML manifest file, which is written with the SharePoint Feature Framework syntax. Thus, the deployment is based on the same techniques. However, with the new Field Customizers, you can customize the rendering of a field, and not the rendering of a single view of a list or library. The custom field can be used in as many lists and libraries as you like.
42
47
43
48
### Run as a part of the page
44
49
45
50
Similar to user custom actions and ECB of SharePoint Feature Framework, SharePoint Framework Extensions are a part of the page. This gives these solutions access to the page's DOM and allows them to communicate with other components on the same page. Also, it allows developers to more easily make their solutions responsive to adapt to the different form factors on which a SharePoint page could be displayed, including the SharePoint mobile app.
46
51
47
-
Because SharePoint Framework Extensions run as part of the page, whatever resources the customization has access to, other elements on the page can access as well. This is important to keep in mind when building solutions that rely on OAuth implicit flow with bearer access tokens or use cookies or browser storage for storing sensitive information. Because SharePoint Framework Extensions run as a part of the page, other elements on that page can access all these resources as well.
52
+
Because SharePoint Framework Extensions run as part of the page, whatever resources the customization have access to, other elements on the page can access as well. This is important to keep in mind when building solutions that rely on OAuth implicit flow with bearer access tokens or use cookies or browser storage for storing sensitive information. Because SharePoint Framework Extensions run as a part of the page, other elements on that page can access all these resources as well.
48
53
49
54
### Use any library to build your extensions
50
55
51
-
When building page customizations by using user custom actions, you might have used libraries such as jQuery or Knockout to make your customization dynamic and better respond to user interaction. When building SharePoint Framework Extensions, you can use any client-side library to enrich your solution, the same way you would have done in the past.
56
+
When building page customizations by using user custom actions, you might have used libraries such as jQuery or Knockout to make your customization dynamic and better respond to user interaction. When building SharePoint Framework Extensions, you can use any client-side library to enrich your solution, the same way you would have done in the past.
52
57
53
58
An additional benefit that the SharePoint Framework offers you is isolation of your script. Even though the web part is executed as a part of the page, its script is packaged as a module allowing, for example, different extensions on the same page to use a different version of jQuery without colliding with each other. This is a powerful feature that allows you to focus on delivering business value instead of technical migrations and compromising on functionality.
54
59
55
60
### Run as the current user
56
61
57
-
In customizations built by using JSLink, whenever you needed to communicate with SharePoint, all you had to do was to call its API. The client-side solution was running in the browser in the context of the current user, and by automatically sending the authentication cookie along with the request, your solution could directly connect to SharePoint. No additional authentication, such as when using SharePoint Add-ins, was necessary to communicate with SharePoint.
62
+
In customizations built by using JSLink, whenever you needed to communicate with SharePoint, all you had to do was to call its API. The client-side solution was running in the browser in the context of the current user, and by automatically sending the authentication cookie along with the request, your solution could directly connect to SharePoint. No additional authentication, such as when using SharePoint Add-ins, was necessary to communicate with SharePoint.
58
63
59
-
The same mechanism applies to customizations built on the SharePoint Framework that also run under the context of the currently authenticated user and don't require any additional authentication steps to communicate with SharePoint. Of course, the security context is that of the currently connected user, which implies that from a security perspective, you need to be careful when installing any SharePoint Framework Extension in any target site collection.
64
+
The same mechanism applies to customizations built on the SharePoint Framework that also run under the context of the currently authenticated user and don't require any additional authentication steps to communicate with SharePoint. The security context is that of the currently connected user, which implies that from a security perspective, you need to be careful when installing any SharePoint Framework Extension in any target site collection.
60
65
61
66
### Use only client-side code
62
67
@@ -66,7 +71,7 @@ Both SharePoint Framework Extensions and JSLink customizations run in the browse
66
71
67
72
Both SharePoint Framework Extensions and JavaScript files for JSLink customizations can be hosted on SharePoint Online, and eventually in the Office 365 CDN service, avoiding any need for external services or hosting environments.
68
73
69
-
While hosting SharePoint Framework solutions on a CDN offers many advantages, it is not required, and you could choose to host the code in a SharePoint document library. SharePoint Framework packages (.sppkg files) deployed to the app catalog specify the URL at which SharePoint Framework can find the solution's code. If the user browsing the page with the extension can download the script from the specified ___location, there are no restrictions with regards to what that URL must be.
74
+
While hosting SharePoint Framework solutions on a CDN offers many advantages, it isn't required, and you could choose to host the code in a SharePoint document library. SharePoint Framework packages (.sppkg files) deployed to the App Catalog specify the URL at which SharePoint Framework can find the solution's code. If the user browsing the page with the extension can download the script from the specified ___location, there are no restrictions with regards to what that URL must be.
70
75
71
76
Office 365 offers the public CDN capability that allows you to publish files from a specific SharePoint document library to a CDN. Office 365 public CDN strikes a nice balance between the benefits of using a CDN and the simplicity of hosting code files in a SharePoint document library. If your organization doesn't mind their code files being publicly available, using the Office 365 public CDN is an option worth considering.
72
77
@@ -76,13 +81,13 @@ However, between the two development models there are also some significant diff
76
81
77
82
### Run in no-script sites and in "modern" lists and libraries
78
83
79
-
Because SharePoint Framework solutions, including Extensions, are deployed through the app catalog with a prior approval, they are not subject to the no-script restrictions and work on all "modern" sites. Moreover, as we already saw previously, the Field Customizers of SharePoint Framework work in "modern" lists and libraries, while the old-school JSLink doesn't.
84
+
Because SharePoint Framework solutions, including Extensions, are deployed through the App Catalog with a prior approval, they aren't subject to the no-script restrictions and work on all "modern" sites. Moreover, as we already saw previously, the Field Customizers of SharePoint Framework work in "modern" lists and libraries, while the old-school JSLink doesn't.
80
85
81
86
### Field Customizers support view only scenarios
82
87
83
88
A JSLink customization can be used to customize not only the view of a field in a list or library, but also the display and edit views of a field while showing a single item.
84
89
85
-
On the contrary, at the time of this writing, a Field Customizer of SharePoint Framework can customize the rendering of a field only in the list view rendering mode, while in the display and edit views of a single item you are not able to leverage the customization.
90
+
On the contrary, at the time of this writing, a Field Customizer of SharePoint Framework can customize the rendering of a field only in the list view rendering mode, while in the display and edit views of a single item you aren't able to leverage the customization.
86
91
87
92
### Use TypeScript for building more robust and easier to maintain solutions
88
93
@@ -96,23 +101,23 @@ When building client-side customizations for the classic SharePoint user experie
96
101
97
102
The modern SharePoint user experience doesn't include SharePoint JSOM by default. While developers can load it themselves, the recommendation is to use the REST API instead, or the SharePoint Patterns and Practices JavaScript Core Library (PnP JS Library), which internally uses the SharePoint REST API. Using REST is more universal and interchangeable between the different client-side libraries such as jQuery, Angular, or React.
98
103
99
-
Microsoft is not actively investing in JSOM anymore. If you prefer working with an API, you could alternatively use the PnP JS Library, which offers you a fluent API and TypeScript typings.
104
+
Microsoft isn't actively investing in JSOM anymore. If you prefer working with an API, you could also use the PnP JS Library, which offers you a fluent API and TypeScript typings.
100
105
101
106
## Migrate existing customization to the SharePoint Framework Extensions
102
107
103
-
Migrating existing customizations to the SharePoint Framework Extensions offers both end-users and developers many benefits. When considering migrating existing customizations to the SharePoint Framework, you can either choose to reuse as much of the existing JavaScript scripts as possible, or to completely rewrite the customization by using TypeScript.
108
+
Migrating existing customizations to the SharePoint Framework Extensions offers both end-users and developers many benefits. When considering migrating existing customizations to the SharePoint Framework, you can either choose to reuse as many of the existing JavaScript scripts as possible, or to completely rewrite the customization by using TypeScript.
104
109
105
110
### Reuse existing scripts
106
111
107
112
When migrating existing customizations to the SharePoint Framework Extensions, you can choose to reuse your existing scripts. Even though the SharePoint Framework encourages using TypeScript, you can use plain JavaScript and gradually transform it to TypeScript. If you need to support a solution for a limited period or have a limited budget, this approach might be good enough for you.
108
113
109
-
However, reusing existing scripts in a SharePoint Framework solution is not always possible. For example, given the variety of JavaScript libraries, there is no easy way to tell upfront if your existing scripts can be reused in a SharePoint Framework solution or if you need to rewrite them after all. The only way to determine this is by trying to move the different pieces to a SharePoint Framework solution and see if they work as expected.
114
+
Reusing existing scripts in a SharePoint Framework solution is not always possible. For example, given the variety of JavaScript libraries, there is no easy way to tell upfront if your existing scripts can be reused in a SharePoint Framework solution or if you need to rewrite them after all. The only way to determine this is by trying to move the different pieces to a SharePoint Framework solution and see if they work as expected.
110
115
111
116
### Rewrite the customization
112
117
113
-
If you need to support your solution for a longer period or would like to make better use of the SharePoint Framework, or if it turns out that your existing scripts cannot be reused with the SharePoint Framework, you might need to completely rewrite your customization. While it's costlier than reusing existing scripts, it offers you better results over a longer period: a solution that is better performing and easier to maintain and to use.
118
+
If you need to support your solution for a longer period or would like to make better use of the SharePoint Framework, or if it turns out that your existing scripts can't be reused with the SharePoint Framework, you might need to completely rewrite your customization. While it's costlier than reusing existing scripts, it offers you better results over a longer period: a solution that is better performing and easier to maintain and to use.
114
119
115
-
When rewriting an existing customization to a SharePoint Framework solution, you should start with the desired functionality in mind. For implementing the user experience, you should consider using the Office UI Fabric so that your solution looks like an integral part of SharePoint.
120
+
When rewriting an existing customization to a SharePoint Framework solution, you should start with the desired functionality in mind. For implementing the user experience, you should consider using the Office UI Fabric so that your solution looks like an integral part of SharePoint.
0 commit comments