Partager via

Type de champ personnalisé dans le modèle de complément SharePoint

  • Article

Résumé

L’approche que vous utilisez pour fournir des expériences personnalisées aux utilisateurs finaux est différente dans le nouveau modèle de complément SharePoint qu’avec le code de confiance totale. Dans un scénario standard ftC (Full Trust Code) / Farm Solution, les types de champs personnalisés ont été créés avec le code de modèle objet côté serveur SharePoint en héritant de l’une des classes de type de champ intégrées et en créant un fichier de déploiement de type de champ (XML). Ces composants ont été déployés via des solutions SharePoint.

Dans un scénario de modèle de compléments SharePoint, les expériences personnalisées des utilisateurs finaux sont implémentées via le rendu côté client. Dans cette approche, les fichiers JavaScript sont utilisés pour implémenter des expériences personnalisées pour les utilisateurs finaux. Le modèle d’approvisionnement à distance déploie les fichiers JavaScript et les inscrit auprès des champs SharePoint via la propriété JSLink.

Du point de vue d’un utilisateur final, la fonctionnalité/le résultat est identique.

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.

Voici quelques exemples de type de champ personnalisé qui implémente une carte Google. Ceux-ci proviennent de l’exemple Branding.JSLink Office 365 PnP.

Miniature des images de carte Google affichées dans un affichage liste :

Deux vues cartographiques Google montrant le point d’emplacement du campus Microsoft et la zone d’emplacement.

Modification inline montrant une miniature de carte Google plus grande :

Deux cartes Google. Une vue montrant le point d’emplacement du campus Microsoft avec un lien vers Sélectionner l’emplacement, l’autre affichage montrant la zone d’emplacement du campus Microsoft avec un lien vers Modifier la forme.

Boîte de dialogue permettant la modification inline :

Carte Google montrant la forme Microsoft Campus. Texte sur l’image lu, Cliquez sur la carte pour placer des marqueurs et créer votre forme. Terminez en cliquant sur le premier marqueur. Vous pouvez faire glisser chacun des marqueurs ou cliquer dessus pour plus d’options. Vous pouvez utiliser le bouton Effacer la carte ci-dessus pour supprimer tous les marqueurs.

Conseils généraux

En règle générale, nous aimerions fournir les instructions générales suivantes pour l’implémentation du rendu côté client.

  • Utilisez des fichiers JavaScript et le rendu côté client pour implémenter des types de champs personnalisés.
  • Utilisez le modèle d’approvisionnement à distance pour déployer des fichiers JavaScript et les inscrire avec des champs SharePoint ou des composants WebPart Affichage de liste.
  • Inscrivez les fichiers JavaScript auprès du moteur MDS (Minimal Download Strategy) pour vous assurer que le moteur MDS est conscient des fichiers JavaScript de rendu personnalisés.
  • La définition de la propriété JSLink pour héberger le site web nécessite au moins une autorisation complète au niveau du web. Cette approche n’est donc pas adaptée aux compléments dans le magasin SharePoint

Vous disposez de deux options pour implémenter le rendu côté client avec des fichiers JavaScript via la propriété JSLink.

  • Définissez la propriété JSLink sur un composant WebPart Affichage de liste qui affiche une vue d’une liste SharePoint.
  • Définissez la propriété JSLink pour un champ SharePoint.
  • Définissez la propriété JSLink pour un type de contenu SharePoint.

Dans cette option, vous définissez la propriété JSLink sur un WebPartDefinition.

  • Cette approche ne crée pas spécifiquement un type de champ personnalisé au niveau de SPField.
    • Par conséquent, le rendu personnalisé s’applique uniquement dans le composant WebPart Affichage de liste où vous définissez la propriété JSLink.
  • Cette approche vous permet de modifier le rendu d’un ou plusieurs champs SharePoint à la fois.
  • Cette approche peut être effectuée avec du code déclaratif, avec le modèle objet sharePoint côté serveur, avec le modèle objet côté client SharePoint (CSOM) ou via PowerShell.
    • Nous vous recommandons d’utiliser le modèle objet sharePoint côté serveur, le modèle objet côté client SharePoint ou PowerShell pour définir la propriété JSLink via le modèle d’approvisionnement à distance.

Quand est-elle adaptée ?

Lorsque vous devez définir des affichages spécifiques pour les données de liste SharePoint et modifier le rendu de plusieurs champs SharePoint, il s’agit d’une bonne option.

Prise en main

L’exemple suivant définit la propriété JSLink sur un composant WebPart Affichage de liste SharePoint.

  • Branding.ClientSideRendering (exemple PnP O365)
    • Inclut 9 exemples qui définissent la propriété JSLink sur un composant WebPart Affichage de liste SharePoint et une explication de la façon dont chaque exemple a été implémenté.
    • La méthode RegisterJStoWebPart définit la propriété JSLink du composant WebPart Affichage de liste.

Dans cette option, vous définissez la propriété JSLink sur un SPField.

  • Cette approche inscrit spécifiquement la propriété JSLink au niveau de SPField.
    • Par conséquent, le rendu personnalisé s’applique partout où le SPField est rendu.
  • Cette approche vous permet de modifier le rendu d’un champ SharePoint.
  • Cette approche peut être effectuée avec du code déclaratif, avec le modèle objet sharePoint côté serveur, avec le modèle objet côté client SharePoint ou via PowerShell.
    • Nous vous recommandons d’utiliser le modèle objet sharePoint côté serveur, le modèle objet côté client SharePoint ou PowerShell pour définir la propriété JSLink via le modèle d’approvisionnement à distance.

Quand est-elle adaptée ?

Lorsque vous devez définir une vue spécifique pour un champ SharePoint donné et vous assurer que l’affichage est toujours utilisé lorsque le champ est affiché, il s’agit d’une bonne option.

Prise en main

Les articles suivants montrent comment définir la propriété JSLink sur un SPField.

Lorsque vous développez des composants de rendu côté client personnalisés, gardez à l’esprit les points suivants.

  • Tous les champs SharePoint ne peuvent pas être remplacés par la propriété JSLink.

    • TaxonomyField est un bon exemple.

  • JSLink prend en charge plusieurs jetons.

    • _Dispositions
    • _Site
    • _siteCollection
    • _siteCollectionLayouts
    • _siteLayouts

  • Vous pouvez inscrire les fichiers JavaScript JSLink auprès de l’infrastructure SharePoint Script On Demand (SOD) pour charger le fichier de manière différée.

    • Utilisez la balise (d) à la fin de l’URL JSLink pour inscrire le fichier auprès du SOD.

      ~sitecollection/Style Library/JSLink-Samples/DependentFields.js(d)

  • Vous pouvez charger plusieurs fichiers JavaScript via la propriété JSLink.

    • Cela est particulièrement utile si vous disposez d’une bibliothèque de fichiers JavaScript qui implémentent votre rendu côté client.

    • Envisagez d’utiliser cette approche lorsque vous ciblez des appareils mobiles, car elle vous permet de fournir uniquement le code JavaScript dont vous avez besoin pour implémenter le rendu côté client d’un champ SharePoint donné.

    • Utiliser le | pour séparer les fichiers JavaScript que vous souhaitez charger.

      ~sitecollection/Style Library/JSLink-Samples/MainLibrary.js|~sitecollection/Style Library/JSLink-Samples/SpecificField.js**(d)**

Exemples PnP

S’applique à

  • Office 365 multi-locataire (MT).
  • Office 365 dédiés (D) partiellement
  • SharePoint 2013 en local : partiellement

Les modèles pour les versions dédiées et en local sont identiques au complément SharePoint technique du modèle, mais il existe des différences sur les technologies qui peuvent être utilisées.