1. aOS Meetup
19/03/2020
Etendez les possibilités
de Microsoft 365 avec
les composants PnP
Max DUCA
Monaco Digital
Consultant M365
Jeff ANGAMA
Monaco Digital
Consultant M365

2. 2
Jeff ANGAMA
~10 ans d’expérience
Consultant Microsoft 365 & SharePoint On Premise
(Déploiement & Gouvernance, Programmation & Architecture)
Blog : https://jeffangama.wordpress.com
Twitter : @jeffangama
Linkedin etc : https://about.me/jeff.angama

3. 3
Max DUCA
~10 ans d’expérience
Consultant M365 & SharePoint On Premise
(Déploiement & Gouvernance, Programmation & Architecture)
Twitter : @_maxduca
Linkedin : https://www.linkedin.com/in/max-duca-b6808350/

4. Sommaire
1. Introduction à PnP
2. Cas d’usages et démo
• Créer un intranet depuis un modèle + Webpart Anniversaire
• Appliquer un thème
• Application de gestion d’opportunités
• Appliquer un modèle de site
3. Conclusion
4

5. 5
Introduction

6. PnP ? Késako ?
6

7. Un peu d’histoire, le partage au cœur de la
communauté
• Les développeurs et administrateurs ont commencé a partagé de
l’info sur SharePoint via Blog puis GitHub
• Des professionnels animent des conférences
=> Microsoft & MVP fédère la communauté PnP

8. PnP ? Pour qui ?
Pour les utilisateurs métiers avancés
• Des format de vues et colonnes avancées
• Avoir des exemples de sites intranet
• Formation à SharePoint
Pour les développeurs
• Déployer des structures de site, liste. Déployer entre environnements
• Mettre en place des widgets (webpart avec SharePoint Framework)
• Des applications Teams
• Des format de vues et colonnes avancées
Pour les administrateurs M365
• Déployer des structures de site, liste. Déployer entre environnements
• Administrer Microsoft 365 (Office CLI)
8
Cette photo par Auteur inconnu est
soumise à la licence CC BY-SA
Admin
Power User
Dev

9. Exemples
• Initier un intranet depuis des modèles
• Trouver des WebPart et du code
• Script de création de site pour les créer en masse
• Personnaliser les vues et colonnes SharePoint
• Simplifier le développement
• Documentation d’utilisation de SharePoint (content type etc.)

10. Présence sur
le web
• Twitter @m365pnp
• Github
https://github.com/pnp
• Youtube
• Site répertoriant toutes les
initiatives
https://pnp.github.io/
10

11. 11
Pour les développeurs

12. Ayons un aperçu
Intranet Lookbook – Installons un intranet en 5min
Composants Widget (Webparts SPFX)
Column Formatting & View Formatting
Tapez sur google : « view formatting jeff angama » ou « column formatting jeff
angama »
12

13. SharePoint LookBook + Provisionning
https://lookbook.microsoft.com/

14. Création d’un site à partir d’un modèle

15. 15
Cas d’utilisations et
démo

16. 16
Déployer rapidement
un Intranet avec PnP

17. Imaginons…
Nous sommes une société et nous souhaitons
mettre un Portail pour donner un point
d’information unique à nos employés
Dans cet intranet nous souhaitons afficher
l’organigramme
Afficher les anniversaires
Afficher des documents avec un aperçu particulier
Appliquer cet aperçu sur d’autres autre service

18. SPFx Tour
sample
WebPart
https://github.com/pnp/sp-dev-fx-
webparts/tree/master/samples/react-tour-pnpjs

19. Démo
https://github.com/pnp/sp-dev-list-
formatting/tree/master/view-samples/birthday-format

20. Exemple de mise en forme de colonne : Revue
Documentaire Qualité
Executer un flux PowerAutomate avec un lien + icone :
https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-start-flow-conditionally
Document A.docx
Document B.docx
Document C.docx
user1
user2
user1

21. Appliquer un
Thème aux
couleurs de
l’entreprise

22. Astuce pour
l’Authentification
SP Online

23. SPFx
Solution
https://github.com/pnp/sp-dev-
solutions/tree/master/solutions/LeadsLOBSolution

24. 24
Powershell - Pnp

25. Objectifs
• Automatiser la création de sites
• Exemple : créer un site projet avec un theme, bibliotheque, onenote
• Copier des listes
• Déployer des listes / bibliothèques d’un environnement à un autre

26. Appliquer des modèles de sites
Get-
PnPProvisioningTemplate
En sortie : fichier Xml
Apply-
PnPProvisioningTemplate
Admin

27. Créer des types de contenus / colonnes
Add-PnPContentType -Name $contentTypeNameActions -Description "Action Register" -Group $customGroup -
ParentContentType $itemCt
#Add Columns to CT
Add-PnPFieldToContentType -Field "ProductLine" -ContentType $contentTypeNameActions
#Columns
Add-PnPField -Group $customGroup -DisplayName "Gate" -InternalName "Gate" -Required -Type Choice
Add-PnPField -Group $customGroup -DisplayName "Action ID" -InternalName "ActionID" -Required -Type Text
Add-PnPField -Group $customGroup -DisplayName "Phase" -InternalName "Phase" -Required -Type Choice
Add-PnPField -Group $customGroup -DisplayName "Findings" -InternalName "Phase" -Required -Type Choice
AdminDev

28. Créer une colonne date seulement (sans heure)
$fieldTitle = "Target Date"
$fieldInternalName= "targetDate"
$guid = [guid]::NewGuid()
cm_Add-PnpField-DateOnly $fieldTitle $fieldInternalName $guid $customGroup
function cm_Add-PnpField-DateOnly($fieldTitle,$fieldInternalName,$guid,$fieldGroup){
$targetDate = '<Field Type="DateTime" DisplayName="'+$fieldTitle+'" Required="FALSE" EnforceUniqueValues="
FALSE" Indexed="FALSE" Format="DateOnly" Group="' + $fieldGroup +'" FriendlyDisplayFormat="Disabled" ID="{'+$g
uid+'}" SourceID="{'+$guid+'}" StaticName="'+$fieldInternalName+'" Name="'+$fieldInternalName+'"></Field>'
Add-PnPFieldFromXml $targetDate
}
AdminDev

29. 29
CONCLUSION

30. Conclusion
Utilisateurs avancés
• Votre besoin a déjà peut être été développé, vérifier les
ressources PnP
Développeurs / Administrateurs M365
• Se tenir à jour via le youtube et le compte twitter
• Contribuer à l’aventure PnP
1. Documentations pour les administrateurs SharePoint
2. Proposer des composants

31. 2 choses à
retenir
• https://pnp.github.io/
• Sharing is caring

32. Liens utile
• Exemple SharePoint Online Out-Of-Box:
• https://provisioning.sharepointpnp.com/
• https://lookbook.microsoft.com/
• Thème:
• Color Picker
• UI Fabric Theme Designer
• Ajouter l’extension SP Chrome Editor pour
les développeurs

33. 33
« Work smarter not harder » - Allen F. Morgenstern Industrial Engineer
MERCI POUR VOTRE ATTENTION