Mise en forme de l’interface sous Sharepoint 2013

Plusieurs éléments nous permettent de personnaliser l’affichage des résultats d’une requête sous Sharepoint 2013 : Les “results types” et les “display templates”. Ils vont nous permettre d’améliorer l’expérience de l’utilisateur.

Les templates d’affichage sont des gabarits utilisés par les WebParts de recherche (webparts utilisant la recherche SharePoint) afin d’afficher les résultats d’une requête effectuée sur l’index. Ils contrôlent quelles propriétés gérées sont affichées dans les résultats de la recherche et comment ils apparaissent dans la webpart. Nous pouvons de cette façon enrichir la page de résultat de SharePoint pour afficher les informations nous semblant importantes. De plus, ils peuvent être utilisés par exemple pour créer différents modes d’affichages pour une même webpart, comme un affichage sous forme de liste et un affichage sous forme d’icônes.

Un “result type” consiste en un ensemble de règles qui définit quels items du résultat de recherche correspond à ce type de résultat. On peut par exemple récupérer les items par rapport à leur type et par rapport à la valeur d’une ou de plusieurs de leurs propriétés (custom ou non). Ces “result types” peuvent ensuite être associés à un display template personnalisé.

En combinant ces deux outils, on parvient à créer, par exemple, une page de résultat qui renverra, selon le type d’objets retournés, des blocs différents, tant au niveau visuel qu’au niveau des propriétés affichées.

  • Mise en page par défaut

sharepoint 2013 fig11

  • Mise en page après modification du Result Type ET du display template associé.sharepoint 2013 fig12

Pour arriver à ce résultat:

On crée un content type que l’on associera à une liste. Ce content type contient plusieurs colonnes de sites qui sont indexées. On a donc les crawled properties et managed properties associées à ces colonnes. (Voir notre article précédent)

Il faut déjà savoir quel type de contenu sera affecté par notre couple Result Type/Display Template.

Dans notre cas, on choisira les SharePoint List Item. Dans les paramètres de notre site, section Search, on crée un nouveau Result Type en copiant le Result Type utilisé par défaut.

sharepoint 2013 fig13

On rajoute un nom qui convient et modifie le type de contenu cible : en l’occurrence “SharePoint list item”. On viendra par la suite compléter les autres propriétés.

sharepoint 2013 fig14

Pour continuer, on va créer un nouveau Display template à associer à notre Result type.

Pour cela il suffit de se rendre dans la galerie des master pages (eh oui, pas très logique…!) puis dans le dossier Display Template, Search on accède à tous les Display templates natifs de SharePoint 2013. Selon le résultat voulu on choisira le fichier qui en sera le plus proche.

Pour notre exemple on  prend le fichier “item_Default.html”, que l’on télécharge avant de modifier. Il ne faut absolument pas toucher au fichier javascript associé à notre fichier html. Celui-ci est généré automatiquement par SharePoint.

Dans les balises “head” on retrouvera le nom du display template, ainsi que les managed property qui pourront être manipulées dans les balises “body”.

Ci-dessous le fichier fourni par défaut :

sharepoint 2013 fig15

sharepoint 2013 fig16

On y change le nom, on rajoute la managed property et on modifie le rendu :

sharepoint 2013 fig17

sharepoint 2013 fig18

Ce fichier est complètement libre au niveau design, on peut y intégrer la charte graphique de l’entreprise par exemple. On upload notre fichier dans la galerie des display templates, et on remarque le fichier JavaScript généré à la volée. On retourne dans notre Result Type et on y associe le bon display template dans la section “Actions”.

sharepoint 2013 fig19

On enregistre le Result Type, on revient à notre page de recherche et on observe le résultat avec notre propriété qui s’affiche avec sa valeur.

sharepoint 2013 fig12