Tutoriel d’initiation de base sur JQuery dans SharePoint

Ce tutoriel se limite à une introduction élémentaire à jQuery dans SharePoint. L’objectif est de comprendre comment utiliser jQuery concrètement dans SharePoint, sans être obligé de connaître le JavaScript.

Même si la portée de ce tutoriel est limitée, il est évident qu’il est souvent nécessaire d’introduire quelques lignes de JavaScript dans SharePoint, sans être obligé de faire un développement d’une feature ou d’une solution avec Visual Studio.

Pour nous simplifier le travail, nous utilisons jQuery. Grâce à de nouvelles fonctions JavaScript, cette bibliothèque simplifie l’écriture des programmes.

Télécharger la bibliothèque jQuery

Commencez par télécharger la dernière version Uncompressed de jQuery. Au moment où ces lignes sont écrites, il s’agit de la version 1.9.0 de jQuery.

Stockez le fichier sur votre ordinateur et renommez le jquery.js. Dans les environnements complexes, il peut être intéressant d’identifier chaque version de jQuery. Dans notre cas, il est plus simple d’avoir une seule référence.

Pour pouvoir utiliser le fichier jquery.js, il est nécessaire de le téléverser (« uploader ») dans une bibliothèque quelconque de votre site (ou collection de sites). Toutefois, il est nécessaire que les utilisateurs possèdent des droits de lecture sur cette bibliothèque.

Il est conseillé de créer une bibliothèque dédiée. Pour cela, positionnez-vous sur votre site puis cliquez sur Actions du site > Nouvelle bibliothèque de documents.

Nommez la bibliothèque Scripts. Bien évidemment, vous pouvez la nommer comme vous le souhaitez.

Sous Navigation, dans Afficher le composant bibliothèque de documents dans le volet Lancement rapide, cochez Non.

Sous Document-Historique des versions, dans Créer une version à chaque modification d’un fichier dans le type de liste bibliothèque des documents, cochez Oui.

Sous Modèle de document, sélectionnez Aucun puis cliquez sur le bouton Créer.

Cliquez sur le bouton Ajouter un document, cliquez sur Parcourir et « uploader » jquery.js dans la bibliothèque.
JQuery dans bibliotheque

Vérifier le bon fonctionnement de la bibliothèque jQuery

Avant toute chose, il est important de vérifier que la bibliothèque jQuery est valide et fonctionne bien dans votre environnement.

Avec le Bloc-notes (notepad.exe), créez un petit fichier VerifierJQuery.js avec le texte suivant:
<script type= »text/javascript » src= »/Scripts/jquery.js »></script>
<script type= »text/javascript »>
$(document).ready(function() {
alert(« jQuery fonctionne parfaitement bien ! »);
});
</script>
La première ligne sert à référencer l’appel à jQuery. Vous devez donc modifier votre fichier pour que la première instruction src pointe bien vers l’emplacement du fichier jquery.js hébergé dans la bibliothèque Scripts.

Pour le faire, le plus simple est d’ouvrir la bibliothèque Scripts, de faire un clic-droit sur le fichier jquery puis Copier le raccourci. Ensuite, vous collez le chemin derrière l’instruction src= de la première ligne du fichier VerifierJQuery.js, à la place de /Scripts/jquery.js.

La seconde ligne indique l’ouverture de votre script. Elle se termine avec la dernière ligne.//

Pour exécuter du code dès que le document est prêt à être manipulé, jQuery dispose de l’instruction événement prêt (« ready event »):
$(document).ready(function() {

});

Le code finalement exécuté est:
alert(« jQuery fonctionne parfaitement bien ! »);
Si tout va bien, ce code affiche le message « jQuery fonctionne parfaitement bien ! ».

Enregistrez vos modifications faites dans le fichier VerifierJQuery.js.

Uploadez aussi votre fichier VerifierJQuery.js dans la bibliothèque Scripts. C’est la même bibliothèque que celle qui héberge le fichier jQuery.js. Techniquement, il pourrait s’agir de bibliothèques différentes mais cela n’est important pour nous.

Une fois le fichier VerifierJQuery.js uploadé, faites un clic-droit dessus puis Copier le raccourci. Dans un instant, vous aurez besoin de coller le chemin.

Pour tester le bon fonctionnement de jQuery, il faut créer une simple page dans SharePoint.

Pour cela, ouvrez un nouvel onglet dans votre navigateur puis allez sur la page d’accueil de votre site puis cliquez sur Actions du site puis Autres options.

Filtrez sur Page et sélectionnez le modèle Page.

Dans le volet de droite, saisissez le nom Test puis cliquez sur le bouton Créer.

Si vous voyez apparaître un message vous prévenant qu’il faut une bibliothèque de pages Wiki et une bibliothèque de pièces jointes par défaut, cliquez sur le bouton Créer de cette page.

Une fois que la page est créée, vous devez insérer un composant webpart (ruban Insérer) Editeur de contenu (qui se trouve dans la catégorie) Média et contenu.

Une fois que le composant Editeur de contenu est inséré, survolez le avec la souris pour faire apparaître son menu d’édition:
Composant webpart editeur de contenu
Cliquez sur Modifier le composant Webpart: sur la droite de l’écran, les paramètres de l’Editeur de contenu s’affiche.
Menu du Composant WebPart Editeur de contenu
Sous Lien du contenu, coller le contenu du presse-papier. Normalement, il contient l’emplacement du fichier VerifierJQuery.js.

Ensuite, cliquez sur le bouton OK.

Vous devez avoir la fenêtre suivante:
jQuery fonctionne parfaitement bien !
Enregistrez votre page: le message ci-dessus s’affiche à nouveau.

 

Une pensée sur “Tutoriel d’initiation de base sur JQuery dans SharePoint”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *