none
Intégrer jQuery en SharePoint RRS feed

  • Discussion générale

  • 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…


    Pascal P
    http://sharepoint-afterwork.fr
    Nouveaux site en FR
    Twitter: @PascalPoeck
    • Fractionné Ciprian Duduiala vendredi 2 septembre 2011 08:59 meilleur article concours 01.07.2011 - 01.09.2011
    • Déplacé Hengzhe Li mardi 21 février 2012 06:50 merge forum (Origine :Développement Sharepoint 2010)
    dimanche 14 août 2011 13:55
    Modérateur

Toutes les réponses

  • Bonjour,

    J'essai d'intégrer jQuery... Pouvez-vous je vous prie m'aider ?

    j'ai référencé jQuery en plaçant le code ci-desous dans le head : 

    <SharePoint:ScriptLink language="javascript" name="/_layouts/javascript/jquery.SPServices-0.7.2.js" OnDemand="false" runat="server"/>

    <SharePoint:ScriptLink language="javascript" name="/_layouts/javascript/jquery.SPServices-0.7.2.min.js" OnDemand="false" runat="server"/>

    <SharePoint:ScriptLink language="javascript" name="/_layouts/javascript/jquery-1.8.3.js" OnDemand="false" runat="server"/>

    <SharePoint:ScriptLink language="javascript" name="/_layouts/javascript/jquery-ui-1.9.2.custom" OnDemand="false" runat="server"/>

    <SharePoint:ScriptLink language="javascript" name="/_layouts/javascript/jquery-ui-1.9.2.custom.min" OnDemand="false" runat="server"/>

    puis j'ai mis à la suite votre code

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

    mais rien ne se passe...

    Pour regarder quelle master page est utilisée par défaut ça fonctionne comment pour SharePoint Foundation 2010 ?

    Merci bcp pour votre aide

    • Modifié Tony-21 mardi 8 janvier 2013 12:46
    mardi 8 janvier 2013 12:45