Archives de mot-clé : RefinableString

Afficher des tuiles comme résultats de recherche à l’aide d’un modèle d’affichage

J’ai récemment présenté une session intitulé « Construisez votre intranet avec Microsoft Office 365 sans code » dans laquelle j’ai expliqué comment faire une composante « Qui s’en occupe? ». Cette composante permet d’afficher le ou les répondants pour une activité précise dans l’organisation en utilisant une liste personnalisé, la recherche et un modèle d’affichage.

Cet article va donc détailler les différentes étapes pour construire votre propre composante avec des modèles de recherche dans Office 365 :

QuiSenOccupe1.PNG

Cas d’utilisation

L’utilisateur recherche un sujet selon la première lettre et ensuite il clique sur la tuile afin d’afficher le ou les répondants.

QuiSenOccupe2

QuiSenOccupe4

Comment réaliser cette composante ?

La première étape consiste à créer une liste personnalisé afin d’entreposer les différents sujets :

QuiSenOccupe5

Ensuite, dans les configuration du service de recherche, il suffit de lier la crawled property « ows_LinkTitle » avec une propriété géré « RefinableString » de votre choix. Puisqu’on ne peut pas créé de nouvelles propriétés dans le service de recherche d’O365, Microsoft en a créé suffisamment pour qu’on puisse les réutiliser. Par la suite, ajouter alias sur cette propriété afin de l’identifier et de l’utiliser plus tard dans la zone de recherche.

QuiSenOccupe3

Puis, dans la page de composants web part dans lequel on veut ajouter la composante « Qui s’en occupe? », on ajoute 2 web parts de type Éditeur de contenu.

Pour permettre l’affichage des filtres par lettres, la première aura un lien vers un fichier contenant ceci :

La deuxième web part aura un lien vers un fichier contenant ceci :

Comme vous avez pu le remarquer il y a une référence à un fichier CSS qu’il faut déposer dans Style Library et ensuite ajuster le chemin.

Ensuite, il faut ajouter deux web parts « Zone de recherche » et « Résultats de la recherche » et configurer la dernière avec cette requête (Ajuster au besoin selon le URL de votre site) :

QuiSenOccupe6

Finalement, il reste à télécharger le modèle d’affichage de tuiles dans la galerie des pages maîtres et à configurer le modèle dans la web part :

QuiSenOccupe7

URL : /sites/intranet/_catalogs/masterpage/Forms/AllItems.aspx –> Display Templates –> Search

Conclusion

Il est possible qu’il y ai un certain délais (jusqu’à 24h) avant que les modifications aux propriétés gérés soient prisent en compte dans O365. Malgré cela, il est possible d’arriver à un résultat visuellement intéressant et performant sans avoir à développer plusieurs jours dans Visual Studio.

Références

Modèle d’affichage de tuiles

Barre de filtre avec les lettres

 

 

Advertisements