1
2015
SharePoint 2013
JSLINK - Retours d’expériences
Ran MELLUL
Practice Manager
SharePoint
Mob. : +41 78 636 64 20
ran.m...
2
01—
A propos
04—
Utilitaires
05—
Trucs et astuces
06—
Conclusion
02—
JSLINK
03—
Débogage et
propriétés
A propos
Depuis maintenant quelques années j'accompagne les entreprises dans la
mise en place de solutions collaboratives ...
JSLINK
Pour rappel, JSLINK permet de personnaliser les vues et les formulaires
SharePoint 2013, en javascript.
4
Késako ?
JSLINK
Voici un exemple de structure du fichier javascript pour personnaliser les
vues (coloriser les dates, masquer une c...
JSLINK
6
Corps (suite)
JSLINK
Le référencement de ce fichier javascript se fait depuis la webpart > Lien JS
Le fichier est stocké dans la bibliot...
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 de...
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...
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
P...
Débogage et propriétés
ListData représente les éléments de la vue.
11
Propriétés (ListData)
Utilitaires
Voici quelques fonctions et propriétés utiles :
 document.location.href
 GetUrlKeyValue
 SetUrlKeyValue
 S...
Trucs et astuces
Pour exécuter rapidement une instruction, la console est disponible
13
Console IE Dev Tools
Trucs et astuces
Dans les Sous-Tâches, le lien Voir s’affiche si et seulement si la colonne
masquée EstParent (=OUI).
Pour...
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...
Trucs et astuces
Pour masquer la vue Mon équipe aux non managers, stockés dans une liste
de paramétrage
16
Masquer une vue
Trucs et astuces
Pour ombrer les lignes
Il faut redéfinir le OnPostRender
17
Ombrer un ligne sur deux
Trucs et astuces
J’utilise Jquery pour certaines manipulations, le référencement se fait via un
CDN si il n’est pas trouvé...
Trucs et astuces
Un autre fichier javascript est utilisé dans les formulaires, pour masquer la
colonne Assistante, celles-...
Trucs et astuces
Charger Jquery et la routine
20
Masquer une colonne dans les formulaires (suite)
Trucs et astuces
J’ai également eu à redéfinir le bouton Fermer quand on vient d’une url
spécifique ouverte dans un nouvel...
Conclusion
D’autres articles, basés sur ce même modèle, viendront prochainement…
Pour ma part, j’ai pris beaucoup de plais...
23
Prochain SlideShare
Chargement dans…5
×

JSLINK - Retours d'expériences

232 vues

Publié le

Retours d'expériences sur JSLINK.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
232
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

JSLINK - Retours d'expériences

  1. 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. 2 01— A propos 04— Utilitaires 05— Trucs et astuces 06— Conclusion 02— JSLINK 03— Débogage et propriétés
  3. 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. 4. JSLINK Pour rappel, JSLINK permet de personnaliser les vues et les formulaires SharePoint 2013, en javascript. 4 Késako ?
  5. 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. 6. JSLINK 6 Corps (suite)
  7. 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. 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. 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. 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. 11. Débogage et propriétés ListData représente les éléments de la vue. 11 Propriétés (ListData)
  12. 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. 13. Trucs et astuces Pour exécuter rapidement une instruction, la console est disponible 13 Console IE Dev Tools
  14. 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. 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. 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. 17. Trucs et astuces Pour ombrer les lignes Il faut redéfinir le OnPostRender 17 Ombrer un ligne sur deux
  18. 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. 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. 20. Trucs et astuces Charger Jquery et la routine 20 Masquer une colonne dans les formulaires (suite)
  21. 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. 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. 23

×