Type de champ personnalisé dans le modèle de SharePoint de recherche

Résumé

L’approche que vous prenez pour fournir des expériences personnalisées aux utilisateurs finals est différente dans le nouveau modèle de SharePoint par rapport au code de confiance totale. Dans un scénario de code de confiance totale /solution de batterie classique, des types de champs personnalisés ont été créés avec le code du 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 SharePoint solutions.

Dans un SharePoint de modèles de modules, 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 utilisateur personnalisées. Le modèle d’approvisionnement à distance déploie les fichiers JavaScript et les inscrit SharePoint champs via la propriété JSLink.

Du point de vue de l’utilisateur final, la fonctionnalité/le résultat se ressemblent.

Important

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. Ils proviennent de l’exemple PnP Branding.JSLink Office 365.

Miniatures google map images affichées dans un affichage de liste :

Deux vues de carte Google affichant le point d’emplacement Microsoft Campus et la zone d’emplacement.

Modification inline montrant une miniature de carte Google plus grande :

Deux google maps. Une vue montrant le point d’emplacement Microsoft Campus avec un lien vers Sélectionner un emplacement, l’autre affichage montrant l’emplacement de Microsoft Campus avec un lien vers Modifier la forme.

Boîte de dialogue activant la modification en ligne :

Google Map montrant la forme De Campus Microsoft. Le texte de l’image est lu, cliquez sur la carte pour placer des marques et créer votre forme. Terminez l’étape en cliquant sur le premier marqueur. Vous pouvez faire glisser chacune des marques ou cliquer dessus pour obtenir d’autres options. Vous pouvez utiliser le bouton Effacer la carte ci-dessus pour supprimer toutes les marques.

Conseils généraux

En règle générale, nous voulons fournir les instructions générales suivantes pour implémenter le rendu côté client.

  • Utilisez les 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 Web Parts d’affichage de liste.
  • Enregistrez les fichiers JavaScript avec le moteur de stratégie de téléchargement minimal (MDS) pour vous assurer que le moteur MDS est informé des fichiers JavaScript de rendu personnalisés.
  • La définition de la propriété JSLink sur le site web hôte nécessite au moins une autorisation totale au niveau du site web. Cette approche n’est donc pas appropriée pour les SharePoint store

Vous avez plusieurs 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 partie Web De l’affichage liste qui affiche un affichage d’une SharePoint liste.
  • Définissez la propriété JSLink d’SharePoint champ.
  • Définissez la propriété JSLink pour un type SharePoint contenu.

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

  • Cette approche ne crée pas spécifiquement un type de champ personnalisé au niveau SPField.
    • Par conséquent, le rendu personnalisé s’applique uniquement dans le volet Web Affichage de liste où vous définissez la propriété JSLink.
  • Cette approche vous permet de modifier le rendu pour un ou plusieurs champs SharePoint en même temps.
  • Cette approche peut être effectuée avec du code déclaratif, avec le modèle objet côté serveur SharePoint, avec le modèle objet côté client SharePoint (CSOM) ou via PowerShell.
    • Nous vous recommandons d’utiliser le modèle objet côté serveur SharePoint, 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 SharePoint de liste 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 SharePoint d’affichage de liste.

  • Branding.ClientSideRendering (exemple PnP O365)
    • Comprend 9 exemples qui définissent la propriété JSLink sur un SharePoint d’affichage de liste 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 partie WebPart d’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 SPField.
    • Par conséquent, le rendu personnalisé s’applique partout où spField est rendu.
  • Cette approche vous permet de modifier le rendu d’SharePoint champ.
  • Cette approche peut être effectuée avec du code déclaratif, avec le modèle objet côté serveur SharePoint, avec le modèle objet côté client SharePoint ou via PowerShell.
    • Nous vous recommandons d’utiliser le modèle objet côté serveur SharePoint, 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 un affichage spécifique pour un champ SharePoint donné et vous assurer que l’affichage est toujours utilisé lorsque le champ est rendu, 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.

  • La propriété JSLink SharePoint pas toutes les autres champs.

    • TaxonomyField est un bon exemple.
  • JSLink prend en charge plusieurs jetons.

    • _layouts
    • _site
    • _siteCollection
    • _siteCollectionLayouts
    • _siteLayouts
  • Vous pouvez inscrire les fichiers JavaScript JSLink avec l’infrastructure SharePoint Script à la demande (SOD) pour charger le fichier différé.

    • Utilisez la balise (d) à la fin de l’URL JSLink pour inscrire le fichier avec le 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 avez 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 JavaScript dont vous avez besoin pour implémenter le rendu côté client d’un champ SharePoint donné.

    • Utilisez la | 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.