Petit tutoriel d’introduction et d’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.

 

Listes en cascade dans SharePoint avec une colonne de type Recherche

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.

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

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.

"<yoastmark

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.

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

Les différents types de 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 (« _ »).

Créer un raccourci réseau vers SharePoint pour Enregistrer sous

Si vous créez un raccourci réseau vers SharePoint, vous pouvez avoir un lien direct sur SharePoint à partir de Word, lorsque l’utilisateur fait Enregistrer sous.

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:

Raccourci réseau vers SharePoint

Cliquez sur le bouton Suivant:
Enregistrer-sous-EMPLACEMENT-RESEAU
Ensuite, il faut cliquer 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.

Elle permet aussi de travailler directement avec les fichiers. Vous pouvez donc avoir un lien direct sur SharePoint à partir de Word, sans créer un raccourci réseau vers 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.

En outre, 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 ».

Console d’administration centrale

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

Application de service 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

Paramétrage de 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
La création de l’application de service Web Analytics entraîne la création de son proxy.

Application de service Web Analytics créée

Paramétrage de Web Analytics and health data collection

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

La copie d’écran sert à montrer toutes les options pour des raisons pédagogiques.

Toutefois, vous ne devez pas cocher toutes les options de l’enregistrement de données de suivi. Chaque case cochée entraîne une surcharge pour le serveur. Cela peut avoir un impact négatif sur les performances.

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.

Approvisionnement en PowerShell

Si vous constatez l’arrêt du service proxy, vous pouvez approvisionner le service proxy grâce à 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).

Ensuite, l’approvisionnement se finalise avec les commandes PowerShell:

$ASId = « 0ff1aba9-3e18-46ea-adea-5bfe1386dd85 »
$AS = Get-SPServiceApplicationProxy | Where {$_.ID -eq $ASId}
$AS.Provision()

Toutefois, le résultat n’est pas immédiat.

En effet, compte-tenu de l’architecture complexe, les rapports apparaissent au bout de 48 heures dans SharePoint.

Exemple de rapport

Exemple d’un résultat de rapports sur le nombre de pages vues par utilisateur:

Rapport Web Analytics
Remarque: Chaque numéro identifie un utilisateur.