Initiation à JQuery dans SharePoint

Ce tutoriel se limite à une initiation à 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.

Initiation à JQuery dans SharePoint

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.

Tout d’abord, sous Navigation, dans Afficher le composant bibliothèque de documents dans le volet Lancement rapide, cochez Non.

Puis, dans la section 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.

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

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

JQuery dans bibliotheque
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. En effet, dans cette initiation à JQuery dans SharePoint, vous devez vérifier chacune des étapes avant d’aller plus loin.

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>

Adapter le script à votre environnement

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 ! ». Dans le cadre de cette initiation à JQuery dans SharePoint, il faut que vous soyez attentif à vérifier le bon fonctionnement de chaque étape.

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.

Création d’une page de test

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.

Composant webpart editeur de contenu
Composant webpart editeur de 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:

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
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.

Notamment, vous devez avoir la fenêtre suivante:

Initiation à JQuery dans SharePoint
jQuery fonctionne parfaitement bien !

Enregistrez votre page: le message ci-dessus s’affiche à nouveau.

Ce message confirme que vous êtes prêt à aller au-delà de cette simple initiation à JQuery dans SharePoint.

Laisser un commentaire

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