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.

 

Créer une colonne de recherche dans une liste SharePoint

L’objectif est de créer une colonne dans une liste « enfant » qui recherche une information qui se trouve dans une liste « parent ».

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.

Toutes les listes sont en libre téléchargement: cf. le corps du texte.

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

L’objectif est donc de créer une liste personnalisée, nommée Régions.

Lors de la création d’une liste personnalisée, une colonne et une seule est créée systématiquement. 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.

Si Silverlight est installé, vous obtenez un affichage comme celui-ci:
Affichage avec Silverlight
Sinon, votre affichage ressemble plutôt à:
Affichage sans Silverlight
Dans la suite, nous supposons que Silverlight est installé.

Créer une liste avec Silverlight

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

Dans la liste des modèles, cliquez sur le modèle Liste personnalisée: le volet à droite affiche les paramètres nécessaires à la création de la liste.

Dans le volet de droite, cliquez sur le bouton Autres options. 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 2010
Dès maintenant, vous pouvez alimenter la liste. 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
Puis:
Mode Feuille de données

Alimenter une liste SharePoint par copier-coller

Pour renseigner les régions, téléchargez le fichier Regions.

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.

Faites un clic-droit puis Coller (ou appuyez directement sur CTRL+V): votre liste est alimentée.
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
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. 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.

L’alimentation sera faite plus loin, en une fois.

Créer une colonne de recherche

Maintenant que la liste Départements est créée et alimentée, vous devez rajouter la colonne Region qui va permettre de 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
Nommez la colonne Region (sans accent) puis sélectionnez le type Recherche (informations déjà sur ce site).
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

Cliquez sur le bouton OK.
La colonne de recherche est créée
Ensuite, basculez la liste Départements en mode Feuille de données.

Téléchargez le fichier Départements.

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.

Faites un clic-droit puis Coller (ou appuyez directement sur CTRL+V): votre liste est alimentée.

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.

Basculez la liste en affichage standard:
Liste alimentée en copier-coller avec une colonne de recherche

Nom affiché et nom interne des colonnes SharePoint

Chaque colonne SharePoint possède plusieurs noms.

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)

Prenez l’exemple d’une liste qui possède une colonne nommée:
Région administrative
C’est le nom affiché. Vous pouvez le modifier, si vous avez les droits pour le faire.

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.

Sous la section Colonnes, cliquez sur le nom de la colonne Région administrative. Dans l’URL affiché par le navigateur, vous trouverez le nom transcodé de la colonne Région administrative au bout du champ Field=
Nom interne des colonnes SharePoint 2010
Dans cet exemple, le nom transcodé de Région administrative est :
%5Fx00e9%5Fgion%5Fx0020%5Fadministrativ

Décodage du nom transcodé de l’URL

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.

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
C’est le nom interne qui ne changera pas tant que la colonne existe. Ce nom doit être unique dans la liste.

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

Pour connaître plus rapidement et plus surement le nom interne, vous pouvez aussi utiliser la suite gratuite SharePoint Manager pour SharePoint 2013 ou SharePoint 2010. Toutefois, cet outil puissant s’utilise uniquement sur le serveur SharePoint.

Impacts éventuels des doublons de noms sur InternalName

Que se passerait-il si une seconde colonne Région administrative était créée dans la même liste ?

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

Et si une colonne Région administrative est créée dans une autre liste sur le même site ?

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

Et si une colonne nommée exactement « R_x00e9_gion_x0020_administrativ » est créée dans la première ou seconde liste ?

  • 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 permet d’avoir un InternalName jusqu’à 1024 caractères: Encode and decode field names from display name to internal name.

Et si maintenant, vous créez une colonne R_x00e9_gion_x0020_administrativ0 (vous ne pouvez pas créer une seconde colonne R_x00e9_gion_x0020_administrativ: cf. supra) ?

  • 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, il est vivement déconseillé d’utiliser des accents dans le nom des colonnes et des espaces.

L’espace peut être remplacé par le caractère underscore (« _ »).

Créer un raccourci réseau vers SharePoint

Comment avoir un lien direct sur SharePoint à partir de Word, lorsque l’utilisateur fait Enregistrer sous ?

Deux possibilités s’ouvrent à vous:

  • Créer un raccourci réseau vers SharePoint
  • Utiliser Workspace

Créer un raccourci réseau vers SharePoint

Le mappage d’une connexion réseau vers une bibliothèque SharePoint, permet de simplifier l’expérience utilisateur. Concrètement, l’utilisateur enregistrera un nouveau document dans une bibliothèque SharePoint à partir de Word, Excel ou PowerPoint.

Pour cela, lancez l’explorateur Windows (pas Internet explorer) puis appuyez sur la touche Alt du clavier: le menu système apparaît dans l’explorateur Windows:
Enregistrer-sous-ALT
Dans le menu, cliquez sur Connecter un lecteur réseau:
Enregistrer-sous-ENREGISTRER
Cliquez sur se connecter à un site Web permettant de stocker des documents et des images:

Enregistrer-sous-SE-CONNECTERCliquez sur le bouton Suivant:
Enregistrer-sous-EMPLACEMENT-RESEAU
Cliquez sur le bouton Suivant puis dans la zone Adresse réseau ou Internet, indiquez l’URL de la bibliothèque sur laquelle vous souhaitez vous connecter. Par exemple: http://urlsite/monsite/documents

Ensuite, cliquez sur le bouton Suivant: dans la zone Entrez le nom de cet emplacement réseau, donnez un nom convivial. Par exemple: Documents de monsite:
Enregistrer-sous-NOM-CONVIVIAL
Puis cliquez sur le bouton Suivant:
Enregistrer-sous-TERMINER
et enfin sur le bouton terminer: La liste des fichiers s’affiche dans l’explorateur Windows.
Enregistrer-sous-AFFICHAGE
Ensuite, il suffit de lancer Word par exemple puis de créer un nouveau document.

Au moment de l’enregistrement, les raccourcis réseaux vers SharePoint apparaissent.

Sélectionner l’emplacement Documents de monsite puis cliquer sur le bouton enregistrer:
Enregistrer-sous-ENREGISTREMENT

Utiliser Workspace

Précédemment connu sous le nom de Groove, Workspace est une application qui permet de travailler sur les documents SharePoint en mode déconnecté.

Elle permet des synchronisations automatisées entre le stockage local et le serveur SharePoint.
Publier-WORKSPACE
Si le mode déconnecté fonctionne avec toutes les bibliothèques, attention cependant car toutes les listes ne permettent pas ce mode.

Les rapports Web Analytics ne sont pas disponibles

Web Analytics est un service SharePoint qui fournit des rapports sur l’utilisation et la fréquentation des sites et des collections de sites. Par exemple, il donne la liste des utilisateurs les plus fréquents ou les pages du site les plus visitées.

Les autres informations sont essentiellement statistiques sur le nombre total de pages consultées par jour ou le nombre total de visiteurs uniques par jour.

Lors de la consultation des rapports, le message suivant s’affichait : « Impossible d’afficher les rapports Web Analytics, car l’application de service Web Analytics n’est pas mise en service. Contactez l’administrateur de la batterie de serveurs et demandez-lui de mettre en service cette application de service« .

La solution a consisté à lancer les deux services suivants à partir de la console d’administration centrale:

  • Web Analytics Data Processing Service
  • Web Analytics Web Service

Lien rapide: http://urlsiteadmin/_admin/Server.aspx
Services Web Analytics
Ensuite, il faut créer une application de service. Par exemple avec l’interface graphique de l’Administration centrale SharePoint:
Nouvelle Application de service Web Analytics
Web Analytics Application de Service
A l’issue de la création, un message donne les instructions à suivre pour mettre en oeuvre correctement l’application de service:
Web Analytics Instructions pour l'Application de Service
L’application de service Web Analytics a été créée avec son proxy.
Application de service Web Analytics créée
Comme indiqué dans le message d’instructions plus haut, il reste à indiquer les informations à collecter en allant dans le menu Configure web analytics and health data collection:
Configuration de web analytics et health data
Lien rapide: http://urlsiteadmin/_admin/LogUsage.aspx

Pour des raisons pédagogiques, toutes les options sont cochées mais dans la vraie vie, il faut être attentif à la surcharge que représente l’enregistrement de données de suivi.

Une fois que l’écran est validé, une nouvelle application de service est créée: Usage and Health Data Collection Service Application. Cette application est créée même si vous ne cochez pas l’option Enable health data collection de l’écran précédent.

Son service proxy est arrêté. Son approvisionnement est fait à l’aide de la commande PowerShell:
Get-SPServiceApplicationProxy
Get-SPServiceApplicationProxy permet de récupérer l’ID de l’application de service Usage and Health Data Collection Service Application: « 0ff1aba9-3e18-46ea-adea-5bfe1386dd85 » (par exemple).

L’approvisionnement se finalise avec les commandes PowerShell:
$ASId = « 0ff1aba9-3e18-46ea-adea-5bfe1386dd85 »
$AS = Get-SPServiceApplicationProxy | Where {$_.ID -eq $ASId}
$AS.Provision()

Le résultat n’est pas immédiat. Compte-tenu de l’architecture complexe, les rapports apparaissent au bout de 48 heures.

Exemple d’un résultat de rapports sur le nombre de pages vues par utilisateur:
Rapport Web Analytics
Remarque: Chaque numéro renvoie à un utilisateur.