Le Post Infeeny

Les articles des consultants et experts Infeeny

#SPC2012 : Using jQuery and DisplayTemplates to create modern Web Sites

Wednesday, 13h45, Ethan Gur-esh, lead program manager – Jeremy Kelley, program manager

Résumé

Les Display Templates représentent un nouveau moyen de formater les données d’une Content Search WebPart également nouveauté de SharePoint 2013.

Il montre que grâce à du HTML, du code javascript, jQuery et un peu de CSS, il est possible de mettre en forme une webpart et créer des templates pour former un carrousel.

Les DisplayTemplates est l’équivalent de l’XSLT ancienne pour les Content Query WebPart. Ils sont plus lisibles et compréhensibles. Ils permettent également plus facilement d’enregistrer des CSS et des Javascript comme jQuery.

Enfin, les méthodes utilisées ne sont pas cantonnées à des méthodes XSLT mais bien à des méthodes plus avancées comme celle permettant de récupérer les renditions d’une image.

Ces display templates peuvent également être utilisés pour customiser les panneaux de raffinement.

La session est archi comble et la salle est plutôt grande pourtant. En comptant on doit être autour des 600 personnes.

Il fait un rappel sur la keynote où un site internet avait été montré.

Le programme est les DisplayTemplates, nouvelle manière de gérer les résultats de recherche (CSS/jQuery + Display Templates). Ajouter les raffinements pour avoir une expérience search drivent (conduite par la recherche).

// Rappel sur 2013

Gur-esh fait un rappel sur le design sur SharePoint 2013. Il y a une maternage, html css, controls et la snippet gallery (navigation, webparts, controls).

Il reprend le design qu’il a fait pour la keynote de lundi présentant un site qui va permettre de servir de site e-commerce de produits électroniques.

Il montre un panneau de raffinement permettant de filtrer ses appareils photo.

// Kelley présente la logique des DisplayTemplates

Nous allons clairement présenter la Content Search Webpart.

Son principe est de faire une requête de recerche sur le moteur, et d’exécuter les templates (Triggers templates)  avec les résultats qui seront retournés par les moteurs.

Les Control Templates commencent et vont déterminer comme les éléments sont affichés par page (la navigation par ex), ils sont exécutés à chaque page Item Template, vont déterminer comment chaque élément est affiché Control Template finit le rendering

// DEMO : Content search web part

Il va utiliser une page html (control_jshowoff.html). Il l’ouvre avec DreamWeaver.

Il va aller dans le body, où il y a un bloc de javascript. Il appelle $includeLanguageScript en passant l’URL et la référence à un fichier CustomStrings.js stocké dans les masterpages/DisplayTemplates/ Il inclut aussi un fichier custom jquery.jshowoff.min.js et un Contron_jshowoff_script.js.

Il explique que SharePoint va prendre ce html et va le « compiler ».

Dans son Controls_jshowoff il utilise un simple jshowoff(); Il a dans son HTML, une div très importante <div id= »Control_List » /> qui contient tout la customisation de notre template. Il insère du code javascript en précédant son code par <!–#.

Il insère à un moment donné, $addRenderContextCallback qui est une méthode qui va s’exécuter après que tout le HTML soit affiché.

Pour tous les éléments il va utiliser un <ul> dans lequel il un ctx.RenderGroups(ctx) qui semble accomplir l’action de générer le HTML pour chaque élément.

En uploadant le tout, il peut l’utiliser dans la content search WebPart (qui utilise le <title> pour être identifié).

// Retour sur les slides : Hello (Cool) World

Il explique qu’il a mis jQuery sur la masterpage car il va l’utiliser à de nombreuses reprises.

Il explique que tout le code va être effectué dans la première div.

Enfin il utilise $includeScript pour faire référence à un fichier js.

Pour utiliser les display templates, il utilise la déclaration d’un <mso:ManagedPRopertyMapping>.

// DEMO : Item template

Il présente les « Staff recommandations » qu’il a sur son carrousel de produits.

Il configure sa content search web part en mettant un item template « Large picture ». ça lui fait un affiche différent pour chaque élément.

Il a des images très grosses. Il va créer un item template qui est adapté. Il va ajouter un css en utilisant $includeCSS dans son template.

Il utilise dans son code un formatage spécial comme les Databinder.eval. Ce sont « _#= linkURL =#_ » pour afficher l’URL d’un lien.

Pour les images, il utilise le Srch.ContentBySearch.getPictureMarkup où il passe l’URL de l’image, la taille et il explique que l’image affichée ne sera pas une grande image qui sera mise à l’échelle mais bien une image de 135 par 135 grâce aux images redditions.

Il revient sur les Mapping de Managed Property –> Il explique qu’il faut un peu connaître la topologie de ses propriétés de recherche.

Il insère dans son template var price = $getItemValue(cté, « Price ») où « Price » est son mapping de managed property (son alias), et getItemValue va donc récupérer la valeur.

Il dit de faire attention au fait que chaque élément devrait avoir un id bien à lui afin d’être géré individuellement via du code jQuery.

// Retour sur les slides : combiner ControlTemplate et ItemTemplate

On peut les combiner très facilement car ce sont deux éléments bien séparés et à définir individuellement et indépendamment de l’autre dans une WP Content Search.

Néanmoins ils souligne le fait qu’on va en général appareiller les deux pour avoir un design logiquement identique et cohérent.

// Preview Pane

Utiliation de OnPostRender pour ajouter des éléments qui n’ont pas de rapport avec les données récupérées de la recherche.

// Search Data Provider

L’idée est quand on a plusieurs WebParts utilisant la recherche, on va utiliser une source de données commune.

On peut passer ctx.ListData à des plugins jQuery par exemple via JSON par exemple.

// DEMO : Infinite scrolling

Il nous présente la volonté de faire un composant permettant de retourner les résultats avec un scroll infini plutôt qu’un paging (comme sur Bing Images).

Il a une Content Search WP, qu’il paramètre, en définissant un ControlTemplate Infinite scolling.

Il retourne sur Dreamweaver. Il inclue InfiniteScrollingHelper.js qui est un script.js.

Il a ajouté un callback sur le onPostRender. Il retourne dans son js, et ajoute du code dans son callback qui va dupliquer un bout d’HTML.

Il utilise jQuery et scroll() pour détecter la fin du scroll . Il ajoute enfin le morceau de code qui permet lorsqu’on est en fin de page, de savoir sur quelle page nous sommes. Si nous avons une page encore derrière, il va utiliser ctx.ClientControl.page(index de la page). Cette méthode permet de récupérer les éléments de la page suivante.

Test : ça marche.

Il explique que le fait de récupérer la page suivante, le OnPostPreRender s’exécute.

// Retour sur les slides : Refiners

Ils fonctionnent avec le context de recherche et donc si nous avons un template custom, il n’y aura pas à se soucier des refiners qui marcheront de la même manière et seront automatiquement fait correctement.

Pour ajouter une propriété, il faut l’ajouter en administration dans le service de recherche.

// DEMO : Refinement custom display templates

Il explique que sur la webpart de refinement, on peut sélectionner le refiler.

Il peut également choisir le display template de la même manière que le search WP.

Il a sélectionné un display template custom, et sont refiners est en fait un refiner avec des carrés de couleurs pour filtrer ses résultats par couleur.

Il va poster comment il a fait cela sur le blog après la SharePoint Conference.

Christian

Une réponse à “#SPC2012 : Using jQuery and DisplayTemplates to create modern Web Sites

  1. Cédric 28 janvier 2013 à 16 04 31 01311

    Comment regarder la vidéo pour avoir plus de détails ??
    Merci

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 :