Archives de mot-clé : recherche

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

 

 

Alternative à la WebPart Recherche de contenu (CSWP) lorsque celle-ci n’est pas disponible dans votre abonnement

Lorsque j’ai présenté ma session « Construisez votre intranet avec Microsoft Office 365 sans code », j’ai mis de l’avant la composante WebPart Recherche de contenu (CSWP) pour la majorité des composantes réalisées. On m’a alors posé la question suivante : « Que faire si mon client dispose uniquement d’un abonnement E1 et que cette composante de recherche n’est pas disponible? »

C’est une excellente question et effectivement la WebPart Recherche de contenu (CSWP) est uniquement disponible dans les abonnements Office 365 Enterprise E3, E4, E5, A3, A4, G3, G4. Cependant, on peut tout aussi bien utiliser la WebPart Résultats de la recherche qui est disponible dans tous les types d’abonnements O365 et sur SharePoint Server. Il suffit d’adapter légèrement les modèles d’affichage afin que ceux-ci fonctionnent.

Ce billet explique comment modifier un modèle d’affichage destiné au composant WebPart Recherche de contenu (CSWP) afin soit disponible dans le composant WebPart Résultats de la recherche.

Références

How to enable Content Search Web Part Display Templates for Search Result Web Part

Content Search Web Part vs Search Results Web Part

Search innovations for site and portal design in SharePoint Online

Exporter les résultats de recherche de votre site O365 en format CSV avec du CSOM

Introduction

Suite à un changement d’URL de dossier partagé, on m’a demandé de retrouver tous les éléments des listes contenant des références sur l’ancien dossier partagé.

Ex : \\serveurA -> \\serveurB

J’ai donc effectué une requête sur le service de recherche et celle-ci m’a retournée un grand nombre de résultats. De plus, il ne m’était pas possible d’exporter les résultats dans un format convivial.

J’ai donc réalisé une petite application console utilisant le CSOM afin d’exporter les résultats de recherche d’un site O365 en format CSV.

Créer une application console

La solution complète est disponible ici :
telecharger-bouton

Il s’agit d’une application console réalisée à titre d’exemple.

Afin de faire fonctionner l’application :

  • Modifier le URL dans le constructeur ClientContext pour insérer de votre Tenant : https://Tenant.sharepoint.com;
  • Modifier votre terme de recherche <YourSearchTerm> pour spécifier le terme recherché;
  • Modifier le mot de passe <YourPassword> de votre Tenant;
  • Modifier le chemin du fichier CSV <YourPath>;
  • Générez la solution comme normalement.

Description

Cet exemple montre comment utiliser le CSOM pour SharePoint Online. Pour commencer, nous devons d’abord ajouter des références aux assemblages appropriés :

  • Microsoft.SharePoint.Client.dll
  • Microsoft.SharePoint.Client.Runtime.dll
  • Microsoft.SharePoint.Client.Search.dll

 

Ajouter les références suivantes :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.IO; // to enable IO operations
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.Search;
using Microsoft.SharePoint.Client.Search.Query;
using System.Security;

 

Ajouter le code suivant dans la fonction main de votre application console afin de cibler votre site O365 :

using (ClientContext clientContext = new ClientContext(&quot;https://Tenant.sharepoint.com&quot;))
{ 

}

Cette section va exécuter la requête sur le service de recherche :

KeywordQuery keywordQuery = new KeywordQuery(clientContext); 

keywordQuery.QueryText = "<YourSearchTerm>"; 

SearchExecutor searchExecutor = new SearchExecutor(clientContext); 

ClientResult<ResultTableCollection> results = searchExecutor.ExecuteQuery(keywordQuery);

Cette section permet l’authentification sur votre Tenant O365 :

SecureString securePwd = new SecureString();
String strPassword = "<YourPassword>"; 

foreach (var c in strPassword.ToCharArray()) securePwd.AppendChar(c); 

SharePointOnlineCredentials credentials = new Microsoft.SharePoint.Client.SharePointOnlineCredentials("<User>@<Tenant>.onmicrosoft.com", securePwd);
clientContext.Credentials = credentials;

Cette section permet d’exporter les résultats dans un format CSV :

StringBuilder sb = new StringBuilder(); 

foreach (var resultRow in results.Value[0].ResultRows)
{
sb.AppendLine(string.Join(delimiter, resultRow["Title"], resultRow["Path"], resultRow["Write"]));
} 

System.IO.File.AppendAllText(filePath, sb.ToString());

 

Lancer l’application console et vérifier que le fichier CSV exporté contient les résultats de votre recherche.

Conclusion

On peut facilement obtenir les résultats de recherche et les exporter dans un format convivial en moins de 60 lignes de code. Si vous n’êtes pas chaud à l’idée d’utiliser du code C#, sachez que vous pouvez aussi réaliser un script PowerShell qui fera tout aussi bien le travail.

 

Utiliser jQuery UI autocomplete et l’API REST de SharePoint pour obtenir des résultats de recherche de personne

Introduction

Le complètement automatique, ou encore par anglicisme l’autocomplétion, est une fonctionnalité informatique permettant à l’utilisateur de limiter la quantité d’informations qu’il saisit, en se voyant proposer un complément qui pourrait convenir à la chaîne de caractères qu’il a commencé à taper. Dans SharePoint, ce type de fonctionnalité n’existe pas nativement pour obtenir des résultats de recherche de personnes et pourtant ça semble être très en demande par plusieurs clients qui veulent offrir une expérience utilisateur similaire à Google.

Prérequis

  • Avoir SharePoint 2013 sur site (On-Premise) ou SharePoint 2013 Online (O365)
  • Avoir configuré votre service de recherche ainsi que la recherche de personnes
  • Avoir une référence aux librairies tierces suivantes : jQuery, jQuery.UI et jQuery.Ui.Autocomplete

Librairies tierce

Il y a quelque années, j’avais réalisé une composante permettant d’utiliser l’autocomplétion en utilisant la composante RadAutoCompleteBox de Telerik. Cette composante payante avait requis relativement beaucoup d’effort afin d’être intégré dans SharePoint en plus de nécessiter le déploiement et l’hébergement d’un service Web spécifique pour fournir les résultats de recherche.

Maintenant, il existe plusieurs librairies tierces gratuites permettant d’effectuer le travail en s’intégrant dans SharePoint beaucoup plus facilement et en interrogeant l’API REST de recherche natif. Une des librairies populaires est le plugin Autocomplete de jQuery.

Intégrer le plugin AutoComplete

Je m’inspire du code provenant du billet de Murad qui nous offre un bon point de départ pour intégrer le plugin. Le code intègre les librairies tierces requises pour cette démonstration en plus de fournir un champ texte pour effectuer la recherche. Il suffit donc d’insérer le code suivant dans une WebPart de type Éditeur de Script :

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery.ui.autocomplete.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
//[...]
//Code retiré pour simplifier l'exemple
//[...]
<table>
<tbody>
	<tr>
		<td>REST Search</td>
		<td>
 		<div id="menu-container" style="width:600px">
			<input type="text" id="restSearch" size="50"/>
			</div>
		</td>
	</tr>
</tbody>
</table>

Construire une requête pour obtenir des résultats de recherche de personnes

Tout d’abord, il faut construire une requête sur l’API REST de recherche. Ce site est une excellente référence sur les divers points d’entrés ainsi que sur les paramètres disponibles pour construire notre requête.

Ex : https://<NomWebApplication>/_api/search/query?querytext=’lev*’&sourceid=’B09A7990-05EA-4AF9-81EF-EDFAB16C4E31’&clienttype=’Custom’

  • Le paramètre querytext représente le terme que l’on recherche
  • Le paramètre SourceId indique le GUID du résultat Source à utiliser pour l’exécution de la requête de recherche

Remarquez la propriété SourceId qui fait partie de la requête. On aurait pu utiliser le paramètre « ContentClass=urn:content-class:SPSPeople » à la place, mais SharePoint 2013 expose le SourceId des résultats. Le SourceId pour les résultats de personnes semble être le même pour toutes les installations soit « B09A7990-05EA-4AF9-81EF-EDFAB16C4E31 ». Alors je ne me sens pas coupable de hardcoder ce GUID.

On peut tester cette requête en l’exécutant directement dans le fureteur  qui nous affichera le résultat sous une forme XML :

rest_people_search_results_xml

Ajouter le code pour exécuter la requête et afficher les résultats de recherche de personnes

Afin de retourner des résultats de recherche de personne, il faut modifier le code initial afin de lancer un appel asynchrone lorsqu’un certain nombre de caractères seront saisie par l’utilisateur. La requête construite précédemment sera par la suite exécuté et finalement on affichera les résultats en dessous du champ texte recherche.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery.ui.autocomplete.css" />
 <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js">
 </script>

<script type="text/javascript">
 // Parse an item and create an title/value dictionary with all the properties available
 function getFields(results) {
 r = {};
 for(var i = 0; i<results.length; i++) {
 if(results[i] != undefined && results[i].Key != undefined) {
 r[results[i].Key] = results[i].Value;
 }
 }
 return r;
 }

 $(document).ready(function() {

 var autocomplete = $( "#restSearch" ).autocomplete({
 minLength: 3,
 source: function( request, response ) {
 $.ajax({
 beforeSend: function (request)
 {
 request.setRequestHeader("Accept", "application/json;odata=verbose;charset=utf-8");
 },
 url: "/_api/search/query?sourceid='B09A7990-05EA-4AF9-81EF-EDFAB16C4E31'&querytext='" + request.term + "*'",
 dataType: "json",
 success: function( data ) {
 response( $.map( data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function( item ) {
 return {
 fields: getFields(item.Cells.results)
 }
 }));
 },
 error: function( data ) {
 alert('search error');
 }
 });
 },
 // Run this when the item is in focused (not selected)
 focus: function( event, ui ) {
 //$( "#restSearch" ).val(ui.item.value );
 return false;
 },
 // Run this when the item is selected
 select: function( event, ui ) {
 location.href = ui.item.fields.Path;
 },
 appendTo: $('#menu-container')
 }).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
 return $("<li>").append('<a>' + item.fields.PreferredName + '</a>' )
 .appendTo( ul );
 };
 });
</script>

<table>
 <tbody>
 <tr>
 <td>REST Search:</td>
 <td>
 <div id="menu-container" style="width:600px">
 <input type="text" id="restSearch" size="50"/>
 </div>
 </td>
 </tr>
 </tbody>
 </table>

Résultat :

rest_people_search_results

Dans de grandes entreprises on peut retrouver plusieurs personnes ayant le même nom  et prénom. Pour éviter la confusion, il est facile d’ajouter la photo, le titre ou la direction de la personne.

Pour s’y faire, simplement modifier la ligne suivante :

return $("<li>").append('<a><img style="margin-right:3px;top:3px;" src="/_layouts/15/images/'+ img +'">' + item.fields.Title + '</a>' ) .appendTo( ul );

Par ceci :

var hasPicture = item.fields.PictureURL;
var currentItem;
 if(hasPicture){
 currentItem = '<a><img src="' + item.fields.PictureURL + '"/>' + item.fields.PreferredName + ' - ' + item.fields.JobTitle + '</a>'
 }
 else{
 currentItem = '<a><img src="/_layouts/images/o14_person_placeholder_96.png"/>' + item.fields.PreferredName + ' - ' + item.fields.JobTitle + '</a>'
 }
return $("<li>").append(currentItem).appendTo( ul );

Résultat :

rest_people_search_results_with_img

Conclusion

On peut réaliser une fonctionnalité d’autocomplétion des résultats de recherches de personnes très rapidement en intégrant le plugin gratuit jQuery Autocomplete et en utilisant les API REST de recherche natif. Cette solution fonctionne pour les environnements SharePoint 2013 sur site (On-Premise) ainsi que dans SharePoint 2013 Online (O365). Le code ne nécessite pas de déploiement de solution et il pourrait facilement être amélioré pour ajouter toute autres propriétés que vous jugeriez pertinente (Ex : Département, intérêts, etc…).

Cliquez ici pour télécharger le code source

Citation

Murad Sæter. (2013, 20 février). Using jQuery UI autocomplete with the REST API to get search results in the search box [Billet de blogue]. Repéré à http://blogs.msdn.com/b/murads/archive/2013/02/20/using-jquery-ui-autocomplete-with-the-rest-api-to-get-search-results-in-the-search-box.aspx