Migration de personnalisations JSLink vers des personnalisateurs de champ SharePoint FrameworkMigrating JSLink customizations to SharePoint Framework Field Customizers

SharePoint Framework (SPFx) est le modèle recommandé pour l’extension et la création de personnalisations SharePoint.The SharePoint Framework (SPFx) is the recommended model for extending and building SharePoint customizations. Si vous avez personnalisé les champs et les affichages de liste SharePoint avec JSLink, vous pouvez vous demander quels sont les avantages de la migration de ces personnalisations vers SPFx.If you customized SharePoint fields and list views with JSLink, you might wonder what's the advantage to migrate these customizations to SPFx is.

Tout d’abord, nous allons présenter les options disponibles lors du développement des extensions de SharePoint Framework :First, let's introduce the available options when developing SharePoint Framework extensions:

  • Personnalisateur d’application: étendez l’interface utilisateur « moderne » native de SharePoint en ajoutant des éléments HTML personnalisés et du code côté client à des espaces réservés prédéfinis des pages « modernes ».Application Customizer: Extend the native "modern" UI of SharePoint by adding custom HTML elements and client-side code to pre-defined placeholders of "modern" pages. Pour plus d’informations sur les personnalisateurs d’application, voir créer votre première extension SharePoint Framework (Hello World 1re partie).For more information on application customizers, see Build your first SharePoint Framework Extension (Hello World part 1).
  • Jeu de commandes: ajouter des éléments de menu ou des boutons personnalisés à la barre de commandes d’un affichage de liste pour une liste ou une bibliothèque.Command Set: Add custom Edit Control Block (ECB) menu items or custom buttons to the command bar of a list view for a list or a library. Vous pouvez associer n’importe quelle action côté client à ces commandes.You can associate any client-side action to these commands. Pour plus d’informations sur les jeux de commandes, voir créer votre première extension de jeu de commandes ListView.For more information on command sets, see Build your first ListView Command Set extension.
  • Personnalisateur de champ: personnaliser le rendu d’un champ dans un affichage de liste à l’aide d’éléments HTML personnalisés et de code côté client.Field Customizer: Customize the rendering of a field in a list view by using custom HTML elements and client-side code. Pour plus d’informations sur les personnalisateurs de champ, voir créer votre première extension de personnalisateur de champ.For more information on field customizers, see Build your first Field Customizer extension.

Selon la cible de vos personnalisations, vous pouvez tirer parti des avantages offerts par les versions ci-dessus.Depending on what is the target of your customization, you can leverage any of the above flavors. Par exemple, les personnalisateurs de champ peuvent remplacer les personnalisations de champ JSLink.For example, the Field Customizers are a good replacement for the JSLink customizations of fields.

Conseil

Bien que les personnalisateurs de champ soient le chemin de migration naturel à partir de JSLink, vous devez également évaluer l’utilisation de la mise en forme de liste et de colonne pour personnaliser l’affichage de liste.While field customizers are the natural migration path from JSLink, you should also evaluate using list and column formatting to customize the list view. Les deux technologies ont leurs avantages et inconvénients individuels et l’un d’entre eux peut être plus facile à mettre en œuvre et à gérer que l’autre en fonction de votre scénario.Both technologies have their individual advantages and disadvantages and one may be simpler to implement and maintain than the other depending on your scenario.

Pour plus d’informations, consultez la rubrique mise en forme de la colonne pour personnaliser SharePointYou can learn more here: Use column formatting to customize SharePoint

L’infrastructure SharePoint a été conçue pour étendre l’expérience « moderne » de SharePoint.The SharePoint Framework was built to extend the SharePoint "modern" experience. L’expérience « moderne » est disponible sur les sites d’équipe « modernes » et sur les sites de communication « modernes », et qui cible n’importe quel appareil et n’importe quelle plateforme.The "modern" experience is available on the "modern" team sites and "modern" communication sites, and which targets any device and any platform.

Une seule méthode de personnalisation des bibliothèques et des listes « modernes »The only supported way of customizing "modern" lists and libraries

L’un des principaux avantages de la migration de personnalisations JSLink héritées vers SharePoint Framework est que la seule option prise en charge est disponible.One of the main benefits of migrating legacy JSLink customizations to the SharePoint Framework is that it's the only supported option available. En fait, les listes et bibliothèques « modernes », en raison de leur infrastructure de rendu et en raison de l’indicateur sans script activé sur les sites « modernes », ne peuvent pas reposer sur des personnalisations JSLink héritées.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 legacy JSLink customizations. Si vous souhaitez étendre l’interface utilisateur « moderne », vous devez migrer la solution JSLink vers un Personnalisateur de champ SharePoint Framework.If you really want to extend the "modern" UI, you need to migrate the JSLink solution to a SharePoint Framework field customizer.

Accès simplifié aux informations dans SharePoint et Microsoft 365Easier access to information in SharePoint and Microsoft 365

Une autre rubrique fondamentale à prendre en considération est que, dans les personnalisations JSLink héritées, il n’était pas facile d’utiliser des données et du contenu SharePoint.Another fundamental topic to consider is that in the legacy JSLink customizations it wasn't easy to consume SharePoint content and data. La seule façon de procéder consiste à utiliser le modèle objet côté client (JSOM) JavaScript ou des API REST de bas niveau.The only way of doing that was by using JavaScript client-side object model (JSOM) or low-level REST APIs. Il était presque impossible d’utiliser l’ensemble complet des services de Microsoft 365, sauf si vous avez utilisé ADAL.JS (bibliothèque d’authentification Azure Active Directory pour JavaScript) et code JavaScript personnalisé.It was almost impossible to consume the full set of services of Microsoft 365 unless you used ADAL.JS (Azure Active Directory Authentication Library for JavaScript) and custom JavaScript code.

Désormais, avec SharePoint Framework et les extensions de SharePoint Framework, il est facile et facile d’utiliser l’API REST SharePoint et Microsoft Graph.Now, with the SharePoint Framework and the SharePoint Framework extensions, it's easy and straightforward to consume both the SharePoint REST API and Microsoft Graph. Vous pouvez désormais créer des solutions plus puissantes, qui peuvent utiliser et interagir avec l’écosystème complet des services fournis par Microsoft 365.You can now create more powerful solutions, which can consume and interact with the full ecosystem of services provided by Microsoft 365.

Similarités entre les solutions SharePoint Framework et les personnalisations SharePoint Feature FrameworkSimilarities between SharePoint Framework solutions and SharePoint Feature Framework customizations

Les personnalisations JSLink et les personnalisations SharePoint Feature Framework partagent des similitudes.Both the JSLink customizations and the SharePoint Feature Framework customizations share some similarities.

Modèle de mise en serviceProvisioning model

Les extensions de SharePoint Framework et les actions personnalisées de l’utilisateur ou les éléments de menu BCE utilisent un fichier manifeste XML, qui est écrit avec la syntaxe de SharePoint Feature Framework.Both SharePoint Framework extensions and user custom actions or the ECB menu item solutions use an XML manifest file, which is written with the SharePoint Feature Framework syntax. Ainsi, le déploiement repose sur les mêmes techniques.Thus, the deployment is based on the same techniques. Cependant, avec les nouveaux personnalisateurs de champ, vous pouvez personnaliser le rendu d’un champ, et non le rendu de l’affichage seul d’une liste ou d’une bibliothèque.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. Le champ personnalisé peut être utilisé dans autant de listes et de bibliothèques que vous le souhaitez.The custom field can be used in as many lists and libraries as you like.

Exécution en tant qu’une partie de la pageRun as a part of the page

À l’instar des actions personnalisées de l’utilisateur et de la BCE de SharePoint Feature Framework, les extensions SharePoint Framework font partie de la page.Similar to user custom actions and ECB of SharePoint Feature Framework, SharePoint Framework extensions are a part of the page. Ainsi, ces solutions ont accès au DOM de la page et peuvent communiquer avec d’autres composants sur la même page.This gives these solutions access to the page's DOM and allows them to communicate with other components on the same page. En outre, cela permet aux développeurs d’adapter plus facilement leurs solutions aux différents facteurs de forme sur lesquels une page SharePoint peut être affichée, y compris l’application mobile SharePoint.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.

Étant donné que les extensions de SharePoint Framework sont exécutées dans le cadre de la page, les autres éléments de la page peuvent également accéder à toutes les ressources auxquelles la personnalisation a accès.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. Il est important de garder cela à l’esprit lors de la création de solutions qui reposent sur un flux implicite OAuth avec des jetons d’accès de support, ou qui utilisent des cookies ou le stockage du navigateur pour stocker des informations sensibles.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. Étant donné que les extensions de SharePoint Framework s’exécutent en tant que partie de la page, les autres éléments de cette page peuvent également accéder à toutes ces ressources.Because SharePoint Framework extensions run as a part of the page, other elements on that page can access all these resources as well.

Création des extensions à l’aide de la bibliothèque de votre choixUse any library to build your extensions

Quand vous créez des personnalisations de page à l’aide des actions personnalisées de l’utilisateur, vous pouvez utiliser des bibliothèques, telles que jQuery ou Knockout, pour rendre votre personnalisation dynamique et plus réactive aux actions des utilisateurs.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. Lorsque vous créez des extensions de SharePoint Framework, vous pouvez utiliser n’importe quelle bibliothèque côté client pour enrichir votre solution, de la même façon que vous le feriez dans le passé.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.

Un autre des avantages offerts par SharePoint Framework est la possibilité d’isoler votre script.An additional benefit that the SharePoint Framework offers you is isolation of your script. Même si le composant WebPart est exécuté comme une partie de la page, son script se présente sous forme de module ce qui permet, par exemple, à différentes extensions de la même page d’utiliser une version distincte de jQuery sans entrer en conflit.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. Cette fonction avancée vous permet de vous concentrer sur la valeur commerciale plutôt que sur des migrations techniques sans faire de compromis sur les fonctionnalités.This is a powerful feature that allows you to focus on delivering business value instead of technical migrations and compromising on functionality.

Exécution en tant qu’utilisateur actuelRun as the current user

Dans les personnalisations créées à l’aide de JSLink, il vous suffisait d’appeler les API de SharePoint quand vous aviez besoin de communiquer avec ce dernier.In customizations built by using JSLink, whenever you needed to communicate with SharePoint, all you had to do was to call its API. La solution côté client s’exécutait dans le navigateur dans le contexte de l’utilisateur actuel et, en envoyant automatiquement le cookie d’authentification avec la demande, votre solution pouvait se connecter directement à SharePoint.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. Aucune autre authentification supplémentaire (comme lors de l’utilisation de compléments SharePoint) n’était nécessaire pour communiquer avec SharePoint.No additional authentication, such as when using SharePoint Add-ins, was necessary to communicate with SharePoint.

Le même mécanisme s’applique aux personnalisations créées sur SharePoint Framework, qui s’exécutent également sous le contexte de l’utilisateur actuellement authentifié et qui ne nécessitent pas d’étapes d’authentification supplémentaires afin de communiquer avec SharePoint.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. Le contexte de sécurité est celui de l’utilisateur actuellement connecté, ce qui implique qu’en matière de sécurité, vous devez être attentif lors de l’installation d’une extension SharePoint Framework dans n’importe quelle collection de sites cible.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.

Utilisation du code côté client uniquementUse only client-side code

Les personnalisations JSLink et les personnalisations de SharePoint Framework s’exécutent dans le navigateur et peuvent contenir uniquement du code JavaScript côté client.Both SharePoint Framework extensions and JSLink customizations run in the browser and can contain only client-side JavaScript code. Les solutions côté client rencontrent plusieurs limitations. Par exemple, elles ne peuvent pas élever les autorisations dans SharePoint ou communiquer avec des API externes qui ne prennent pas en charge la communication CORS ou l’authentification à l’aide du flux implicite OAuth.Client-side solutions have several limitations, such as not being able to elevate permissions in SharePoint, or reach out to external APIs that don't support cross-origin communication (CORS), or authentication using OAuth implicit flow. Dans ce cas, la solution côté client peut utiliser une API côté serveur à distance pour effectuer l’opération nécessaire et renvoyer les résultats au client.In such cases, the client-side solution could leverage a remote server-side API to do the necessary operation and return the results to the client.

Modèle d’hébergement auto-cohérent et basé sur Microsoft 365Hosting model self-consistent and based on Microsoft 365

Les extensions SharePoint Framework et les fichiers JavaScript pour les personnalisations JSLink peuvent être hébergés sur SharePoint Online et éventuellement dans le service CDN de Microsoft 365, ce qui évite toute nécessité pour les services externes ou les environnements d’hébergement.Both SharePoint Framework extensions and JavaScript files for JSLink customizations can be hosted on SharePoint Online, and eventually in the Microsoft 365 CDN service, avoiding any need for external services or hosting environments.

Bien que l’hébergement de solutions SharePoint Framework sur un CDN offre de nombreux avantages, il n’est pas obligatoire et vous pouvez choisir d’héberger le code dans une bibliothèque de documents SharePoint.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. Les packages SharePoint Framework (** * fichiers. sppkg**) déployés dans le catalogue d’applications spécifient l’URL à laquelle SharePoint Framework peut trouver le code de la solution.SharePoint Framework packages (*.sppkg files) deployed to the App Catalog specify the URL at which SharePoint Framework can find the solution's code. Si l’utilisateur qui parcourt la page comportant l’extension peut télécharger le script à partir de l’emplacement spécifié, il n’existe aucune restriction concernant la nature de l’URL.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.

Microsoft 365 offre la fonctionnalité de CDN public, qui vous permet de publier des fichiers à partir d’une bibliothèque de documents SharePoint spécifique vers un CDN.Microsoft 365 offers the public CDN capability that allows you to publish files from a specific SharePoint document library to a CDN. Le CDN public Microsoft 365 est un bon équilibre entre les avantages de l’utilisation d’un CDN et la simplicité d’hébergement de fichiers de code dans une bibliothèque de documents SharePoint.Microsoft 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. Si votre organisation ne tient pas compte de la disponibilité publique des fichiers de code, l’utilisation du CDN public Microsoft 365 est une option intéressante.If your organization doesn't mind their code files being publicly available, using the Microsoft 365 public CDN is an option worth considering.

Toutefois, ces deux modèles de développement présentent aussi des différences notables, dont vous devez tenir compte quand vous concevez l’architecture de vos solutions.However, between the two development models there are also some significant differences, which you should consider when designing the architecture of your solutions.

Exécution dans des sites sans script, ainsi que des bibliothèques et des listes « modernes »Run in no-script sites and in "modern" lists and libraries

Étant donné que les solutions SharePoint Framework, y compris les extensions, sont déployées via le catalogue d’applications avec une approbation préalable, elles ne sont pas soumises aux restrictions de non-script et fonctionnent sur tous les sites « modernes ».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. Comme nous l’avons déjà vu, les personnalisateurs de champ de SharePoint Framework travaillent dans des listes et des bibliothèques « modernes », tandis que le JSLink hérité ne l’est pas.As we already saw, the Field Customizers of SharePoint Framework work in "modern" lists and libraries, while the legacy JSLink doesn't.

Prise en charge de l’affichage seul par les personnalisateurs de champField Customizers support view only scenarios

Une personnalisation JSLink peut servir à personnaliser l’affichage d’un champ dans une liste ou une bibliothèque, mais aussi le mode d’édition et d’affichage d’un champ quand vous affichez un seul élément.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.

Au moment de la rédaction de cet article, un Personnalisateur de champ de SharePoint Framework peut personnaliser le rendu d’un champ uniquement en mode de rendu de liste, tandis que dans les affichages de l’affichage et de la modification d’un élément unique, vous ne pouvez pas utiliser la personnalisation.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.

Utilisation de TypeScript pour créer des solutions plus robustes et plus faciles à tenir à jourUse TypeScript for building more robust and easier to maintain solutions

Quand ils créaient des personnalisations à l’aide de JSLink, les développeurs utilisaient souvent le langage JavaScript brut.When building customizations using JSLink, developers often used plain JavaScript. Souvent, ces solutions ne comportaient aucun test automatisé et la refactorisation du code pouvait engendrer des erreurs.Often such solutions didn't contain any automated tests, and refactoring the code was error-prone.

SharePoint Framework permet aux développeurs de profiter du système de type TypeScript lors de la création de solutions.SharePoint Framework allows developers to benefit from the TypeScript type system when building solutions. Grâce au système de type, les erreurs sont détectées pendant le développement, et non pendant l’exécution.Thanks to the type system, errors are caught during development rather than at runtime. De plus, le processus de refactorisation du code est désormais plus simple, car les modifications apportées au code sont protégées par TypeScript.Also, refactoring code can be done more easily because changes to the code are safeguarded by TypeScript. Comme l’ensemble du langage JavaScript constitue un langage TypeScript valide, la barrière à l’entrée est faible et vous pouvez migrer petit à petit votre langage JavaScript vers TypeScript, en augmentant la maintenabilité de vos solutions.Because all JavaScript is valid TypeScript, the entry barrier is low, and you can migrate your plain JavaScript to TypeScript gradually over time, increasing the maintainability of your solutions.

Aucun accès par défaut au modèle objet JavaScript SharePointNo access to SharePoint JavaScript Object Model by default

Lors de la création de personnalisations côté client pour l’expérience utilisateur SharePoint classique, de nombreux développeurs utilisaient le JSOM pour communiquer avec SharePoint.When building client-side customizations for the classic SharePoint user experience, many developers used the JSOM to communicate with SharePoint. Les JSOM les ont proposées à IntelliSense et un accès facile à l’API SharePoint de la même manière que le modèle objet côté client (CSOM).The JSOM offered them IntelliSense and easy access to the SharePoint API in a way similar to the Client-Side Object Model (CSOM). Dans les pages SharePoint classiques, la partie principale du JSOM était présente par défaut sur la page, et les développeurs pouvaient charger d’autres parties pour communiquer avec la recherche SharePoint, par exemple.In classic SharePoint pages, the core piece of the JSOM was by default present on the page, and developers could load additional pieces to communicate with SharePoint Search, for example.

L’expérience utilisateur SharePoint moderne n’inclut pas le JSOM SharePoint par défaut.The modern SharePoint user experience doesn't include SharePoint JSOM by default. Bien que les développeurs puissent le charger eux-mêmes, il est recommandé d’utiliser l’API REST à la place ou la bibliothèque principale JavaScript pour les modèles et pratiques SharePoint (PnPJS), qui utilise l’API REST SharePoint en interne.While developers can load it themselves, the recommendation is to use the REST API instead, or the SharePoint Patterns and Practices JavaScript Core Library (PnPJS), which internally uses the SharePoint REST API. L’utilisation de REST a un caractère plus universel et interchangeable entre les différentes bibliothèques côté client, telles que jQuery, Angular ou React.Using REST is more universal and interchangeable between the different client-side libraries such as jQuery, Angular, or React.

Microsoft n’investit pas activement dans le JSOM.Microsoft isn't actively investing in the JSOM. Si vous préférez travailler avec une API, vous pouvez utiliser la bibliothèque PnP JS, qui vous offre une API Fluent et des déclarations de type dactylographié.If you prefer working with an API, you can use the PnP JS Library, which offers you a fluent API and TypeScript type declarations.

Migrer une personnalisation existante vers les extensions de SharePoint FrameworkMigrate existing customization to the SharePoint Framework extensions

La migration de personnalisations existantes vers les extensions de SharePoint Framework offre de nombreux avantages pour les utilisateurs finaux et les développeurs.Migrating existing customizations to the SharePoint Framework extensions offers both end-users and developers many benefits. Lorsque vous envisagez de migrer des personnalisations existantes vers SharePoint Framework, vous pouvez choisir de réutiliser autant de scripts JavaScript existants que possible ou de réécrire entièrement la personnalisation à l’aide de la gravure.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.

Réutilisation de scripts existantsReuse existing scripts

Lors de la migration de personnalisations existantes vers les extensions de SharePoint Framework, vous pouvez choisir de réutiliser vos scripts existants.When migrating existing customizations to the SharePoint Framework extensions, you can choose to reuse your existing scripts. Bien que SharePoint Framework encourage l’utilisation de TypeScript, vous pouvez utiliser le langage JavaScript brut et le transformer petit à petit en langage TypeScript.Even though the SharePoint Framework encourages using TypeScript, you can use plain JavaScript and gradually transform it to TypeScript. Cette approche peut vous convenir si vous devez prendre en charge une solution pendant une durée limitée ou si vous disposez d’un budget limité.If you need to support a solution for a limited period or have a limited budget, this approach might be good enough for you.

Il n’est pas toujours possible de réutiliser des scripts existants dans une solution SharePoint Framework.Reusing existing scripts in a SharePoint Framework solution isn't always possible. Étant donné la variété des bibliothèques JavaScript, il n’existe aucun moyen simple de savoir à l’avance si vos scripts existants peuvent être réutilisés dans une solution SharePoint Framework ou si vous devrez les réécrire.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. La seule façon de le savoir consiste à essayer de déplacer les différentes parties vers une solution SharePoint Framework et de voir si elles fonctionnent comme prévu.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.

Réécriture de la personnalisationRewrite the customization

Si vous avez besoin de prendre en charge votre solution pendant une période plus longue ou si vous souhaitez mieux utiliser SharePoint Framework, ou s’il s’avère que vos scripts existants ne peuvent pas être réutilisés avec SharePoint Framework, vous devrez peut-être réécrire entièrement votre personnalisation.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. Bien que cette solution soit plus onéreuse que de réutiliser les scripts existants, elle donne de meilleurs résultats dans le temps : une solution qui fonctionne mieux, qui est plus facile à tenir à jour et à utiliser.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.

Lors de la réécriture d’une personnalisation existante dans une solution SharePoint Framework, vous devez commencer par les fonctionnalités souhaitées.When rewriting an existing customization to a SharePoint Framework solution, you should start with the wanted functionality in mind. Pour implémenter l’expérience utilisateur, vous devez envisager d’utiliser Office UI Fabric afin que votre solution semble faire partie intégrante de SharePoint.For implementing the user experience, you should consider using the Office UI Fabric so that your solution looks like an integral part of SharePoint.

Voir aussiSee also