Retours d'expériences sur JSLINK.

1. 1
2015
SharePoint 2013
JSLINK - Retours d’expériences
Ran MELLUL
Practice Manager
SharePoint
Mob. : +41 78 636 64 20
ran.mellul@altran.com
http://www.altran.ch

2. 2
01—
A propos
04—
Utilitaires
05—
Trucs et astuces
06—
Conclusion
02—
JSLINK
03—
Débogage et
propriétés

3. A propos
Depuis maintenant quelques années j'accompagne les entreprises dans la
mise en place de solutions collaboratives SharePoint.
Mes missions sont très variées et peuvent couvrir les domaines suivants :
 Gouvernance
 Architecture
 Conception
 Développement
 Coaching
 Formation
J’ai (enfin!) décidé de faire partager mes expériences sur des cas concrets
issus de mes projets.
Cet article est donc basé sur ces retours d’expériences, il est destiné aux
développeurs ayant déjà quelques connaissances sur JSLINK.
3
Ran MELLUL, Senior Architect & Practice Manager

4. JSLINK
Pour rappel, JSLINK permet de personnaliser les vues et les formulaires
SharePoint 2013, en javascript.
4
Késako ?

5. JSLINK
Voici un exemple de structure du fichier javascript pour personnaliser les
vues (coloriser les dates, masquer une colonne, ombrer les lignes, etc.)
5
Corps

6. JSLINK
6
Corps (suite)

7. JSLINK
Le référencement de ce fichier javascript se fait depuis la webpart > Lien JS
Le fichier est stocké dans la bibliothèque de style, dans un dossier Altran
de la collection de site
7
Référencement

8. Débogage et propriétés
J’utilise IE Developer Tools (F12) pour le débogage mais également pour
découvrir les propriétés des objets (ctx, ListData, …).
8
Généralités

9. Débogage et propriétés
Allez dans l’onglet Script, recherchez l’endroit où ajouter un point d’arrêt
puis cliquez sur Start debuging
9
Débogage

10. Débogage et propriétés
Pour découvrir les propriétés des objets (ctx par exemple), cliquez sur
Watch puis entrez ctx.
10
Propriétés (ctx)

11. Débogage et propriétés
ListData représente les éléments de la vue.
11
Propriétés (ListData)

12. Utilitaires
Voici quelques fonctions et propriétés utiles :
 document.location.href
 GetUrlKeyValue
 SetUrlKeyValue
 SP.Utilities.UrlBuilder.removeQueryString
 SP.Utilities.Utility.getLayoutsPageUrl
 encodeURIComponent
 ReplaceUrlTokens
 SP.UI.ModalDialog.showModalDialog
 SP.SOD.executeOrDelayUntilScriptLoaded
12

13. Trucs et astuces
Pour exécuter rapidement une instruction, la console est disponible
13
Console IE Dev Tools

14. Trucs et astuces
Dans les Sous-Tâches, le lien Voir s’affiche si et seulement si la colonne
masquée EstParent (=OUI).
Pour y faire référence dans le .JS, il faut l’ajouter à la vue puis la masquer
14
Masquer une colonne

15. Trucs et astuces
Par défaut, 3 vues sont affichées avant le sélecteur (…)
Pour afficher plus de vues, il faut redéfinir le Header
15
Afficher plus de vues

16. Trucs et astuces
Pour masquer la vue Mon équipe aux non managers, stockés dans une liste
de paramétrage
16
Masquer une vue

17. Trucs et astuces
Pour ombrer les lignes
Il faut redéfinir le OnPostRender
17
Ombrer un ligne sur deux

18. Trucs et astuces
J’utilise Jquery pour certaines manipulations, le référencement se fait via un
CDN si il n’est pas trouvé en local
18
Jquery

19. Trucs et astuces
Un autre fichier javascript est utilisé dans les formulaires, pour masquer la
colonne Assistante, celles-ci sont stockées dans une liste de paramétrage
19
Masquer une colonne dans les formulaires

20. Trucs et astuces
Charger Jquery et la routine
20
Masquer une colonne dans les formulaires (suite)

21. Trucs et astuces
J’ai également eu à redéfinir le bouton Fermer quand on vient d’une url
spécifique ouverte dans un nouvel onglet, dans mon cas si Source n’existe
pas dans cette url
21
Surcharger le bouton Fermer dans les formulaires
http://taches/Lists/AltranTache/DispForm.aspx?ID=647

22. Conclusion
D’autres articles, basés sur ce même modèle, viendront prochainement…
Pour ma part, j’ai pris beaucoup de plaisir à faire partager ces retours
d’expériences sur JSLINK en espérant que cet article sera apprécié, autant
dans son format que dans son contenu.
Des questions, suggestions d’articles, un projet ? Contactez-moi !
22
Ran MELLUL
Senior Architect & Practice Manager SharePoint
Altran Suisse
Mob. : +41 78 636 64 20
ran.mellul@altran.com
http://www.altran.ch

23. 23