Vous demandez comment rendre vos contenus SharePoint plus attrayants ? Cette session est pour vous ! Découvrez les bonnes pratiques pour personnaliser les affichages de SharePoint et intégrer vos customisations. Au programme : Les solutions JSLink Exploiter les Content Search WebPart Utiliser la Web Part Refinement Panel dynamiser vos affichages

1. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Track 3 – Développement
2SeeU
Bonne pratiques de personnalisation
SharePoint Online

2. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Consultante Office 365 & SharePoint @ ERYEM
nelmorsli@eryem.com
Nora EL MORSLI

3. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Planning

4. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Avant de commencer…

5. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Etat de l’art : Outils et Langage

6. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
CSR Kesako ?

7. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
JSLink Kesako ?

8. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
JSLink Kesako ?

9. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Content Search WP Kesako ?

10. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
La solution JSLink

11. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
JSLink : 3 étapes
Création du fichier
• JSON
• JavaScript
Ajout du fichier dans
SP
• List Style Library
Référencement du
fichier
• OOTB (pas recommandé)
• Code
• CAML
• PowerShell

12. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Focus sur la vue de liste

13. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Création du fichier

14. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Ajout du ficher dans SP

15. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Référencement du fichier

16. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Exemple & Démo

17. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015

18. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015

19. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Pourquoi utiliser CSR?
JavaScript
HTML
CSS
Debug simplifier
Réduit la charge du serveur
Augmente celle du navigateur
Lent si il y a un grand nombre d’élément à
afficher
Dépend de la vitesse du navigateur
Pas très efficace sur les operations coûteuses
(count)
Dépend du navigateur
Le Js doit être active dans le navigateur
Ne fonctionne pas très bien avec les robot
d’indexation
Ciblage suivant des zones
Ajout de plugins JQuery, Masonry

20. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Exploiter les Content Search Web Part

21. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
CSWP : 3 étapes
Création de la
requête
• OOTB (pas
recommandé)
• PowerShell
Création des
Template
• SharePoint Designer
• Solution VS
Insertion du CSWP +
configuration
• Edit de la page
• Code
• PowerShell

22. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Création de la requête

23. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Création de la requête

24. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Création des Template

25. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Insertion & configuration

26. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Insertion & configuration

27. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Utiliser la Web Part Refinement Panel et
dynamiser vos affichages

28. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Méthodologie
Définition
• Type de variable
• Association avec
les refiners existant
Création dans la
Central Admin
Ajout +
Configuration

29. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Définition

30. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Définition

31. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Création

32. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Création

33. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Ajout + Configuration

34. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Ajout + Configuration

35. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Source
JSlink
 http://fr.slideshare.net/MuawiyahShannak/sharepoint-2013-clientside-rendering-csr-jslink-templates
 https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
 http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html
 http://www.idubbs.com/blog/js-link-and-csr/
CSWP
 http://blogs.technet.com/b/tothesharepoint/archive/2013/02/14/how-to-set-up-a-product-centric-web-site-in-
sharepoint-2013.aspx
D’autres présentations ERYEM
 http://fr.slideshare.net/STOUMI?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview

36. 2SeeU-Bonne pratiques de personnalisation SharePoint Online Nora EL MORSLI - 8/10/2015
Merci pour votre attention