Ajouter un rendu côté client personnalisé à un complément SharePoint hébergé sur SharePoint

Article
04/08/2023

Cet article est le huitième d’une série sur les concepts de base du développement de compléments SharePoint hébergés par SharePoint. Vous devez tout d’abord avoir pris connaissance de la rubrique Compléments SharePoint et des articles précédents de la série, disponibles dans la rubrique Commencer à créer des compléments SharePoint hébergés par SharePoint.

Remarque

Si vous avez consulté les articles sur les compléments hébergés par SharePoint, votre solution Visual Studio vous sera utile pour continuer à parcourir cette rubrique. Vous pouvez également télécharger le référentiel sur SharePoint_SP-hosted_Add-Ins_Tutorials et ouvrir le fichier BeforeClientRenderedControl.sln.

Importante

Les personnalisations basées sur JSLink (rendu côté client) ne sont pas prises en charge dans les expériences modernes. Cela inclut les bibliothèques et les listes modernes, y compris la prise en charge de JSLink dans les composants WebPart d’affichage de liste de pages modernes. Le rendu côté client est pris en charge dans les expériences classiques dans SharePoint Online ou en local.

Vous pouvez utiliser un code JavaScript court côté client pour personnaliser le rendu des composants WebPart, de la plupart des types de champs (colonnes) et de certains autres contrôles en attribuant un fichier JavaScript à la propriété JSLink du contrôle, comme SPField.JSLink. Vous pouvez également ajouter une logique de validation côté client de cette façon. Dans cet article, vous allez personnaliser le rendu d’un champ dans une liste du complément SharePoint Orientation des employés à l’aide du rendu côté client.

Remarque

Si l’utilisateur final a désactivé JavaScript dans son navigateur, SharePoint applique le rendu et la validation côté serveur.
La propriété JSLink n’est pas prise en charge sur la liste d’enquête ou d’événements. Un calendrier SharePoint est une liste Événements.

Créer et enregistrer le code JavaScript

Dans l’Explorateur de solutions, cliquez avec le bouton droit de la souris sur le nœud Scripts, puis sélectionnez Ajouter>Nouvel élément>Web.
Sélectionnez Fichier JavaScript et nommez-le OrientationStageRendering.js.
Votre rendu personnalisé du champ doit se produire automatiquement. Utilisez le code suivant pour ajouter une méthode anonyme au code JavaScript qui s’exécute automatiquement au chargement du fichier :
```
(function () {

})();
```
Dans le corps de cette méthode (entre les caractères { }), ajoutez le code suivant pour créer des objets JSON (JavaScript Object Notation) pour le contexte rendu prioritaire, les modèles de contexte et les modèles de champs.
```
var customRenderingOverride = {};
customRenderingOverride.Templates = {};
customRenderingOverride.Templates.Fields = {
}
```
Dans le corps de l’objet de modèle Fields, ajoutez l’objet JSON suivant.
```
"OrientationStage": { "View": renderOrientationStage }
```
- Le nom de propriété OrientationStage identifie le champ qui a personnalisé le rendu.
- La valeur de la propriété est un autre objet JSON.
- La propriété View identifie le contexte de page dans lequel le rendu personnalisé est appliqué. Dans ce cas, l’objet indique à SharePoint d’utiliser le rendu personnalisé sur les affichages de liste. (Il existe d’autres options pour les formulaires de modification, de création et d’affichage.)
- La valeur de la propriété renderOrientationStage correspond au nom de la méthode de rendu personnalisé que vous allez créer à une étape ultérieure.

La dernière chose que la méthode anonyme doit faire consiste à parler du rendu prioritaire au gestionnaire de modèles SharePoint. Ajoutez la ligne suivante à la fin du corps de la méthode.

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customRenderingOverride);

La méthode doit désormais se présenter comme suit :

(function () {
  var customRenderingOverride = {};
  customRenderingOverride.Templates = {};
  customRenderingOverride.Templates.Fields = {
      "OrientationStage": { "View": renderOrientationStage }
  }

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customRenderingOverride);
})();

Ajoutez la méthode suivante au fichier. Elle applique la couleur rouge à la valeur de la colonne Étape de l’orientation quand la valeur est Not Started et la couleur verte quand la valeur est Completed. (L’objet ctx est un objet de contexte client déclaré par le script prêt à l’emploi de SharePoint.)

function renderOrientationStage(ctx) {
  var orientationStageValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
  if (orientationStageValue == "Not Started")  {
      return "<span style='color:red'>" + orientationStageValue + "</span>"
  }
  else if (orientationStageValue == "Completed") {
      return "<span style='color:green'>" + orientationStageValue + "</span>"
  }
  else {
      return orientationStageValue;
  }
}

Dans l’Explorateur de solutions, développez Colonnes de site, puis OrientationStage. Ensuite, ouvrez le fichier elements.xml.
Pour indiquer à SharePoint d’utiliser votre code JavaScript personnalisé, ajoutez un nouvel attribut JSLink à l’élément Field, puis attribuez l’URL suivante en tant que valeur : ~site/Scripts/OrientationStageRendering.js.

Remarque

La propriété JSLink est toujours un fichier, et non une méthode. Il n’existe aucun moyen d’indiquer à SharePoint la méthode à exécuter. C’est pourquoi le fichier contient une méthode qui s’exécute automatiquement.

La balise de début de l’élément Field se présente désormais comme suit.
```
<Field
      ID="{some_guid_here}"
      Name="OrientationStage"
      Title="OrientationStage"
      DisplayName="Orientation Stage"
      Description="The current orientation stage of the employee."
      Type="Choice"
      Required="TRUE"
      Group="Employee Orientation"
      JSLink="~site/Scripts/OrientationStageRendering.js">

```

Ouvrez la page Default.aspx et ajoutez le code suivant en tant que dernier enfant de l'élément asp:Content dont la valeur ContentPlaceHolderID est définie sur PlaceHolderMain.

<p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/NewEmployeesInSeattle/AllItems.aspx';"
      Text="List View Page for New Employees in Seattle" /></p>

Exécuter et tester le complément

Appuyez sur la touche F5 pour déployer et exécuter votre complément. Visual Studio effectue une installation temporaire du complément sur votre site SharePoint de test et exécute immédiatement celui-ci.
Le rendu côté client configuré affecte le rendu du champ uniquement sur la page en mode liste, et non dans le composant WebPart d’affichage de liste que nous avons mis sur la page d’accueil. En effet, les composants WebPart appliquent par défaut le rendu côté serveur. Il existe plusieurs moyens d’inverser ce phénomène, mais ils seraient trop complexes à mettre en place pour un exemple aussi simple. Pour voir le rendu côté client en action, sélectionnez le lien en bas de la page de vue de liste pour les nouveaux employés à Seattle.
Lorsque la page de vue de liste s'ouvre, définissez la valeur Étape d'orientation pour certains éléments sur Non démarrée et d'autres sur Terminée pour voir le rendu personnalisé des couleurs.

Figure 1. Liste avec le rendu côté client
Pour terminer la session de débogage, fermez la fenêtre du navigateur ou arrêtez le débogage dans Visual Studio. Quand vous appuyez sur F5, Visual Studio retire la version précédente du complément et installe la dernière.
Vous allez travailler avec ce complément et la solution Visual Studio dans d’autres articles. Nous vous recommandons donc de retirer le complément une dernière fois quand vous avez terminé de travailler et que vous ne comptez pas le réutiliser pendant un moment. Cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions et sélectionnez Retirer.

Étapes suivantes

Dans l’article suivant, vous allez créer un bouton de ruban personnalisé dans le site web hôte d’un complément SharePoint.

Ajouter un rendu côté client personnalisé à un complément SharePoint hébergé sur SharePoint

Créer et enregistrer le code JavaScript

Exécuter et tester le complément

Étapes suivantes

Ressources supplémentaires