Étape 11 : Télécharger et appliquer les modèles d'affichage pour le composant WebPart recherche de contenu dans SharePoint Server

S’APPLIQUE À :  yes-img-13 2013  yes-img-16 2016  yes-img-19 2019  yes-img-se Subscription Edition  no-img-sop SharePoint in Microsoft 365

Notes

De nombreuses fonctionnalités décrites dans cette série sont également disponibles pour la plupart des sites SharePoint dans Microsoft 365.

Aperçu rapide

Les étapes précédentes de cette série ont expliqué les procédures suivantes :

  • Comment configurer la requête pour un partie Web De recherche de contenu sur une page de catégorie ( Étape 9: Configurer la requête dans un élément Web Part de recherche de contenu sur une page de catégorie dans SharePoint Server )

  • Comment configurer une page d’élément de catalogue ( Étape10: Configurer la requête dans un élément Web Part de recherche de contenu sur une page d’élément de catalogue dans SharePoint Server ).

Même si les résultats de la requête affichés dans les composants WebPart étaient corrects, ils ne ressemblaient pas à des résultats Contoso et ils n'affichaient qu'un titre et une zone grise.

Voici les titres des sections de cet article :

Démarrer l’étape 11

À propos des modèles d’affichage

Les modèles d'affichage sont utilisés pour contrôler la façon dont le contenu doit être affiché dans un composant WebPart Recherche de contenu. Rappelez-vous que le contenu affiché dans un tel composant comporte des résultats de la recherche renvoyés en fonction de la requête définie dans le composant WebPart. Ainsi, lorsque vous personnalisez un modèle d'affichage, vous personnalisez en réalité la façon dont les résultats de la recherche doivent être affichés dans le composant WebPart.

Chaque modèle d'affichage se compose de deux fichiers :

  • Un fichier HTML modifiable dans un éditeur HTML de votre choix

  • Un fichier JavaScript

Comme avec les pages maîtres et les mises en page, vous pouvez modifier le modèle d'affichage dans votre éditeur HTML favori. Lors de la modification du modèle d'affichage, vous pouvez vous concentrer sur les formats HTML, CSS et JavaScript. SharePoint transforme automatiquement le fichier HTML en un fichier JavaScript associé lorsque vous le téléchargez. Dans la mesure où les deux fichiers sont associés, toute modification apportée au fichier HTML sera automatiquement mise à jour dans le fichier JavaScript associé.

Il existe deux types de modèles d'affichage :

  • Modèle d'affichage de contrôle: définit la mise en page générale pour l'affichage des résultats de la recherche. Par exemple, il peut s'agir de la façon dont vous choisissez d'afficher le format HTML d'un en-tête, le début et la fin d'une liste ou la façon de se déplacer dans une liste de résultats. Le modèle d'affichage de contrôle n'est affiché qu'une seule fois dans le composant WebPart.

  • Modèle d'affichage d'élément: définit le mode d'affichage de chaque élément dans les résultats de la recherche. Par exemple, il peut s'agir de la façon dont vous choisissez d'afficher une image et le titre d'un résultat de la recherche, lorsque le titre est affiché en tant que lien hypertexte sous l'image. Le modèle d'affichage de l'élément est affiché une fois pour chaque élément dans le résultat de la recherche. Ainsi, en pratique, si dix résultats de la recherche sont renvoyés, le modèle d'affichage d'élément crée sa section de format HTML dix fois.

L'image ci-dessous illustre l'utilisation du modèle d'affichage de contrôle et des modèles d'affichage d'élément sur le composant WebPart Recherche de contenu de la page de catégorie.

Modèles d'affichage de composant WebPart

Pour plus d'informations conceptuelles sur les modèles d'affichage, ainsi que sur la création de vos propres modèles d'affichage, voir Modèles d'affichage du gestionnaire de conception SharePoint 2013.

Procédure de téléchargement des modèles d’affichage

Pour notre site Contoso, nous disposons de quatre modèles d'affichage :

  • Un modèle d'affichage de contrôle pour notre page de catégorie

  • Un modèle d'affichage d'élément pour notre page de catégorie

  • Un modèle d'affichage de contrôle pour notre page d'élément de catalogue

  • Un modèle d'affichage d'élément pour notre page d'élément de catalogue

Étant donné que nous avons Procédure de mappage de votre lecteur réseau, le téléchargement de ces modèles d'affichage est très facile. Il suffit de glisser-déplacer les fichiers dans le dossier qui se trouve dans Galerie de pages maîtres --> Modèles d'affichage --> Composants WebPart de contenu. L'emplacement exact où vous glissez-déplacez les fichiers n'a pas d'importance à partir du moment où il se trouve dans la galerie de pages maîtres. Mais, puisque le dossier Composants WebPart de contenu se trouve là où se situent les autres modèles d'affichage pour les composants WebPart de contenu, nous allons l'ajouter à cet emplacement.

Glisser-déplacer 2

Dans SharePoint, accédez à Paramètres du site --> Pages maîtres et mises en page --> Modèles d'affichage --> Composants WebPart de contenu et vérifiez que vos quatre fichiers ont été ajoutés. Notez également qu'un fichier .js (JavaScript) a été automatiquement créé pour chaque modèle d'affichage.

Afficher les modèles - MPG

Nous sommes désormais prêts à appliquer ces modèles d'affichage à nos composants WebPart Recherche de contenu.

Procédure d’application des modèles d’affichage à un composant WebPart Recherche de contenu

Nous voulons tout d'abord appliquer des modèles d'affichage au composant WebPart Recherche de contenu sur notre page de catégorie. Accédons à la catégorie « Audio ».

  1. Sélectionnez le menu Paramètres'> page Modifier.

  2. Dans le partie Web Part, sélectionnez le menu du > modifier le site Web Part.

  3. Dans le volet des outils du composant WebPart, dans la section Modèles d'affichage du menu Contrôle, sélectionnez votre modèle d'affichage de contrôle pour l'appliquer. Dans notre scénario Contoso, il s'agit de Liste des produits électroniques Contoso avec pagination.

    Appliquer le modèle de contrôle

  4. Pour appliquer le modèle d'affichage d'élément, sélectionnez le modèle souhaité dans le menu Élément. Dans notre scénario, il s'agit de Galerie de produits électroniques Contoso.

    Appliquer le modèle d'élément

  5. Sélectionnez OK, puis enregistrez la page.

    Éléments Audio 3

Soudain, notre page « Audio » semble avoir bénéficié d'une session de relooking. À la place de la zone grise, une image colorée est affichée pour chaque élément, et nous avons également ajouté le prix et les informations liées à l'évaluation du produit qui étaient stockées dans les colonnes de site de notre catalogue. Par contre, seuls trois éléments sont affichés : nous allons devoir remédier à ce problème.

  1. Cliquez pour modifier à nouveau le composant WebPart. Dans la zone Nombre d'éléments à afficher, modifiez la valeur de 3 en 9.

    Nombre à afficher

  2. Sélectionnez OK, puis enregistrez la page.

    Audio 2

Notre page « Audio » a maintenant belle allure. À l'aide des flèches de navigation, vous pouvez aisément passer d'un élément à un autre dans la catégorie « Audio ».

Pagination audio

À présent que notre page de catégorie a l'allure d'une page Contoso, la prochaine tâche consiste à appliquer des modèles d'affichage au composant WebPart Recherche de contenu de notre page d'élément de catalogue.

  1. Accédez à la page d'élément de catalogue. Dans notre scénario, nous pouvons le faire en sélectionnant l’élément « Autoradio Northwind Traders 50W » dans la catégorie « Audio ».

  2. Répétez les étapes 1 à 7 dans Comment appliquer des modèlesd’affichage à un élément Web Part de recherche de contenu, mais sélectionnez les modèles d’affichage de contrôle et d’élément pour la page d’élément de catalogue.

Désormais, votre page de détails d'élément a également l'allure d'une page Contoso.

Élément Bleu

À l'aide du menu de sélection de couleur, il est facile de naviguer entre les éléments de couleur différente.

Élément Orange

Notre site Contoso commence vraiment à avoir une belle allure. Mais nous devons aussi nous assurer que nos visiteurs peuvent naviguer et trouver rapidement le produit qu'ils recherchent. La prochaine étape consiste à choisir les affinements à utiliser sur notre site.

Article suivant de cette série

Étape 12 : Envisagez d'utiliser des raffineurs pour la navigation à facettes dans SharePoint Server - partie I

Voir aussi

Autres ressources

Modèles d'affichage du gestionnaire de conception SharePoint 2013

Vue d'ensemble du gestionnaire de conception dans SharePoint 2013