Initiation à SPservices

Ce tutoriel se limite à une initiation à SPservices dans SharePoint. SPServices est une bibliothèque qui s’appuie sur JQuery et simplifie l’appel aux services Web de SharePoint.

Pour exécuter avec succès cette initiation à SPservices, vous devez suivre au préalable le tutoriel dédié à JQuery, et qui est expliqué dans l’article Tutoriel d’initiation de base sur JQuery dans SharePoint.

Télécharger la bibliothèque SPservices

Avant de débuter cette initiation à SPservices, téléchargez la dernière version de SPServices.

Stockez le fichier zip sur votre ordinateur, décompressez-le et renommez le fichier jQuery.SPServices-2013.01.js en jQuery.SPServices.js. Dans les environnements complexes, il peut être intéressant d’identifier chaque version de SPservices. Dans notre cas, il est plus simple d’avoir une seule référence dans votre collection de sites SharePoint.

Pour pouvoir utiliser le fichier jQuery.js, il est nécessaire de le téléverser (“uploader”) dans la bibliothèque Scripts, créée dans le tutoriel dédié à JQuery.

Allez dans la bibliothèque Scripts puis cliquez sur le bouton Ajouter un document.

Cliquez ensuite sur Parcourir et “uploader” jQuery.SPServices.js dans la bibliothèque.

Initiation à SPservices
Bibliotheque jQuery et SPServices

Vérifier le bon fonctionnement de SPservices

Avant toute chose, il est important de vérifier que SPservices est valide et fonctionne bien dans votre environnement. Il est supposé que vous avez déjà vérifié que JQuery fonctionne parfaitement bien.

Avec le Bloc-notes (notepad.exe), créez un petit fichier VerifierSPservices.js avec le texte suivant:

<script type="text/javascript" src="/Scripts/jquery.js"></script>
 <script type="text/javascript" src="/Scripts/jquery.SPServices.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 alert($().SPServices.SPGetCurrentSite());
 });
 </script>

Seules les lignes nouvelles par rapport à VerifierJQuery.js seront présentées.

La seconde ligne sert à référencer l’appel à SPServices. 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.

Le code exécuté est:

alert($().SPServices.SPGetCurrentSite());

Si tout va bien, ce code affiche un message avec l’URL complète de votre site.

Enregistrez vos modifications faites dans le fichier VerifierSPservices.js.

Uploadez aussi votre fichier VerifierSPservices.js dans la bibliothèque Scripts.

Initiation à SPservices

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

Par ailleurs, pour tester le bon fonctionnement du script, vous allez utiliser la page Test, créée dans le tutoriel jQuery. Si vous n’avez plus de page Test, consultez le tutoriel pour en créer une.

Notamment, ouvrez un nouvel onglet dans votre navigateur puis allez sur la page d’accueil de votre site puis cliquez sur Actions du site puis Afficher tout le contenu du site.

Ensuite, cliquez sur la bibliothèque Pages du site.

Puis, dans le volet de gauche, cliquez sur le lien Test. Si un message jQuery s’affiche, fermez-le.

Et cliquez sur Actions du site puis Modifier la page.

Composant webpart editeur de contenu
Composant webpart editeur de contenu

Avec la souris, survolez le composant Editeur de contenu pour faire apparaître son menu d’édition:

Ensuite, cliquez sur Modifier le composant Webpart: sur la droite de l’écran, les paramètres de l’Editeur de contenu s’affiche. Si un message jQuery s’affiche, fermez-le.

Ensuite, sous Lien du contenu, coller le contenu du presse-papier. Normalement, il contient l’emplacement du fichier VerifierSPservices.js.

Ensuite, cliquez sur le bouton OK.

Puis, vous devez voir une fenêtre qui s’affiche en indiquant l’URL du site.

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

Share Button

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.

Share Button

Listes en cascade dans SharePoint

L’objectif est de créer des listes en cascade dans SharePoint.  Autrement dit, il s’agit de créer une colonne dans une liste enfant qui recherche une information qui se trouve dans une liste parent.

Une autre technique pour réaliser des listes en cascade dans SharePoint est détaillée dans l’article sur les listes déroulantes en cascade.

Pour réaliser ce tutoriel d’initiation, vous allez créer deux listes.

  • La première liste (liste parent) contiendra la Liste Régions.
  • La seconde liste (liste enfant) contiendra la Liste Départements. Dans cette liste chaque département sera rattaché à sa région.

Il existe de très nombreuses méthodes pour créer une liste. Comme ce tutoriel s’adresse à des débutants, vous le ferez avec une méthode très classique avec l’interface graphique.

Créer la liste SharePoint parent

Il faut créer la première liste qui contient la Liste Régions. C’est la liste parent.

Par ailleurs, lors de la création d’une liste personnalisée, une colonne et une seule est créée systématiquement. Notamment, le nom affiché est Titre (ou Title en anglais). Une fois que la liste Régions sera créée, vous utiliserez la colonne Titre pour saisir les régions.

Pour créer la liste, ouvrez un site sur lequel vous êtes propriétaire ou sur lequel vous avez les droits de concepteur. Si ce n’est pas le cas, demandez à votre administrateur de créer un site de formation dans une ferme de tests.

Sur votre site, cliquez sur Actions du site puis sur Autres options. L’affichage dépend selon que le programme additionnel Silverlight est installé ou non sur votre poste de travail.

Vous obtenez cet affichage avec Silverlight :

Affichage avec Silverlight
Affichage avec Silverlight

Listes en cascade dans SharePoint

Dans ce cas, sous Filtrer par (à gauche), vous cliquez sur Liste pour ne faire apparaître que les modèles de listes.

Ensuite, dans la liste des modèles, il faut cliquer sur le modèle Liste personnalisée: le volet à droite affiche les paramètres nécessaires à la création de la liste.

Enfin, dans le volet de droite, cliquez sur le bouton Autres options. En effet, ce bouton vous donne accès à des paramètres supplémentaires importants.

Renseignez le formulaire avec les informations suivantes:

  • Nom: Régions
  • Description: Liste personnalisée qui énumère les régions administratives françaises.
  • Afficher le composant liste dans le volet Lancement rapide: vérifiez que la case est cochée sur Oui. Si ce n’est pas le cas, cochez la case Oui.

Ensuite, cliquez sur le bouton Créer: la liste créée s’affiche directement.

Affichage d'une liste créée dans SharePoint
Affichage d’une liste créée dans SharePoint

Dès maintenant, vous pouvez alimenter la liste.

Toutefois, afin d’être plus efficace, cliquez sur Mode Feuille de données (dans le Ruban Liste, à gauche), pour basculer en affichage mode Microsoft Access ou Excel:

Basculement en mode Feuille de données
Basculement en mode Feuille de données

Puis:

Mode Feuille de données
Mode Feuille de données

Alimenter une liste SharePoint par copier-coller

Pour renseigner les régions, téléchargez le fichier Regions. Ce fichier contient déjà les valeurs pour le scénario de listes en cascade dans SharePoint.

Dézippez-le et ouvrez le fichier texte qu’il contient dans le Bloc-notes (notepad.exe) et copier tout le contenu par CTRL+C.

Retournez sur la liste ouverte, et cliquez dans la cellule sous Titre.

Pour alimenter la liste, vous faites un clic-droit puis Coller.

Copie réalisée en mode Feuille de données
Copie réalisée en mode Feuille de données

Si vous préférez, vous pouvez cliquer sur Affichage standard pour retrouver un affichage plus habituel.

Copie affichée en mode Standard
Copie affichée en mode Standard

Par défaut, l’affichage du sigle “Nouveau !” disparaît au bout de 7 jours, sauf si votre administrateur a modifié son paramétrage.

Créer la liste SharePoint enfant

La liste SharePoint enfant est la liste des départements. Elle s’intitulera Départements.

Dans des listes en cascade dans SharePoint, une liste sert à fournir un premier filtre. C’est le rôle de la liste Départements . Ensuite, lors de l’affichage du département, la valeur correspondante de la région s’affiche.

La colonne Titre sera utilisée pour alimenter les départements. Une seconde colonne sera créée pour indiquer la région. Cette seconde colonne sera nommée Region (sans accent: pour les explications consultez l’article sur le nom interne des colonnes).

La colonne “Region” sera la colonne de recherche qui pointera sur la colonne Titre de la liste Régions.

La procédure de la liste Départements étant identique à celle utilisée pour la création de la liste Régions; vous trouverez uniquement la liste des manipulations sans commentaire.

Allez sur votre site puis dans Actions du site: Autres options > Liste > Liste personnalisée puis cliquez sur le bouton Autres options.

Renseignez le formulaire avec les informations suivantes:

  • Nom: Départements
  • Description: Liste personnalisée qui énumère les départements français avec leur région administrative de rattachement.
  • Afficher le composant liste dans le volet Lancement rapide: cochez la case Oui.

Ensuite, cliquez sur le bouton Créer.

Créer une colonne de recherche

Vous allez rajouter la colonne Region dans la liste Départements pour faire le lien avec la liste Régions.

La nouvelle colonne devra impérativement être de type Recherche (informations déjà sur ce site).

Pour ajouter la colonne Region, allez sur la Liste Départements.

Puis cliquez sur le ruban Liste (en haut) et sur le menu Créer une colonne.

Créer une colonne de recherche
Créer une colonne de recherche

Nommez la colonne Region (sans accent) puis sélectionnez le type Recherche (informations déjà sur ce site).

Créer une colonne - Etape 1
Créer une colonne – Etape 1

Puis, dans Paramètres de colonne supplémentaires, sous Obtenir des informations à partir de, sélectionnez Liste Régions. Sous Dans cette colonne, sélectionnez la colonne Titre.

Créer une colonne - Etape 2
Créer une colonne – Etape 2

Cliquez sur le bouton OK.

région
Région

Ensuite, basculez la liste Départements en mode Feuille de données.

Puis, téléchargez le fichier Départements.

Ensuite, dézippez-le et ouvrez le fichier texte qu’il contient dans le Bloc-notes (notepad.exe) et copier tout le contenu par CTRL+C.

Puis, retournez sur la liste ouverte, et cliquez dans la cellule sous Titre.

Pour alimenter la liste, vous faites un clic-droit puis Coller.

Le copier-coller fonctionne parfaitement bien car les valeurs de la colonne Région correspondent exactement aux valeurs de la liste Régions. Dans le cas contraire, un message vous informerait des problèmes rencontrés et vous demanderait si vous souhaitez continuer ou pas l’opération de copier.

Ensuite, basculez la liste en affichage standard. Les listes en cascade dans SharePoint s’affichent avec leur valeur respective :

Listes en cascade dans SharePoint
Liste alimentée en copier-coller avec une colonne de recherche
Share Button

Nom des colonnes SharePoint

Il existe plusieurs types de nom des colonnes SharePoint.

En effet, il y a le nom affiché (ou Display Name en anglais). C’est le nom que voit l’utilisateur. Ce nom peut être modifié sans problème, si vous possédez les droits pour le faire.

Il existe aussi le nom interne (ou InternalName). Ce nom est en lecture seule et il est immuable.

Enfin, il existe le nom statique (ou StaticName). Dans la pratique, le nom statique est souvent identique au nom interne. Éventuellement, il peut être différent pour des besoins liés au développement. Dans le cas d’une colonne qui référence une source externe, le nom statique et le nom interne sont toujours identique.

Nom interne (InternalName)

Le premier nom des colonnes SharePoint est le nom interne. Celui-ci est généré à la création de la colonne.

En effet, prenez l’exemple d’une liste qui possède une colonne nommée:

Région administrative

C’est le nom affiché. Le nom affiché est le second nom des colonnes SharePoint. Vous pouvez le modifier, si vous avez les droits pour le faire.

Notamment, pour connaitre le nom interne de la colonne Région administrative, ouvrez la page des paramètres de la liste via Ruban Liste > Paramètres > Paramètres de liste.

Nom des colonnes SharePoint
Nom interne des colonnes SharePoint

Sous la section Colonnes, cliquez sur le nom de la colonne Région administrative.

En effet, dans l’URL affiché par le navigateur, vous trouverez le nom transcodé de la colonne Région administrative au bout du champ Field=

Dans cet exemple, le nom généré de Région administrative est :
%5Fx00e9%5Fgion%5Fx0020%5Fadministrativ

Décodage du nom transcodé de l’URL

Bien sûr, vous remarquerez que les lettres accentuées ont été remplacées par les caractères %5Fx00e9%5F.

%5F correspond au caractère underscore (“_”). Il joue un rôle particulier.

x00e9 est le codage unicode de la lettre “é”.

x0020 est le codage unicode de l’espace.

De plus, SharePoint va transformer le %5F en véritable caractère underscore (“-“). Il stocke donc le nom de cette colonne sous la forme:

R_x00e9_gion_x0020_administrativ

En effet, c’est le nom interne qui ne changera pas tant que la colonne existe. Ce nom doit être unique dans la liste.

Toutefois, la longueur maximale d’un nom interne est de 32 caractères, ce qui explique que la dernière lettre (“e”) est omise.

Aussi, pour connaître plus rapidement et plus surement le nom interne, vous pouvez utiliser la suite gratuite SharePoint Manager pour SharePoint 2016, SharePoint 2013 ou SharePoint 2010.

Cependant, vous ne pourrez utiliser cet outil puissant que sur le serveur SharePoint. Cela demande une connexion distante, par exemple.

Conflits dans le nom des colonnes SharePoint

Tout d’abord, si vous essayez de créer une seconde colonne Région administrative dans la même liste, que se passe-t-il ?

  • SharePoint refuse la création d’une colonne portant exactement le même nom qu’une colonne existante dans une même liste.

Ensuite, si vous essayez de créer une colonne Région administrative dans une autre liste sur le même site, que se passe-t-il ?

  • SharePoint l’accepte. Le nom interne serait identique au nom interne de la liste précédente, soit R_x00e9_gion_x0020_administrativ.

Maintenant, si vous essayez de créer une colonne nommée exactement “R_x00e9_gion_x0020_administrativ” dans la première ou seconde liste, que se passe-t-il ?

  • SharePoint 2010 crée une colonne R_x00e9_gion_x0020_administrativ0.
  • Le nom de cette colonne possède 33 caractères. Les caractères après la 32ème position sont réservés pour lever les ambiguïtés sur les noms identiques.
  • SharePoint 2013 et SharePoint 2016 permettent d’avoir un InternalName jusqu’à 1024 caractères: Encode and decode field names from display name to internal name.

Enfin, si vous essayez de créer une colonne R_x00e9_gion_x0020_administrativ0 (vous ne pouvez pas créer une seconde colonne R_x00e9_gion_x0020_administrativ: cf. supra), que se passe-t-il ?

  • Le nom interne de la colonne est R_x00e9_gion_x0020_administrativ1.
  • Ce qui est très ambigüe.

Conseils de nommage des colonnes dans SharePoint

Compte tenu de ces transformations du nom affiché en nom interne, vous éviterez d’utiliser des accents dans le nom des colonnes et des espaces.

Enfin, vous pouvez remplacer l’espace par le caractère underscore (“_”).

Share Button