Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Recherche

9 novembre 2011 3 09 /11 /novembre /2011 18:24

Bonjour,

Comme premier article sur ce forum, je vous propose ma méthode d'intégration de jQuery à SharePoint... En espérant que cela vous soit utile.

Que ce soit pour améliorer l’expérience utilisateur sur un site Internet ou apporter une petite touche sympa sur votre Intranet, l’utilisation de jQuery est presque devenu incontournable. Pour rappel, jQuery est une librairie javascript libre de droits qui porte sur l’interaction entre le javascript et l’html. En gros, si vous voulez en mettre plein la vue mais que vous n’avez pas forcément envie de passer des heures à faire du développement spécifique, jQuery est fait pur vous ;-)

Mais avant de mettre en avant les possibilités démentielles de jQuery, la première chose à faire est de l’installer. A travers cet article nous allons passer en revue les 4 étapes essentielles à son installation et je vous expliquerai la méthode que j’ai choisie et surtout pourquoi je l’ai choisie…

 

1) Télécharger la dernière version de jQuery

Rien de bien particulier pour cette première étape vu qu’il s’agit simplement de télécharger la dernière version de jQuery disponible sur le site officiel à l’adresse : http://docs.jquery.com/Downloading_jQuery

 

2) Ajouter jQuery dans SharePoint

En parcourant le lien précédent, vous aurez compris qu’il existe différentes méthodes pour mettre à disposition cette librairie dans votre environnement SharePoint (Office365 y compris). La première méthode consiste simplement à télécharger votre fichier dans une bibliothèque de document. Rien de bien compliqué à cela mais cela implique que votre librairie sera stockée dans votre base de données de contenu et cela ne fait pas partie des « Best Practice » que l’on retrouve sur le net.

La seconde méthode, celle préférée des développeurs, est de stocké votre librairie dans un répertoire « racine » de votre site. De cette manière celui-ci ne sera plus stocké dans la base de données de contenu mais bien sur le serveur lui même. Le seul inconvénient à cette méthode est qu’il vous faudra les droits suffisant ainsi que les accès adéquats que pour procéder à cette installation.

La troisième méthode consiste à utiliser ce que l’on appelle un CDN (Content Delivery Network). En gros, cela consiste à utiliser une librairie qui est stockée sur un serveur configuré à cet effet. Il en existe 3 principaux, à savoir celui de Microsoft, celui de Google et celui de jQuery lui-même. Dans ce cas de figure, pas besoin de télécharger le fichier vu qu’on utilisera celui mis à disposition sur le serveur distant mais l’inconvénient principal est que vous aurez forcément besoin d’une connexion au net pour que cela fonctionne. (pas toujours le cas en Intranet)

3) Référencer votre librairie dans votre page maitre (Master Page)

Maintenant que nous connaissons les différentes méthodes pour ajouter jQuery à SharePoint, il nous reste à se décider sur laquelle nous allons utiliser et ensuite à la référencer dans notre page maitre. Si vous êtes dans un scénario Intranet et sans connexion au net la réponse est assez simple, ce sera la méthode 1 ou 2 en fonction des droits dont vous disposez. Par contre si vous disposez d’une connexion au net (forcément le cas avec Office365) vous aurez tendance à privilégié l’utilisation d’un CDN. En ce qui me concerne, je préconise de combiner ces méthodes afin de s’assurer de la disponibilité de notre librairie. En effet, même si les serveurs de Google, Microsoft ou jQuery sont parmi les serveurs les plus disponible au monde, un « accident » peut arriver avec pour effet immédiat le plantage de toutes nos customisation basée sur jQuery. (source : http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/)

Pour cela nous allons faire appel à SharePoint Designer pour éditer notre page maitre et rajouter la référence au CDN de Microsoft entre les balises <head></head>.

<script type= »text/javascript » src= »http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js »></script>

Juste en dessous de cette ligne nous allons ajouter un petit script qui permettra à notre site d’utiliser notre librairie stockée sur notre serveur si notre CDN n’est pas disponible.

<script type= »text/javascript »>if (typeof jQuery == ‘undefined’) { document.write(unescape(« %3Cscript src=’/Style Library/JQuery/jquery-1.6.2.min.js’ type=’text/javascript’%3E%3C/script%3E »));}</script>

Dans cet exemple-ci vous aurez remarqué que j’ai stocké ma librairie dans le répertoire « Style Library -> JQuery ».

 

4) Utilisez jQuery

La première chose que nous allons faire c’est bien évidement de vérifier si notre appel à jQuery fonctionne bien. Pour cela, ajouter ce script à votre page maitre.

<script type= »text/javascript »>
if (jQuery) {
alert(‘jQuery is loaded!’);
}
</script>

Une fois celle-ci enregistrée, naviguez sur votre site. Vous devriez obtenir une boite de dialogue avec le message « jQuery is loaded! » sur chacune de vos pages.

Maintenant que votre page maitre est modifiée et que jQuery est disponible, vous allez pouvoir donner libre cours à votre imagination pour améliorer l’expérience utilisateur. Si vous n’êtes pas développeur javascript (comme moi) vous serez surpris du nombre de tutoriaux que vous trouverez sur le net. Comme point de départ, je vous suggère d’aller visiter la page de SPServices sur Codeplex à l’adresse : http://spservices.codeplex.com/ Que du bonheur… ;-)

 

Bon amusement…

 

(source : http://social.msdn.microsoft.com/Forums/fr-FR/sharepoint2010devfr/thread/ee7fd1e2-1e0a-445a-8274-0bf63996fef6)

Partager cet article

Repost 0

commentaires

Benoît 02/06/2016 11:01

Excellent billet. J’ai déjà JQuery et j’ai réussi à le manipuler grâce aux tutoriels en vidéo sur http://www.alphorm.com/tutoriel/formation-en-ligne-jquery et je trouve votre article très captivant. Je vais essayer d’assimiler ces conseils pour l’intégrer en Sharepoint. Merci pour ce partage.

Articles Récents

Liens