Le Post Infeeny

Les articles des consultants et experts Infeeny

La Content Search Web Part et les Display Template

Content Search Web Part

Présentation de la CSWP

SharePoint 2013 apporte son lot de nouveautés, l’une d’entre elles est l’ajout d’une Web Part nommé « Content Search », « Recherche de contenu » en français. Cette dernière permet d’interroger le moteur de recherche pour restituer une information. Cette Web Part est une version amélioré de la Content Query Web Part qui ne reste, pour beaucoup, qu’un vestige des versions précédentes de SharePoint. Il faut noter que cette webpart est disponible pour la version Enterprise sur on-premises. Quant aux éditions Office 365 et SharePoint Online, la CSWP est désormais disponible sur les plans Entreprise (E3, E4, A3, A4, G3 et G4) au même titre que la fonctionnalité de Cross-Site Publishing et la navigation par facettes.

Content Search Web Part

Content Search Web Part

Dans les propriétés de cette Web Part, il est possible de définir une requête à l’intérieur de laquelle l’index du moteur de recherche est interrogé. Ces requêtes, une fois exécutée, retournent des résultats suivant plusieurs paramètres, à savoir:

  • Une source de résultats (anciennement l’étendue ou Scope)
  • Des règles de requêtes
CSWP

Propriété Content Search Web Part

Query Builder

Une interface de conception appelée Query Builder est à notre disposition pour créer la requête en sélectionnant la source de résultat, l’ordre avec laquelle les informations doivent remonter, etc. …Il est également possible de passer l’interface en mode avancé.  A partir de là, nous pouvons récupérer certaines propriétés et autres mots clés afin de filtrer le résultat. Le filtre de propriété apporte une grande profondeur dans la formulation de nos requêtes, il est entre autre possible de récupérer directement les paramètres d’URL.

Liste filtre Query Builder

Liste filtre Query Builder

Dans cet exemple, nous utilisons le filtre URLToken sur notre propriété ProductCatalogGroupNumberOWSTEXT afin de récupérer le deuxième paramètre de notre URL.

SPTokenURL

SPTokenURL

Cette propriété nous permet, in fine, de n’afficher que les résultats correspondants au deuxième paramètre d’URL. Dans ce contexte il s’agit de n’afficher que les produits faisant partit du groupe « 2146″.

Query Builder

Query Builder

Les Display Template

Présentation des modèles

Une fois que la requête est définie, il faut mettre en forme les résultats. Je vous vois venir de loin avec vos modifications de fichiers XSLT … Ici, il n’en est pas questions, nous allons utiliser les composants natifs livrés avec notre SharePoint 2013 : les Display Template et Control Display Template.

Ces derniers sont disponibles dans la galerie de pages maitre et mise en pages. De nombreux autres Templates sont également de la partie: Filter Display Template, Group Display Template, HTML Master Page pour ne citer qu’eux, mais ces derniers ne font pas l’objet de ce poste, donc je ne m’arrêterais pas dessus.

Lors des premières manipulations de ces fichiers, vous remarquerez assez rapidement que lorsque vous ajoutez un nouveau Template, un fichier JavaScript y est associé. Un conseil, n’y touchez pas. Le fichier associé est en fait le résultat d’une conversion du fichier source html en JS.  Une propriété « Associated File » est présente pour le fichier HTML.

Fichier associé

Display Template, fichier associé

Gestion des modèles

Dans le cadre de ce poste, nous récupérons des modèles par défaut pour en faire de nouveaux « custom ». Pour le modèle de type Control, nous partons sur le Control_List.html et pour celui de l’Item, nous prendrons le Item_Default.html. Une fois la copie de ces fichiers effectuée, il faut renommer le contenu de la balise <Title> avec quelque chose de plus approprié. Une fois nos modèles téléchargés, nous pouvons les associer à notre Web Part en les sélectionnant dans notre catégorie Display Template.

Control et Item display template

Control et Item display template

L’image ci-dessous illustre le positionnement de nos Display et Control Template dans le cadre d’un tableau de résultats. Ici, l’objectif est d’avoir un tableau dans lequel nous pouvons récupérer les éléments issus de notre requête définies plus haut.

Schéma display template

Schema Display Template

Comme mentionné précédemment, je vous recommande fortement de vous appuyer sur les modèles standard, de renommer les Title et l’ID de notre div et de les utiliser tel quel au début. Ensuite, une fois que vous avez l’assurance qu’il s’agit bien de votre modèle qui est utilisé pour l’affichage, vous pourrez effectuer les modifications dans SharePoint Designer 2013, ou par le biais d’un éditeur de texte comme Notepad++.

Modification des modèles

Plusieurs balises propres à SharePoint sont disponibles dans ces modèles afin de faciliter la récupération et la transformation des éléments issus de la recherche.

  • _#= ctx.RenderGroups(ctx) =#_  et _#= ctx.RenderItems(ctx) =#_ sont des fonctions utilisés pour appeler nos Display Template
  • _#= ctx.CurrentItem.xxx =#_ est une fonction utilisée pour afficher le rendu de notre propriété (ex : Title, Path, etc …).

Les propriétés disponible sont définies au début du modèle, dans la section  <mso:ManagedPropertyMapping msdt:dt= »string »>. Il est possible de rajouter des propriétés gérées dans cette même section. Dans notre cas, nous souhaitons rajouter des propriétés gérés liées à catalogue de produits provenant d’un autre site :

Managed properties display template

Managed properties display template

Un peu plus bas dans notre modèle, nous pouvons ajouter nos CSS et JavaScripts dans la balise <script>

Par exemple:

Javascript display template

Javascript display template

Il suffit ensuite d’éditer le code HTML juste en dessous pour créer notre tableau.

Notre Display Control

<table class="artis-tasktable" id="_#= encodedID =#_">
    <thead>
        <tr>
            <th>Product Model</th>
            <th>Product Name</th>
            <th>Price (in $)</th>
            <th>Color</th>
            <th>Size</th>
            <th>Weight</th>
        </tr>
    </thead>
    <tbody>
         _#= ctx.RenderGroups(ctx) =#_
    </tbody>
</table>      </div>
</body>
</html>

Notre Display Item 

        <div id="_#= containerId =#_" data-displaytemplate="ItemLargePicture">
            <div id="_#= pictureContainerId =#_">
                <h1 id="_#= line1Id =#_"> _#= line1 =#_</h1>
                <a href="_#= linkURL =#_" title="_#= $htmlEncode(line1) =#_" id="_#= pictureLinkId =#_">
                    _#= pictureMarkup =#_
                </a>
            </div>
        <div id="itemdescription">
            <p class="currency">$ _#= Math.round(ctx.CurrentItem.CostOWSCURR * 100) / 100 =#_ </p>
            <ul class="desclist">
                <li><span class="desc">Description:</span> _#= ctx.CurrentItem.Description =#_ </li>
                <li><span class="desc">Color:</span> _#= ctx.CurrentItem.ColorOWSTEXT =#_ </li>
                <li><span class="desc">Weight:</span> _#= ctx.CurrentItem.WeightOWSTEXT =#_ </li>
                <li><span class="desc">Size:</span> _#= ctx.CurrentItem.SizeOWSTEXT =#_ </li>               
            </ul>
         </div>
        </div>
    </div>
</body>
</html>

Et voilà le résultat final. Et surtout, n’oubliez pas de publier vos modèles !

Display Template

Display Template

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :