SlideShare une entreprise Scribd logo
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
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 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
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 colonne, ombrer les lignes, etc.)
5
Corps
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 bibliothèque de style, dans un dossier Altran
de la collection de site
7
Référencement
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
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
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)
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
 SP.Utilities.UrlBuilder.removeQueryString
 SP.Utilities.Utility.getLayoutsPageUrl
 encodeURIComponent
 ReplaceUrlTokens
 SP.UI.ModalDialog.showModalDialog
 SP.SOD.executeOrDelayUntilScriptLoaded
12
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 y faire référence dans le .JS, il faut l’ajouter à la vue puis la masquer
14
Masquer une colonne
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
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é en local
18
Jquery
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
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 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
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

Contenu connexe

En vedette

Phân tích print ads & tvc nhóm 10
Phân tích print ads & tvc   nhóm 10Phân tích print ads & tvc   nhóm 10
Phân tích print ads & tvc nhóm 10
Bui Nga
 
WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)
WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)
WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)
Geoff Myers
 
Cpa ex tt_landings_290617
Cpa ex tt_landings_290617Cpa ex tt_landings_290617
Cpa ex tt_landings_290617
CPAex
 
Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)
Colin Bendell
 
Microservices with SenecaJS (part 2)
Microservices with SenecaJS (part 2)Microservices with SenecaJS (part 2)
Microservices with SenecaJS (part 2)
Designveloper
 
Permulaan Matematika Deduktif
Permulaan Matematika DeduktifPermulaan Matematika Deduktif
Permulaan Matematika Deduktif
monalisa manan
 
Certificados Locutor Acta 17
Certificados Locutor Acta 17Certificados Locutor Acta 17
Certificados Locutor Acta 17
Facultad de Humanidades y Educación
 
Certificados Locutor Acta 21
Certificados Locutor Acta 21Certificados Locutor Acta 21
Certificados Locutor Acta 21
Facultad de Humanidades y Educación
 
Bite sized 9: A Fruit of the spirit- Gentleness
Bite sized 9: A Fruit of the spirit- GentlenessBite sized 9: A Fruit of the spirit- Gentleness
Bite sized 9: A Fruit of the spirit- Gentleness
MyWonderStudio
 
Announcing Amazon Lex - January 2017 AWS Online Tech Talks
Announcing Amazon Lex - January 2017 AWS Online Tech TalksAnnouncing Amazon Lex - January 2017 AWS Online Tech Talks
Announcing Amazon Lex - January 2017 AWS Online Tech Talks
Amazon Web Services
 
Cryptography With PHP
Cryptography With PHPCryptography With PHP
Cryptography With PHP
Mark Niebergall
 

En vedette (12)

Phân tích print ads & tvc nhóm 10
Phân tích print ads & tvc   nhóm 10Phân tích print ads & tvc   nhóm 10
Phân tích print ads & tvc nhóm 10
 
WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)
WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)
WordPress Page Builders for Non-Developers (Create Visual Layouts Without Code)
 
Cpa ex tt_landings_290617
Cpa ex tt_landings_290617Cpa ex tt_landings_290617
Cpa ex tt_landings_290617
 
Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)
 
Microservices with SenecaJS (part 2)
Microservices with SenecaJS (part 2)Microservices with SenecaJS (part 2)
Microservices with SenecaJS (part 2)
 
Permulaan Matematika Deduktif
Permulaan Matematika DeduktifPermulaan Matematika Deduktif
Permulaan Matematika Deduktif
 
Certificados Locutor Acta 17
Certificados Locutor Acta 17Certificados Locutor Acta 17
Certificados Locutor Acta 17
 
Acta Nº 24
Acta Nº 24Acta Nº 24
Acta Nº 24
 
Certificados Locutor Acta 21
Certificados Locutor Acta 21Certificados Locutor Acta 21
Certificados Locutor Acta 21
 
Bite sized 9: A Fruit of the spirit- Gentleness
Bite sized 9: A Fruit of the spirit- GentlenessBite sized 9: A Fruit of the spirit- Gentleness
Bite sized 9: A Fruit of the spirit- Gentleness
 
Announcing Amazon Lex - January 2017 AWS Online Tech Talks
Announcing Amazon Lex - January 2017 AWS Online Tech TalksAnnouncing Amazon Lex - January 2017 AWS Online Tech Talks
Announcing Amazon Lex - January 2017 AWS Online Tech Talks
 
Cryptography With PHP
Cryptography With PHPCryptography With PHP
Cryptography With PHP
 

Similaire à JSLINK - Retours d'expériences

Organization guide fr
Organization guide frOrganization guide fr
Organization guide frLouiza Meghni
 
Amen - Introduction au référencement (SEO)
Amen - Introduction au référencement (SEO)Amen - Introduction au référencement (SEO)
Amen - Introduction au référencement (SEO)
Amen.fr
 
Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)
Comsatis
 
Le référencement d’un site e-Commerce
Le référencement d’un site e-CommerceLe référencement d’un site e-Commerce
Le référencement d’un site e-Commerce
CYB@RDECHE
 
Dreamforce 19 Global Gathering
Dreamforce 19 Global GatheringDreamforce 19 Global Gathering
Dreamforce 19 Global Gathering
Thierry TROUIN ☁
 
Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)
Redpoint
 
Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"
IL-DI - International Learning and Development Institute
 
Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)
LELEU Corinne
 
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...Patrick Guimonet
 
13 trucs de référencement faciles
13 trucs de référencement faciles 13 trucs de référencement faciles
13 trucs de référencement faciles
Chic & Barda
 
Modèle cahier des charges site web
Modèle cahier des charges site webModèle cahier des charges site web
Modèle cahier des charges site web
JEAN-GUILLAUME DUJARDIN
 
Memoire de Master 2 realiser par Monsieur Wellove tsiri
Memoire de Master 2 realiser par Monsieur Wellove tsiriMemoire de Master 2 realiser par Monsieur Wellove tsiri
Memoire de Master 2 realiser par Monsieur Wellove tsiri
tsiriniainaRTN
 
Outils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEOOutils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEO
PrestaShop
 
Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM
Remi Ouillon
 
MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...
MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...
MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...
Baptiste Ohanes
 
T3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptx
T3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptxT3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptx
T3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptx
Talan
 
Introduction on page SEO pour copywriters
Introduction on page SEO pour copywritersIntroduction on page SEO pour copywriters
Introduction on page SEO pour copywriters
Isaline Mülhauser
 
Quest IT Performance Day 2010 - Gouvernance SharePoint
Quest IT Performance Day 2010 - Gouvernance SharePointQuest IT Performance Day 2010 - Gouvernance SharePoint
Quest IT Performance Day 2010 - Gouvernance SharePoint
Benoit HAMET
 
Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
Hedi Riahi
 
Formation prospection LinkedIn
Formation prospection LinkedInFormation prospection LinkedIn
Formation prospection LinkedIn
Julien Dereumaux
 

Similaire à JSLINK - Retours d'expériences (20)

Organization guide fr
Organization guide frOrganization guide fr
Organization guide fr
 
Amen - Introduction au référencement (SEO)
Amen - Introduction au référencement (SEO)Amen - Introduction au référencement (SEO)
Amen - Introduction au référencement (SEO)
 
Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)
 
Le référencement d’un site e-Commerce
Le référencement d’un site e-CommerceLe référencement d’un site e-Commerce
Le référencement d’un site e-Commerce
 
Dreamforce 19 Global Gathering
Dreamforce 19 Global GatheringDreamforce 19 Global Gathering
Dreamforce 19 Global Gathering
 
Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)
 
Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"
 
Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)
 
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...
 
13 trucs de référencement faciles
13 trucs de référencement faciles 13 trucs de référencement faciles
13 trucs de référencement faciles
 
Modèle cahier des charges site web
Modèle cahier des charges site webModèle cahier des charges site web
Modèle cahier des charges site web
 
Memoire de Master 2 realiser par Monsieur Wellove tsiri
Memoire de Master 2 realiser par Monsieur Wellove tsiriMemoire de Master 2 realiser par Monsieur Wellove tsiri
Memoire de Master 2 realiser par Monsieur Wellove tsiri
 
Outils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEOOutils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEO
 
Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM
 
MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...
MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...
MSexperiences2018 - Gouvernance dans Azure - Comment garder le contrôle du cl...
 
T3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptx
T3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptxT3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptx
T3CAMP 2022 - TYPO3 et le Cocon Sémantique.pptx
 
Introduction on page SEO pour copywriters
Introduction on page SEO pour copywritersIntroduction on page SEO pour copywriters
Introduction on page SEO pour copywriters
 
Quest IT Performance Day 2010 - Gouvernance SharePoint
Quest IT Performance Day 2010 - Gouvernance SharePointQuest IT Performance Day 2010 - Gouvernance SharePoint
Quest IT Performance Day 2010 - Gouvernance SharePoint
 
Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
 
Formation prospection LinkedIn
Formation prospection LinkedInFormation prospection LinkedIn
Formation prospection LinkedIn
 

Dernier

Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
AlbertSmithTambwe
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 

Dernier (9)

Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 

JSLINK - Retours d'expériences

  • 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
  • 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