Publié lundi 19 octobre 2009 00:08 par Arnault Nouvel

SharePoint 2007 : jQuery.SPItemsRotator pour afficher des éléments de listes avec animation

 

Avoir des sites “qui bougent” est une demande récurrente des utilisateurs qui s’occupent de la mise en place de sites SharePoint. Il est vrai qu’à l’heure du web 2.0, on s’attend à voir de belles animations dans nos navigateurs, même dans un intranet.

Si on souhaite avoir des éléments de liste qui apparaissent les uns après les autres avec un fondu, on peut procéder de différentes manières :

  • Avec une web part avec code serveur + javascript, ce qui implique le déploiement d’un package sur le serveur
  • Avec une DataView web part + javascript, ce qui n’est pas toujours simple à mettre en place, surtout pour un utilisateur final
  • Avec du javascript uniquement, avec accès aux données par web service. Ce n’est pas optimal d’un point de vue performances, mais permet une intégration rapide si la solution est générique et clé-en-main. 
  • Je passe volontairement sur l’option Silverlight qui est encore plus contraignante dans SharePoint 2007

Le plug-in jQuery.SPItemsRotator correspond à la 3ème option. Il s’intègre en quelques minutes et permet d’afficher les éléments d’une liste d’annonce standard ou d’une bibliothèque d’images standard, avec des fondus entre chaque élément ou image. Ceci ne requiert pas le déploiement de package sur la ferme, tout se fait avec SharePoint designer. Attention cependant, pour les sites publics internet il est vaut mieux choisir les options 1 ou 2 pour des raisons de performances et de sécurité.

jQuery.SPItemsRotator s’appuie sur jQuery et jQuery.SPServices, un plug-in jQuery qui propose une API pour les web services SharePoint. Il est très utile et bien pensé, je ne peux que vous encourager à y jeter un œil.

Après avoir référencé les 3 fichiers JavaScript dans la master page du site à l’aide de SharePoint Designer, on peut placer des jParts (le terme à la mode) pour obtenir quelque-chose comme ceci :

Les jParts sont en pratique des Content Editor Web Parts qui contiennent du code HTML et jQuery :

<!-- Web Part de gauche -->
<div id="divAnnouncements" style="height:150px;"></style>
<script>
   $(window).ready(function(){                                
           $("#divAnnouncements").rotateAnnouncements({
            webURL:"/sites/spitemsrotator", //url du site
            listName:"My Announcements" //nom de la liste
      });
   });
</script>
<!-- Web Part de droite -->
<div id="divPictures" style="height:200px;"></style>
<script>
   $(window).ready(function(){                                
         $("#divPictures").rotatePictures({
            webURL:"/sites/spitemsrotator",
            listName:"My Pictures",
            fadeDuration:1500, //durée du fading en millisecondes
            displayDuration:5000 //durée d'affichage de chaque élément en millisecondes
      });
   });
</script>

Voilà pour l’utilisation basique des méthodes rotatePictures et rotateAnnouncements.

Celles-ci définisse une requête CAML et un formatage précis puis appellent rotateItems, la méthode principale. Un développeur ou un utilisateur avancé peut aussi appeler cette méthode pour afficher et filtrer les éléments en spécifiant la requête CAML, et les formater comme il veut en décidant du pattern de rendu.

Pour exemple prenons le code de rotateAnnouncements, qui peut servir de source d’inspiration pour écrire d’autres rotateXXXXX() méthodes :

jQuery.fn.rotateAnnouncements = function(options){

    var opts = $.extend({
        displayDuration:10000,
        fadeDuration:1500,
        CAMLViewFields:"<ViewFields><FieldRef Name='Body' /></ViewFields>",
        CAMLQuery:"<Query><Where><Or><IsNull><FieldRef Name='Expires' /></IsNull><Geq><FieldRef Name='Expires' /><Value Type='DateTime'><Today /></Value></Geq></Or></Where></Query>",    
        itemHtml:"{ows_Body}"
    }, options);

    return this.rotateItems(opts);
    
}

Un dernier avantage, il est aussi facile de placer la zone de rotation dans une page que dans la master page : au lieu d’utiliser une Content Editor Web Part, on peut placer le HTML+script directement dans la master page avec SharePoint Designer.

Bonnes rotations :)

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

# re: SharePoint 2007 : jQuery.SPItemsRotator pour afficher des éléments de listes avec animation @ lundi 19 octobre 2009 00:23

Intéressant même si je suis toujours dubitatif sur la solution utilisée.

Comme toujours, cela devra se choisir en bonne prise en compte des impacts sur les environnements.

Fabrice

ROMELARD Fabrice


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01