Vous êtes sur la page 1sur 332

Développement dans SharePoint Online et Office 365

Sommaire
Développement dans SharePoint Online et Office 365
Une démarche globale des différentes possibilités de développements possibles dans Office
365 et en particulier dans SharePoint Online.Une approche progressive de l'éxtérieur vers
l'intérieur de la plateforme.

Contenu Page
INTRO Introduction au stage de développement SharePoint Online 4
Presentation, Prérequis et matériel necessaire
1 Présentation des possibilités de développement dans Office 365 9
Introduction à Office 365 et aux services de la plateforme.Introduction à
SharePoint Online et aux nouveautés.La Plateforme de développement et les
outils.Les modèles de développement.
2 Les Modèles Objet Clients de SharePoint 59
Présenter les API Clients,.NET et ECMAScript pour la Programmation à distance
des API SharePoint Online
3 Développement coté Client - Navigateur 82
SPFx, CSOM, Framework Dialog, Deploiement de solutions
4 Manipulation des Données SharePoint 127
Présenter les API de manipulations des données : CAML, REST/JSON et
REST/OData, Graph
5 Personnalisation de site et de pages 154
Personnalisation de site et outils de conception.Theme de site, Classification des
sites et expérience utilisateur.Personnalisation d'une page avec l'expérience
moderne.
5.1 Personnalisation de l'expérience "Moderne" 161
Personnalisation de theme, Mise en place de conception de site et de script.
Méthodes de déploiement et de mise à disposition.
5.2 Personnalisation de l'expérience Classique 177
Création de thèmes, Personnalisations CSS, Office UI Fabric, Conception de mise
en page et de page Maitre avec le Gestionnaire de Conception.
6 Développement de Compléments SharePoint 197
Architecture et possibilités de développementComposants disponibles et options
de conceptionDéveloppement de solutions et déploiement dans SharePoint
7 Développement de compléments du fournisseur 217
Architecture et configuration du complémentCréation de solutions distantes qui
manipulent SharePointDéveloppement de récepteurs d'évènement
8 Déploiement et Installation de Compléments 225
Déploiement et publication dans un catalogueDéploiement dans le SharePoint
StoreDéploiement dans un catalogue d'entrepriseMise à jour de compléments

Stéphane LEENHARDT - SupMicro tous droits 2019 1


Développement dans SharePoint Online et Office 365
9 Développement de WebPart SharePoint Online 233
Présentation des WebPart, méthodes de développements et ajouts de fonctions
étendues
10 Conception de Workflows 275
Introduction aux Workflows, Méthodes de Conception de Workflow pour
SharePoint, Conception de Workflow SharePoint DesignerConception avec Flow
dans Office 365
11 Le PowerShell dans Office 365 304
Introduction aux modules PowerShell pour SharePoint OnlineLes possibilités de
développement dans les services Office 365
AN1 TypeScript 310
Syntaxe de base et liens pour approfondir le langage.
AN2 PowerShell et SharePoint 315
Introduction à PowerShell : ce qu'il apporte et comment il peut interagir avec
SharePoint
AN3 Introduction à JQuery 321
Comprendre l'intérêt et la démarche de développement JQuery
AN4 Rendus coté-client 328
Syntaxe du CSR SharePoint.
AN5 Cartographie Site Moderne 330
Les zones d'un site moderne dans la conception de thème.

Stéphane LEENHARDT - SupMicro tous droits 2019


Ce document s’inscrit dans le cadre d’un stage de formation.
Sa lecture seule, sans les commentaires et les exercices associés, présente un intérêt plus
restreint.

La loi du 11 mars 1957 n'autorisant aux termes des alinéas 2 et 3 de l'article 41, d'une part,
que les "copies ou reproductions strictement réservées à l'usage privé du copiste et non
destinées à une utilisation collective" et, d'autre part, que les analyses et les courtes
citations dans un but d'exemple et d'illustration, "toute représentation ou reproduction
intégrale, ou partielle, faite sans le consentement de l'auteur ou de ses ayants droit ou
ayants cause, est illicite" (alinéa 1er de l'article 40).

Cette représentation ou reproduction, par quelque procédé que ce soit, constituerait donc
une contrefaçon sanctionnée par les articles 425 et suivants du Code pénal.

Pour toute demande concernant ce produit veuillez-vous adresser à SupMicro :


15 B BD GOUVION SAINT CYR 75017 PARIS
Courriel : sleenhardt@supmicro.com

⚠ Ce document est la propriété exclusive de la société SupMicro.


2 Stéphane LEENHARDT - SupMicro tous droits 2019
Développement dans SharePoint Online et Office 365

SupMicro tous droits réservés

Stéphane LEENHARDT - SupMicro tous droits 2019 3


INTRO Introduction au stage de développement SharePoint Online

Introduction au stage de developpement


SharePoint Online
I.Introduction
SharePoint est une plateforme riche en fonctionnalités qui évolue depuis 2001.
• Les versions depuis 2001 : SharePoint 2001 utilisant des pages ASP et des composants COM,
SharePoint 2003 et Windows SharePoint Services 2.0 première version basée en partie sur .NET et
la version SharePoint 2007 et WSS 3.0 entièrement développée en .NET.
• La version SharePoint 2010 utilisant le FrameWork .NET 3.5 et toutes ses nouveautés (WCF et WF).
• La version SharePoint 2013 qui s’appuie sur le Framework .NET 4.5 et propose une nouvelle
ergonomie simplifiée pour construire des applications Web répondant aux besoins les plus vastes
des entreprises.
• La version SharePoint 2016 qui d’une façon générale rend plus mature toutes les nouveautés
apportées dans la version 2013.
• La version SharePoint 2019 qui fusionnera les nouveautés de SharePoint Online.

SharePoint Online est le premier service cloud de la plateforme Microsoft qui est apparu en 2010.

Les développements dans SharePoint font appel à plusieurs compétences qui ne sont pas uniquement des
compétences de développeur, mais d’administration et d’infrastructure.
On parle de Développement de Solutions car les domaines techniques sont larges :
- Connaissance de l’infrastructure des réseaux Windows Serveur (Active Directory, DNS, SMTP, POP,
Sécurité et stratégies)
- Les formats XML, l’architecture Web, les S.O.A, HTML, CSS, R.I.A
- Le Framework .NET 4.6, ASP.NET, WCF 5.6, Worflow Manager, l’utilisation de SharePoint et son
Administration
- La programmation client : JavaScript, CSS, DHTML et JQUERY, React, TypeScript, Node.js,
Angular,etc…
- Les API propres à certains projets
Prise de notes

4 Stéphane LEENHARDT - SupMicro tous droits 2019


INTRO Introduction au stage de développement SharePoint Online

Pour ces raisons le cours de développement SharePoint requiert un certain nombre de


prérequis pour être à l’aise.

II.Compétences requises

Le cours de développement SharePoint requiert une bonne expérience dans le développement


d’applications même si aujourd’hui en fonctions des développements que l’on vous demandera ces
compétences changent en fonction du type de développement SharePoint que vous ferez.

• Développement Serveur, riche


Application riche ou Web qui dialogue avec SharePoint Online ou Application du fournisseur :
Les Framework de .NET tels que : LINQ, ADO.NET, ASP.NET, WCF, WPF, Windows Forms, Entity
Framework, Workflow Manager, etc….

• Développement Client, léger


Applications légères s’exécutant dans un navigateur (on parle de développement client SharePoint) dans
ce cas les technologies peuvent être tous les Framework JavaScript bien que certains soient plus
appropriés pour SharePoint.

Pour être à l’aise dans ce stage les connaissances suivantes sont des prérequis :
➢ Bonne connaissance du langage C# et de la programmation ASP.NET : PostBack, Contrôles de
Validation et web.config et des Web Services WCF
➢ La programmation HTML 5, CSS3 et JQuery devient indispensable dans SharePoint
➢ Connaissance d’ADO.NET ou Entity Framework et des liaisons aux bases de données
➢ Connaissance des Framework client : Node.js, Angular, React, TypeScript
➢ Connaissances fonctionnelles de SharePoint et d’Office 365
➢ Connaissances et expériences dans l’utilisation et l’administration de SharePoint!

Pour se sentir à l’aise dans le stage ces connaissances sont indispensables.


Si ce n’est pas le cas, n’hésitez pas à faire appel….

FrameWork .NET
Il est utile pour tous les développements clients et Riche et pour les applications du fournisseur et
comprend les domaines suivants :

• Langage C#
Programmation des collections, Application Console, itérations, Gestion des Erreurs, Génériques,
Délégués et gestion des événements, l’instruction using et la gestion des ressources, Programmation de
System.Xml.Linq.

• Windows Forms ou WPF


Développement d’applications Windows Simples : ListBox, ListView, TreeView
Stockage des paramètres dans le fichier de configuration (Settings) de l’application

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 5


INTRO Introduction au stage de développement SharePoint Online

• ASP.NET
Architecture ASP.NET, PostBack, Utilisation des paramètres du fichier web.config d’ASP.NET, Utilisation
des contrôles de validations ASP.NET, Développement de contrôles utilisateur ASP.NET, Liaisons aux
données (DataBinding ASP.NET sur des collections). Selon l’éditeur Microsoft, une expérience de 1 an est
requise en développement ASP.NET pour pouvoir prendre le recul nécessaire et être totalement
opérationnel à la suite de ce stage de développement.

Langage JavaScript, CSS et JQuery

La programmation JQuery devient un élément indispensable dans le développement d’applications


SharePoint et en particulier pour les développements vers SharePoint OnLine et Office 365.

IIS
Configuration et gestion d’applications ASP.NET, paramètres des pools d’applications IIS, entête d’hôtes,
configuration des mécanismes d’authentification IIS.

Visual Studio
Connaissance de l’environnement de Visual Studio, des fenêtres (Explorateur de Solutions, Gestionnaire
de Configuration, Propriétés de Projets, Paramètres d’applications)

Azure
L’infrastructure Azure peut être utilisée pour offrir une solution intégralement Cloud liée à Office 365 et
SharePoint Online, pour les services métiers de l’entreprise et les développements spécifiques.

III. Prérequis logiciels du Cours : SharePoint Online Développement


Matériel

La nouveauté dans le développement Online est que la puissance requise sur le poste du développeur
devient très faible, auparavant il fallait vérifier les prérequis du produit qu’il fallait installer en local.
Aujourd’hui avec le développement Online c’est essentiellement les prérequis des outils de
développement utilisés qui feront la capacité matérielle requises.

Pour Visual Studio il est conseillé :

• Processeur 1,8 GHz minimum. Processeur double cœur ou supérieur recommandé


• 2 Go de RAM ; 4 Go de RAM recommandé (2,5 Go minimum si exécution sur une machine virtuelle)
• Espace disque : jusqu’à 130 Go d’espace disponible, selon les fonctionnalités installées ; les
installations standard nécessitent entre 20 et 50 Go d’espace libre.
• Vitesse du disque dur : pour améliorer les performances, installez Windows et Visual Studio sur un
disque SSD.
• Carte vidéo prenant en charge une résolution d’écran minimale de 720p (1280 par 720) : Visual
Studio fonctionne mieux avec une résolution WXGA (1366 par 768) ou supérieure.

Prise de notes

6 Stéphane LEENHARDT - SupMicro tous droits 2019


INTRO Introduction au stage de développement SharePoint Online
Infrastructure Système

Il suffit de disposer d’un OS client et il n’est plus nécessaire d’avoir une version serveur pour pouvoir
développer des composants SharePoint Online :

• Windows 10 version 1507 ou ultérieure : Famille, Professionnel, Éducation et Entreprise (les


versions LTSC et S ne sont pas prises en charge)
• Windows Server 2016 : Standard et Datacenter
• Windows 8.1 (avec mise à jour 2919355) : Core, Professionnel et Entreprise
• Windows Server 2012 R2 (avec mise à jour 2919355) : Essentials, Standard, Datacenter
• Windows 7 SP1 (avec les dernières mises à jour Windows) : Familiale Premium, Professionnel,
Entreprise, Intégrale

Logiciels clients

• Microsoft Office (>2010), Professional Plus, Office Pro Plus (Outlook, Word, Excel, InfoPath)
• Visio 2013 ou 2016.
• Project 2013 ou 2016 pour ceux qui doivent concevoir dans Planner par exemple

Logiciels pour la conception et le développement

• SharePoint Designer 2013 qui est disponible gratuitement en téléchargement sur le site Microsoft.
• Visual Studio Code : pour tous les développements ciblant la nouvelle expérience

IV. Définition/Abréviations

LCID : Language Control Identifier, code langue propre à Microsoft (1036 Français, 1033 anglais)
GUID : (Prononcé GouID) Global Unique Identifier, est un nombre unique de 128 bits.
Ruche :(en anglais Hive) dossier contenant les fichiers physiques de SharePoint : plus aucuns accès
disponible dans SharePoint Online.
Base de contenu : base de données SQL Serveur contenant les contenus des sites SharePoint
Base de configuration : base de données SQL Serveur contenant les paramètres de configurations définis
en administration centrale.
Base d’applications de services : ce sont des bases de données propres pour chaque application de
service. Les paramètres de l’application sont stockés dans ces bases. Selon le nombre d’applications de
services qui sont configurées leur nombre peut évoluer.
R.S.E : Réseau Social d’Entreprise permet de faire communiquer et participer de façon interactive tous les
collaborateurs d’une société.
Add-In : traduit par Complément mais dans certains cas on gardera le nom de Add-In. On parle aussi
d’Application en lieu et place d’Add-In.
Tenant : Ce terme est traduit par Locataire, et désigne une infrastructure Cloud pour laquelle il faut un
abonnement un peu comme un bail dans une habitation. Le Tenant est le locataire d’une infrastructure
cloud.
OnPremise : il s’agit de serveur interne à une infrastructure et présent physiquement ou localement. On
accède aux serveurs OnPremise par une connexion au réseau local de l’entreprise et il n’est pas
nécessaire d’être connecté à internet pour les atteindre.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 7


INTRO Introduction au stage de développement SharePoint Online
Client : attention ce terme peut définir votre environnement Office 365 dans certains cas il devient le
client de votre application.
CRUD : Create Record Update Delete (opérations de base sur un élément)

Prise de notes

8 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

Préséntation dés possibilités dé


dévéloppéménts dans Officé 365
Introduction à Office 365 et aux services de la plateforme
• Introduction et historique
• Présentation des composants d’Office 365

Introduction à SharePoint online et aux nouveautés


• SharePoint : les grandes fonctionnalités
• Les nouveautés de SharePoint Online
• Architecture et terminologie SharePoint
• Les niveaux d’administration de SharePoint

Plateforme de développement et les outils associés


• La plateforme de développement
• Les outils pour le développement et la conception SharePoint
• Les outils utiles pour le développement SharePoint

Les Modèles de développement et technologies associées


• Le modèle d’Add-In SharePoint
• Les modèles de programmation client
• Le Framework SPFx
• De nouvelles façons de concevoir et penser les affichages
• Les changements importants en synthèse
• Un environnement de développement pour quels types de
développement ?

Focus sur les développements Composites


• Conception de solutions InfoPath
• Focus sur PowerApp
• Présentation de SharePoint Designer

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 9


1 Présentation des possibilités de développement dans Office 365

I. Introduction à Office 365 et aux services de la plateforme.

1) Introduction et historique

Microsoft Office 365 est un service de type SaaS (Software as a Service) qui offre un ensemble complet
d’outils logiciels et de services à partir d’un serveur Cloud de Microsoft. Ce service en ligne est sur
abonnement (annuel et mensuel) et inclut la dernière version de la suite bureautique Microsoft Office,
Exchange Online pour la messagerie, SharePoint Online pour la collaboration, Skype Entreprise pour les
communications unifiées et une version allégée de la suite bureautique Microsoft Office Web Apps.

Office 365 est un espace de travail centralisé sur Internet vous permettant de travailler à plusieurs dans
un environnement sécurisé et depuis n’importe quel endroit à partir d’une connexion Internet. Toutes les
applications et services proposés par Office 365 ont été conçus pour fonctionner dans cet environnement
collaboratif.

Aucune installation ni intégration en amont est nécessaire, à l’exception d’une connexion Internet et d’un
navigateur Web. Ce service étant hébergé sur des serveurs Microsoft, la maintenance et la mise à jour des
logiciels (tous les 90 jours) sont gérées directement par Microsoft néanmoins, les administrateurs des
comptes Office 365 disposent d’outils d’administration permettant de mettre en place de nouveaux
comptes utilisateurs, de contrôler l’accès aux fonctions et de voir l’état de tous les services et outils
d’Office365.

• Historique de la plateforme

28 juin 2011 La première version et à cette époque le premier service disponible a été SharePoint
Online en version SharePoint 2010.
février 2013 La plateforme évolue vers SharePoint 2013 et de nouveaux abonnements voient le
jour (Small Business Premium, MidSize Premium et Prop Plus, Home Plus).
mars 2013 l’intégration de Yammer (acquises en 2012) et une connexion unique avec la
plateforme Microsoft
juillet 2013 l’apparition de Power BI (Data mining, Power Query et geovisualisation avec les
données Bing Maps)
Juin 2014 Le volume de stockage OneDrive passe de 20 Go à 1 To
Juin 2016 Mise en place de Planner (concurrent de Trello)

Prise de notes

10 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
L'architecture côté Cloud et côté client.

Les différents services Office 365 sont installés dans le "Cloud", c’est-à-dire hébergé sur des serveurs
appartenant à Microsoft et mettant à la disposition des utilisateurs les services qui sont directement
accessible à partir d’un navigateur Internet.
Microsoft propose également des versions Bureautique (ou Desktop) des logiciels que l’on trouve aussi
sous la forme de services.

Les régions disponibles dans le monde pour la localisation des données

Depuis mars 2018, les Data Center français sont ouverts (3 Datacenter à Paris et 1 à Marseille) avec un
plan de migration des données Office 365 vers la France à partir de septembre 2018.

N.B : auparavant les données étaient en Irlande avec une sauvegarde en Hollande.

Les offres disponibles :


Pour les entreprises de moins de 300 collaborateurs (PME) :

Offre Cout HT / mois Services et applications


/ utilisateur
Office 365 Business 8,80 € Inclus la suite Office client
Office 365 Business Essentials 4,20 € Pas d’application Office, mais Messagerie disponible
Office 365 Business Premium 10,50 € Application Office et Messagerie

Pour les entreprises quel que soit leur taille, les Offres Entreprises sont ProPlus, E1, E3 et E5 :
(Cout H.T par utilisateur / mois)
Office 365 Pro Plus Office 365 E1 Office 365 E3 Office 365 E5
12,90 € 6,70 € 19,70 € 34,40 €

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 11


1 Présentation des possibilités de développement dans Office 365

Office 365 Office 365 Office 365


Office 365 ProPlus
Entreprise E1 Entreprise E3 Entreprise E5
Nombre maximal
Illimité Illimité Illimité Illimité
d'utilisateurs
Installations par
5 Illimité 5 5
utilisateur
Usage commercial
Oui Oui Oui Oui
autorisé ?
Tablettes et 5 tablettes et 5 5 tablettes et 5 5 tablettes et 5
Illimité
smartphones smartphones smartphones smartphones
1 To par Illimité (sur Illimité (sur
Stockage Onedrive 1 To par utilisateur
utilisateur demande) demande)
Hébergement
Non 50 Go 50 Go 50 Go
courrier
Logiciels toujours à
Oui Oui Oui Oui
jour
Support Microsoft Oui Oui Oui Oui
Logiciels
Word Oui Non Oui Oui
Excel Oui Non Oui Oui
PowerPoint Oui Non Oui Oui
OneNote Oui Non Oui Oui
Outlook Oui Non Oui Oui
Publisher Oui Non Oui Oui
Access Oui Non Oui Oui
Bookings Non Non Non Non
Services
Skype Entreprise Oui Oui Oui Oui
SharePoint Non Oui Oui Oui
Exchange Server Non Oui Oui Oui
Teams Non Oui Oui Oui
Power Bi Pro Non Non Non Oui
Yammer Oui Oui Oui Oui

2) Présentation des composants d’Office 365


Versions Bureautiques des applications Office 365

Prise de notes

12 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
- La suite Office 2013/2016 comprenant : Word, Excel, PowerPoint, OneNote, Access, Publisher,
Outlook, Skype Entreprise, OneDrive Entreprise.
- Des applications disponibles sur le Store : Teams, PowerApp

Des applications Office disponibles pour les smartphone (Android et IPhone) pour tous les services Office
365 : Word, Excel, PowerPoint, OneNote, Flow, OneDrive, Teams, PowerApp, SharePoint entres autres
sont disponibles sur smartphone.

Présentation des applications Office Web Apps


Les applications proposées par Office 365, nommées Office Web Apps, s’exécutent uniquement à partir
d’un site Internet. Ces applications ne sont donc pas installées sur l’ordinateur de l’utilisateur mais sur un
site distant. Leur maintenance et mise à jour ne sont donc plus à la charge de l’utilisateur, elles
s’effectuent par l’équipe technique de Microsoft.

Word Web App Version en ligne, ne permet pas d’afficher des images d’en-tête entres autres
Excel Web App Version en ligne, ne permet pas de faire entres autres des macros
PowerPoint Web App Outil de création de présentations animées, de diaporamas.
OneNote Web App Outil de gestion de notes.

Evolutions de la plateforme depuis 2015

Nouveautés 2015
Sway Outil de création de présentations (alternative à PowerPoint), orienté Web :
Intégration de vidéo YouTube, liens Twitter… Disponible sous Windows 10 depuis
décembre 2015
Delve "Fédérateur de contenu" : Permet de rechercher, d'afficher et de partager des
informations se trouvant sur OneDrive Entreprise ou sur les Sites Office 365
(SharePoint On Line)
Yammer Réseau social d'entreprise privé. Permet de partager des informations entre
équipe (projets)
Vidéo Permet de charger et diffuser des vidéos : C'est un fait un site SharePoint dédié à
cette fonctionnalité : Remplacé par Stream
Nouveautés 2016-2017
PowerApps Outil de création d'application utilisant les données les services Excel, les profils de
personnes Office 365, les listes SharePoint etc…
C’est le successeur d’InfoPath
Flow Outil de création de Workflow permettant d'automatiser l'enregistrement et la
manipulation des données entre différents environnements (exemple :
enregistrement des pièces jointe dans OneDrive, Mail envoyé en cas d'ajout d'un
enregistrement dans une liste, etc…
Stream Outil d'enregistrement, de diffusion et de partage de vidéos. Amené à remplacer
à terme Vidéo
Teams Espace de travail et de communication au sein d'Office 365. Permet de rassembler
des utilisateurs, des documents, des échanges dans un seul emplacement. L'accès
de ces différents éléments est simplifié et immédiat pour les utilisateurs du
groupe.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 13


1 Présentation des possibilités de développement dans Office 365
Remplace Planner.
Dynamics 365 Version simplifiée de l'application Microsoft Dynamics. Permet d'utiliser les
données clients issues d'application tiers de CRM. Fonctionne également avec
PowerApps
Forms Outil de création simple de formulaire pour des sondages
Nouveautés 2018
Administration Nouvelle interface d’administration
SharePoint L’interface moderne devient l’interface par défaut à la place de l’expérience
classique.

II. Introduction à SharePoint online et aux nouveautés

1) SharePoint : Les grandes fonctionnalités

L’étude des fonctions qu’apportent SharePoint peut s’articuler autour de 7 grands domaines :

• Portail et collaboration (Sites) : Capacités de base qui permettent l’interaction des employés, des
partenaires et des clients dans l’entreprise et à l’extérieur (partage d’information et travail en équipe)

Prise de notes

14 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

• Social et Communautés : SharePoint fournit plusieurs fonctionnalités qui permettent aux utilisateurs
d’être en relation avec d’autres utilisateurs, de partager des nouvelles et de l’information et de
construire des communautés autours d’intérêts communs.
Ces fonctions sont désormais prises en charge par Yammer et Delve
• Enterprise Content Management: La facilité pour la création, vérification et publication de contenu
qu’il soit documentaire ou web. SharePoint inclut la gestion documentaire, des archives et la gestion
du contenu web, des workflows, et des outils pour l’eDiscovery et la conformité.

• Web Content Management : SharePoint fournit plusieurs fonctions de Content Management System
(CMS) qui permettent de gérer, organiser le contenu Web d’une entreprise.

• Recherche : La possibilité pour l’utilisateur de facilement trouver l’information qu’elle soit dans listes,
sites ou des systèmes externes ou sources de données (partage, site web, ou application métier)

• Business Connectivity Services : Permet l’intégration des données à partir de systèmes externes dans
SharePoint mais aussi dans les applications Office.

• Business Intelligence (Insights) : la possibilité de fournir et de partager de l’information critique pour le


succès de l’entreprise, mais aussi de transformer les données brutes en données exploitables et
synthétiques. SharePoint fournit des outils permettant de synthétiser les données à partir de sources
tels qu’Excel, PerformancePoint mais aussi SQL Serveur Analysis Services ou SQL Serveur Reporting
Services.
Ces fonctions sont désormais prises en charge par Power BI
• Application Composite : La possibilité de créer des solutions personnalisées sans requérir l’expertise
de services informatiques dans chaque demande.

2) Les nouveautés de SharePoint Online

Les nouveautés apportées à partir de 2016 dans la plateforme SharePoint Online concernent
essentiellement 2 thématiques : L’experience d’utilisation et les limites du produit.

En introduction il est important d’indiquer que la plateforme SharePoint online évolue


continuellement et que même si l’on peut évoquer les principales nouveautés à ce jour, il y en a
toujours d’autres qui arriveront au fur et à mesure.

L’expérience d’utilisation

Apparition de la nouvelle Expérience


La nouvelle expérience n’est disponible que dans SharePoint Online (et pas dans SharePoint On-Premise
en version 2016) et apporte une nouvelle interface pour créer des sites ainsi qu’une expérience
d’utilisation différente de la classique.
(Ces deux interfaces seront comparées par la suite.)

Dans tous les cas on trouve un bandeau supérieur dans l’interface appelé « Barre de suite »:
L’App Launcher pour lancer des applications et le menu de Paramètres

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 15


1 Présentation des possibilités de développement dans Office 365

Il y a 2 méthodes pour créer un site SharePoint et en fonction de la méthode utilisée l’expérience


d’utilisation du site ne sera pas la même :

Avec l’expérience classique, c’est l’administrateur global SharePoint qui doit créer le site en allant
dans le centre d’administration SharePoint :
A partir de l’App Launcher du menu :
Administrateur

On navigue dans le centre d’administration


SharePoint :

Ce qui donne accès la page : Collections de sites

Les modèles disponibles sont ceux de l’experience classique, on trouve :


Le site d’équipe (experience classique) et le site du développeur qui va nous permettre de tester et
d’ajouter des nouvelles applications ou Add-In.

Le centre d’administration bénéficie lui aussi d’une nouvelle interface d’administration :

Prise de notes

16 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

Cette nouvelle interface permet d’afficher les sites SharePoint avec l’expérience classique et moderne
alors que l’ancienne version d’administration n’affiche que les sites avec l’expérience classique.

Pour créer un site avec la nouvelle expérience, un utilisateur autorisé peut directement créer un site
sans avoir à le demander à un administrateur global SharePoint :

On navigue directement sur l’application


SharePoint dans l’App Launcher :

On trouve un bandeau qui permet de Créer un site (d’équipe ou de communication avec nouvelle
expérience) ou une publication d’actualités pour un site existant qui nécessite ensuite d’avoir une page
de site (avec nouvelle expérience pour afficher les actualités).

Limites principales repoussées

Base de contenu
Avant le maximum était de 200 GB par base de données, aujourd’hui on passe en TO.

Nombre de collections de sites par base


Avant on était limité à 5000 collections de sites par base de données, aujourd’hui la limite est de 100 000 !

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 17


1 Présentation des possibilités de développement dans Office 365
Limite d’affichage d’éléments
La limite des 5000 éléments dans les listes a été repoussée en créant automatiquement des index.

Taille maximale des fichiers


Il est désormais possible d’ajouter des fichiers de plus de 2 GO, avec une taille maximale de 25 Go.

Nombre de fichiers indexés pour la recherche


Avant maximum de 10 millions de fichiers par partition de recherche, passe à 500 millions !

Nom de fichier autorisé


On peut ajouter des caractères spéciaux dans les noms de fichiers comme : « ~#%&{}+ » mais pas plus de
260 caractères.
• Reste interdit : " * : < > ? / \ |
• Les noms suivants : AUX, PRN, NUL, CON, COM0, COM1, COM2, COM3, COM4, COM5, COM6,
COM7, COM8, COM9, LPT0, LPT1, LPT2, LPT3, LPT4, LPT5, LPT6, LPT7, LPT8, LPT9
• Aucune extension de fichier n’est bloquée dans SharePoint Online

Fonctions Dépréciées

Acces Service est déprécié il faut privilégier l’utilisation de PowerApp.

Ce qui est prévu dans SharePoint 2019 sera également appliqué sur SharePoint Online :
https://docs.microsoft.com/fr-fr/sharepoint/what-s-new/what-s-deprecated-or-removed-
from-sharepoint-server-2019

Services InfoPath
Comme nous l’avons annoncé sur le blog Microsoft 365, l’utilisation des Services InfoPath est déconseillée et les clients sont
invités à explorer les alternatives proposées pour remplacer cette fonctionnalité. Les Services InfoPath continueront d’être pris
en charge, mais leur utilisation est déconseillée avec SharePoint Server 2019 (Préversion publique).
Il n’y aura pas de nouveau client InfoPath fourni avec cette version. Microsoft garantit que le client InfoPath 2013 fonctionne
avec SharePoint Server 2019 (Préversion publique) jusqu’au terme de la politique de support client (2026). Le client InfoPath
2013 ne sera plus pris en charge au-delà de cette période.

Service web Listes


Les points de terminaison SOAP suivants dans le service web Listes dépendent de Microsoft Sync Framework, qui était
nécessaire à la prise en charge du client de synchronisation Groove. Le client de synchronisation Groove étant devenu une
fonctionnalité déconseillée, l’utilisation de ces points de terminaison SOAP est également devenue déconseillée

PerformancePoint Services
PerformancePoint Services dépend considérablement de Microsoft Silverlight, une technologie qui ne sera plus prise en charge
à compter du 12 octobre 2021. PerformancePoint Services continuera d’être pris en charge, mais son utilisation sera
déconseillée avec SharePoint Server 2019 (Préversion publique). Nous recommandons aux clients de remplacer
PerformancePoint Services par Microsoft PowerBI.

SharePoint Designer
Il n’y aura pas de nouveau client SharePoint Designer fourni avec cette version. Microsoft garantit que SharePoint Designer
2013 fonctionnera avec SharePoint Server 2019 (Préversion publique) jusqu’au terme de la politique de support client (2026).
SharePoint Designer 2013 ne sera plus pris en charge au-delà de cette période.

Solutions bac à sable (sandbox) basées sur du code


Comme annoncé dans le Centre des développeurs Microsoft Office et les articles précédents, l’utilisation des solutions bac à
sable (sandbox) basées sur du code est déconseillée dans SharePoint Server 2013 et elles ont été supprimées dans SharePoint

Prise de notes

18 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
Online. Après mûre réflexion, nous avons décidé de supprimer également la prise en charge des solutions bac à sable (sandbox)
basées sur du code dans SharePoint Server 2019 (Préversion publique). Nous recommandons aux clients de les remplacer par
des compléments SharePoint qui sont entièrement pris en charge dans SharePoint local et SharePoint Online.

Visio Services – Rendu Silverlight


Visio Services propose 2 options de rendu des diagrammes Visio : Microsoft Silverlight et PNG. La technologie Microsoft
Silverlight ne sera plus prise en charge à compter du 12 octobre 2021. Cela signifie que le rendu Silverlight ne sera plus pris en
charge dans SharePoint Server 2019 (Préversion publique). Visio Services affichera uniquement les diagrammes Visio à l’aide de
la technologie PNG.

Se tenir informé des nouveautés et trouver l’information

Le centre d’aide Office 365 https://support.office.com/sharepoint


Le blog Office 365 / SharePoint https://blogs.office.com/sharepoint/
La feuille de route dans les changements est sans doute le plus intéressant pour tous les
développeurs :
https://products.office.com/en-us/business/office-365-roadmap?filters=sharepoint

Pour chaque catégorie on trouve les dernières nouveautés et la date de mise en place :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 19


1 Présentation des possibilités de développement dans Office 365

Comment avoir de l’avance sur les prochaines évolutions d’une plateforme qui change
constamment :

Microsoft est à l’écoute de son marché et de l’écosystème mais aussi des utilisateurs et dans ce sens il
existe les sites : USERVOICE pour chaque service de la plateforme Office 365.

Le mécanisme est simple : les utilisateurs font des propositions et tout le monde peut voter pour les
demandes : c’est en quelque sorte un système participatif pour demander des nouvelles fonctionnalités.
Il existe différents sites uservoice dédié à un environnement, et lorsqu’une demande retient plus de
5000 votes vous pouvez considérer qu’elle sera sans doute prise en compte prochainement….

Cela vous indique aussi ce qui n’est pas en place, ce qui n’existe pas encore et que l’on peut vous
demander de réaliser : à vous de faire le choix d’un développement ou d’attendre que la fonction arrive
en fonction de la demande.

• Office 365 et l’administration des différents services de la plateforme


https://office365.uservoice.com
• Pour SharePoint
https://sharepoint.uservoice.com/
• Pour teams :
https://microsoftteams.uservoice.com
https://yammer.uservoice.com/ et bien d’autres que l’on peut trouver : recherchez [nom_du_service]
uservoice.

Prise de notes

20 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

Le développeur doit se tenir informé des nouveautés pour ne pas proposer un développement
spécifique qui serait ajouté ou incompatible dans le standard SharePoint !

3) Architecture et terminologie SharePoint

Tout site SharePoint se


trouve forcement dans une
collection de sites.

La collection de sites
débute toujours par le site
Racine.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 21


1 Présentation des possibilités de développement dans Office 365
Structure des Collections de Sites

 Une collection de site partage :

La même portée de recherche, les workflow, les groupes de sécurité, la barre de navigation supérieure et
de lancement rapide, les Type de Contenu de toutes les listes, bibliothèques, les champs de recherche
dans les listes.

 Une collection de site possède : un groupe Administrateurs de la collection de sites, des paramètres
de quota.
 Faire une nouvelle collection de site si : un site demande une recherche propre ou particulière, des
workflows dédiés, Contraintes de sécurité juste pour ce site, Quotas et limites de téléchargements

Au départ : une collection de sites racine / sur une application web qui est gérée par Microsoft dans un
sous-domaine de : sharepoint.com

On ne peut pas changer le domaine en particulier à cause du certificat de sécurité SSL qui est émis par
et pour Microsoft pour le domaine sharepoint.com
Par la suite les collections de sites se trouvent toutes avec l’url /sites/ par défaut que l’on ne peut pas
changer dans SharePoint online.

Le site
Contient des paramètres qui lui sont propres : thème appliqué, administrateur propre, paramètres
régionaux, sécurité propre.

Les éléments de bases d’un site SharePoint :


• Des bibliothèques : Pages ou Documents par défaut. Elles stockent des fichiers (documents Word,
Excel ou autres, rapports, images, formulaires, présentations...).
• Des listes : Calendrier ou Tâches par défaut. Elles stockent l’information et se présentent comme
des tables qui sont personnalisables. Exemple : liste des contacts, tâches, suivis de problèmes,
listes personnalisées...

 Les listes et les bibliothèques sont également appelées applications ou Add-In.

Une bibliothèque de documents est un type de liste spécialisé qui sert à stocker des fichiers et des
dossiers et les colonnes sont utilisées pour stocker des métadonnées sur un document.

Ce qui compte pour savoir si on crée une bibliothèque ou une liste :


Quel est l’élément de départ que l’on souhaite stocker ? Un fichier ou de la donnée ?
Si l’élément de départ est un fichier on ajoute une nouvelle bibliothèque, sinon si on a de la donnée on
ajoute une liste.

Pour le reste, les listes et les bibliothèques sont similaires :


Elles contiennent des colonnes d’informations appelées souvent champs.
On peut définir des colonnes personnalisées pour qu’elles s’adaptent au type de données que l’on
souhaite stocker. On peut trier, filtrer et regrouper des éléments.

Prise de notes

22 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

Fonction Bibliothèque Liste


Pour ajouter un élément Il faut un fichier Il faut de la donnée
Mais on peut Ajouter des nouvelles colonnes à Ajoutez des fichiers joints à une
une bibliothèque ligne de liste
De la même façon Ont des affichages, de la gestion de versions, des types de contenus,
de la sécurité, des stratégies sur les types, etc…

« 2 Expériences d’utilisation qui cohabitent »

Actuellement le site SharePoint peut avoir 2 expériences différentes pour l’utilisateur et qui coexistent :

• L’expérience « classique » ou standard

Elle hérite du passé de SharePoint et même si elle a évolué au fil des versions de SharePoint, elle est
aujourd’hui figée.

• L’expérience moderne :

C’est le futur, et dans la mesure du possible il est recommandé de s’appuyer uniquement sur cette
expérience pour les nouveaux projets.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 23


1 Présentation des possibilités de développement dans Office 365
Terminologie et zones de l’expérience classique
La page d’accueil du site d’équipe est en réalité une page wiki qui permet plus de modifications qu’une
simple page de composants webpart.

App Launcher Ruban Barre de liens supérieure Paramètres

Barre de lancement Rapide Site d'Equipe en Mode Visualisation de Page


ou Navigation Actuelle

Selon la sélection sur le ruban : Parcourir ou Page le ruban disparait pour faire apparaitre la
Barre de lien supérieure :

Ruban en mode Barre de liens supérieure

La barre de lancement Rapide et supérieure peuvent être modifiée directement sans avoir besoin d’aller
dans les paramètres :
Il suffit de cliquer sur : Modifier les liaisons :
Pour pouvoir directement modifier le menu.

 Puis de faire directement changer les menus ou ajouter de nouveaux liens :

Structure du Ruban :
Prise de notes

24 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

Onglet

Groupe Actions Personnalisées ou Custom Action

Le ruban est l’outil principal pour le paramétrage des composants dans SharePoint avec l’experience
classique.

En fonction du composant les menus qui le constituent varient pour :


Ruban de Page, Ruban de Bibliothèque, Ruban de Liste, Ruban de Calendrier, Ruban d’Edition et Ruban
Barre de lancement Supérieure.

Le ruban n’occupe plus d’espace mais s’affiche en superposition des éléments qui sont autour :
Les menus du ruban s’adaptent en fonction de l’espace disponible dans le navigateur : ils peuvent
s’étendre ou se restreindre en groupes, selon des facteurs d’échelle :

Cette fonction permet au ruban de pouvoir donner accès aux fonctions quelle que soit la résolution de
l’écran :
Mais pour autant la page Wiki n’est pas une page responsive comme on peut l’avoir avec la nouvelle
expérience.

 Avantages de la page WIKI :


Elle facilement modifiable par un utilisateur, on peut changer la disposition parmi 8 dispositions
prédéfinies (1 colonne, 1 colonne avec barre latérale, deux colonnes, deux colonnes avec en-tête, deux
colonnes avec en-tête et pied de page, 3 colonnes, trois colonnes avec en-tête, trois colonnes avec en-
tête et pied de page)

 Inconvénients :
Ce n’est pas une page responsive, le contenu ne s’adapte pas en fonction de la taille de l’écran.

Terminologie et zones de l’expérience moderne

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 25


1 Présentation des possibilités de développement dans Office 365

• Le bandeau horizontal est le menu de paramétrage qui vient remplacer le ruban.


• Dans le cas d’un liste/bibliothèque on accède aux paramètres de celle-ci via le menu Paramètres du
bandeau Office 365.
La barre de lancement Rapide est différente de celle qui s’affiche avec l’expérience classique.

Les pages d’un site


Historiquement il existe dans SharePoint diffèrent type de Pages qui fournissent des possibilités
différentes. Certaines ne doivent plus être utilisées même si elles restent présentes.

• La page WIKI qui est la page d’accueil d’un site avec expérience classique.
• La page de composants WebPart (qui contient une mise en page figée et qu’il ne faut plus utiliser)
• Les pages de publication (qui reposent sur une mise en page et nécessite l’infrastructure de
publication d’activée au niveau de la collection de sites)
• Les pages de site : qui sont des pages avec l’expérience d’utilisation moderne et qui sont responsive.

Les pages sont stockées dans des bibliothèques de pages, par défaut c’est la bibliothèque « SitePages »
qui est utilisée pour stocker les pages WIKI et les pages de Site.
En revanche si on active l’infrastructure de publication SharePoint, une nouvelle bibliothèque est
ajoutée du nom de « Pages » qui contiendra les pages de publication. (Page d’Article, Page de Sommaire
et autres mise en page personnalisée)

Prise de notes

26 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
La page WIKI (expérience classique)
Une page WIKI est composée de zones qui sont appelées Zone de composants WebPart.
L’organisation de ces zones d’appelle une disposition de texte ou mise en page.

Dans chaque zone de composant WebPart on ajoute des WebPart ou des Composants d’applications (qui
affichent les listes et bibliothèque)

La page de site (expérience moderne)

• On peut constituer la mise en page de façon dynamique dans une section et ajouter autant de
nouvelles sections que l’on souhaite : chaque section est organisée en colonnes qui sont
responsive.
La colonne à droite passe en fin de bloc si la taille de l’écran est réduite.
• On peut enregistrer la page en mode brouillon par défaut et décider du moment où elle sera
visible en faisant une publication.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 27


1 Présentation des possibilités de développement dans Office 365
Dans chaque section on peut ajouter des applications :

Avantage : Ces pages sont de par leur conception Responsive.

Inconvénient : Tous les WebPart disponibles en page Wiki ne sont pas encore disponibles en application.

4) Les niveaux d’administration de SharePoint

SharePoint dispose pour l’utilisateur final de 2 niveaux d’administration :


L’administration de la collection de sites et celui d’un site, ces paramètres sont présents en fonction des
droits de l’utilisateur.

Fonction Terminologie SharePoint


Webmaster de l’ensemble des sites Administrateur de collection de sites
Responsable d’un site Propriétaire de site
Gestionnaire d’un composant Propriétaire du composant

En complément un niveau global pour l’administrateur SharePoint existe qui s’appelle l’Administration
globale de SharePoint :
L’administrateur global SharePoint peut bloquer certaines fonctionnalités nécessaires au bon
fonctionnement d’une application, par exemple l’exécution de scripts personnalisés doit être autorisée :

Il faut autoriser les scripts personnalisés pour pouvoir télécharger un modèle de document à un type
de contenu : Il est conseillé de toujours les autoriser.

Les paramètres d’un site :


Prise de notes

28 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
Les paramètres d’un site :
L’écran est organisé par sections qui
regroupent les liens apparentés entre eux.

La Section :

Chaque Section permet de regrouper les


actions selon une logique de paramétrage.

La Section :
« Administration de la collection de sites » :
N’est disponible que sur le site racine et si on
est propriétaire de la collection de sites !

• Section : Utilisateurs et Autorisation (permet de gérer les paramètres de sécurités, les groupes, les
niveaux)
• Section : Galeries (contient les bibliothèques internes a Fondation pour les contenus, webpart, pages
maitres, thèmes, solution)
• Section : Administration du site (disponible que si on est propriétaire du site)
• Section : Aspect (permet de gérer la barre de lancement rapide, supérieure, le Thème, l’arborescence
et le titre du site)
• Section : Actions du Site (permet de gérer les fonctionnalités du site, enregistrer le site et les rapports
d’analyse)
• Section : Administration de la collection de sites (disponible que si on est administrateur de la
collection, permet de gérer les stratégies, la Recherche, les audits, les fonctionnalités de la collection
de sites, la corbeille de la collection, etc.…)
• Section Rechercher : Dédiée aux paramètres de recherche

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 29


1 Présentation des possibilités de développement dans Office 365

III.La Plateforme de développement et les outils associés

1) La Plateforme de développement

Avant d’installer les outils de développement on peut noter que toutes les versions de Windows
permettent de développer pour SharePoint Online étant donné que la plateforme est distante, il n’y a plus
de considération de plateforme cliente ce qui simplifie considérablement le prérequis.

Cependant certaines applications comme l’éditeur PowerApp ne sont disponibles que sur le Market store
Windows et cela implique d’avoir Windows 10.

 On recommandera donc de développer sur Windows 10 et supérieur pour avoir accès au Market store
Windows (qui n’est pas disponible sur les versions précédentes de Windows) :
 Windows 10 version 1507 ou ultérieure : Famille, Professionnel, Éducation et Entreprise (les versions
LTSB et S ne sont pas prises en charge)

2) Les outils pour le développement et la conception SharePoint

Pour le développement SharePoint, Les incontournables sont :


• Visual Studio
• Visual Studio Code
• SharePoint Designer 2013.

Pour la conception SharePoint et le développement de solutions composites :


• InfoPath pour la conception de formulaires et de solutions de formulaires dans l’expérience
classique
• PowerApp pour la conception de formulaires avec la nouvelle expérience
• Flow pour la mise en œuvre de processus métiers et de solutions de BPM (Business Process
Management).
• SharePoint Designer 2013 pour la conception de type externe et de workflow personnalisé.

Prise en charge du navigateur et outils de développement du navigateur :

Navigateur Pris en charge Non pris en charge


Microsoft Edge X
Internet Explorer 11 X
Internet Explorer 10 X
Internet Explorer 9 X
Internet Explorer 8 X
Internet Explorer 7 X
Internet Explorer 6 X
Google Chrome (dernière version publiée) X
Mozilla Firefox (dernière version publiée et version précédente) X
Apple Safari (dernière version publiée) X

Prise de notes

30 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

 Les outils de développements intégrés dans Edge, Internet Explorer, Chrome ou FireFox s’affichent en
appuyant sur la touche F12.

Pour charger des fichiers et des dossiers, en fonction du Navigateur utilisé la démarche est différente :

Internet Explorer : n’est pas capable de charger directement des dossiers (il faut utiliser l’expérience
classique, ouvrir dans l’explorateur et faire un copier-coller) mais uniquement des fichiers !

Microsoft Edge, Google Chrome, Firefox : peuvent charger directement des dossiers et sous-dossiers en
faisant un glisser-déplacer : idéal pour la reprise de données existantes.

Visual Studio 2017 (existe depuis plus de 20 ans)


Visual Studio intègre en natif les modèles de projets pour le développement de solution SharePoint.

Il existe 3 versions de studio :


• Visual Studio Community (gratuit, et permet aujourd’hui des developpements SharePoint)
• Visual Studio Professional ($499 pour une license autonnome)
• Visual Studio Enterprise disponible en abonnement cloud .

Abonnements annuels Abonnements mensuels

Visual Studio Visual Studio Visual Studio Visual Studio


Enterprise Professional Enterprise Professional

Prix par utilisateur 2 999 USD/an 539 USD/an 250 USD/mois 45 USD/mois

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 31


1 Présentation des possibilités de développement dans Office 365

Visual Studio est n’est pas un client de SharePoint Online, et ne permet pas d’explorer un site
SharePoint.
(Cela est possible mais il faut un serveur SharePoint local et être administrateur, ce qui n’est pas le cas de
SharePoint Online)

Les projets de développements avec Visual Studio pour SharePoint débuteront toujours par un modèle de
projet :
Le complément SharePoint

Ce modèle permet ensuite de déployer différents « artefact » SharePoint : Des définitions de sites,
définitions de listes, colonnes de site, type de contenu, WorkFlow, Récepteur d’événements distants, des
WebPart Visuels, des modules.

Outils et éditeurs spécifiques pour SharePoint :


• Concepteur de fonctionnalités affichant tous les composants d’une fonctionnalité.
• L’explorateur de Package (comme avec Studio 2008 et les extensions SharePoint)
• Différents éditeurs qui permettent de concevoir de façon visuelle

Plusieurs versions de Visual Studio peuvent être installées en exécution cote-a-cote : on peut installer
par exemple Studio 2013 et 2015 en même temps que Visual Studio 2017.

Utilisation de Visual Studio pour SharePoint


La première étape est d’installer « Office Developper Tools » s’ils ne sont pas déjà installés :

Prise de notes

32 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
Ce plug-in pour Visual Studio apporte les modèles pour SharePoint, entres autres les modèles
d’Applications pour SharePoint mais aussi Office et des modèles pour des développements de
composants exécutant du code coté serveur qui ne sont pas publiables dans SharePoint Online.

 Pour ajouter de nouveaux SDK et outils à Visual Studio on utilise Web Platform Installer (Web PI) :

On peut également utiliser dans Visual Studio le gestionnaire de package NuGet :

A partir du menu : Outils -> Gestionnaire de package NuGet -> Console

Mais pour ajouter la prise en charge de nouveaux Framework .NET dans Visual Studio 2017 on passe
par le programme d’installation de Visual Studio : Visual Studio Installer

Les fenêtres importantes de Visual Studio sont :


➢ Explorateur de Solution pour organiser le projet et les éléments (classes, composants, sources de
données, ressources)

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 33


1 Présentation des possibilités de développement dans Office 365
➢ Fenêtre de Propriétés : Permet de définir directement une propriété sur un élément pendant la
conception
➢ Fenêtre Structure du Document : Permet d’afficher ou modifier la structure hiérarchique d’une
Windows Forms, WPF ou Page ASP.NET. On l’a trouvé dans le menu Affichage->Autres fenêtres.
➢ Fenêtre Sortie : Permet d’afficher le résultat de la Console ou des Debug, c’est la sortie standard de
l’application.

Les outils dans Visual Studio pour le développement SharePoint

• Créer des listes et les Types de contenu à l'aide de nouveaux concepteurs


Lorsque vous créez une nouvelle liste ou un type de contenu dans Visual Studio, un concepteur
maintenant vous permet configurer et mettre en page le contenu de la nouvelle liste ou un type de
contenu. Les concepteurs vous permettent d'afficher, trier et grouper les colonnes de site disponibles.

• Créer des colonnes de Site


Le nouveau modèle d'élément colonne de Site vous permet de créer plus facilement les colonnes de site
SharePoint, également appelées « champs ». Pour plus d'informations, consultez Création de colonnes de
sites, de types de contenu et de listes pour SharePoint.

• Créer des WebParts Silverlight


Le nouveau modèle de projet de composant WebPart Silverlight rend hébergeant une application
Silverlight dans un composant WebPart plus facile et pratique. Le modèle de projet vous permet de créer
une nouvelle application Silverlight ou fournir votre propre, et il fournit également un projet de
composant WebPart à laquelle associer l'application Silverlight.

• Publier des Solutions SharePoint pour les serveurs SharePoint à distance


Au déploiement de solutions SharePoint vers un site SharePoint local, vous pouvez maintenant publier
solutions SharePoint pour les sites SharePoint à distance.

• Tester les performances de SharePoint à l'aide d'outils de profilage


Les outils Visual Studio SharePoint offrent désormais prise en charge complète pour le profilage des
performances. Le profilage des outils vous aident à qu'identifier code et autres éléments dans vos projets
SharePoint que ralentissent et nuire aux performances de vos applications SharePoint.

• Créer en sandbox des WebParts Visuels


Les « Visual WebPart » prennent désormais en charge les projets SharePoint en sandbox, batterie non
seulement les projets : alors que les Sandbox sont dans le même temps dépréciées !!

• Prise en charge améliorée pour les Solutions Sandbox.


Lorsque vous travaillez sur les solutions isolées, Visual Studio affiche une erreur de compilation si vous
tentez d'utiliser des appels d'API batterie seule. En outre, Visual Studio IntelliSense affiche uniquement les
API qui sont compatibles avec les solutions isolées lorsque vous travaillez dans une solution isolée.

• Prise en charge pour le débogage de JavaScript et IntelliSense de JavaScript


Vous pouvez maintenant déboguer JavaScript dans les projets SharePoint, et IntelliSense est fourni lors du
codage JavaScript dans les projets SharePoint. Résolution d'URL pour JavaScript est activée pour visual

Prise de notes

34 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
web parts dans les solutions isolées. Cela signifie que vous pouvez référencer des fichiers JavaScript qui se
trouvent dans la base de données contenu de SharePoint dans vos projets SharePoint dans Visual Studio.
Le code est automatiquement inclus au moment de la génération.

• Modèles de projet SharePoint rationalisée


Les modèles de projet SharePoint et les modèles d'élément de projet ont changé. Certains modèles de
projet SharePoint à partir de la version précédente de Visual Studio ont été déplacés dans les modèles
d'élément de projet. Par exemple un modèle de projet permet la création d’actions pour les
workflows de façon intégrée

• Testez votre Code en utilisant des substituts (Fakes) de Microsoft Framework


Les projets SharePoint prend en charge les substituts de Microsoft, qui est une structure d'isolation dans
lequel vous pouvez créer des stubs de test basé sur le délégué et shims dans.NET Framework applications.
En créant ces stubs et les correctifs, vous pouvez isoler vos tests unitaires à partir de l'environnement
pendant que vous testez votre code.

Visual Studio Code

Visual Studio Code ne doit surtout pas être confondu avec Visual Studio : ils n’ont rien à voir !

Visual Studio Code est un éditeur de code open-source, gratuit et multiplateforme (Windows, Mac et
Linux), développé par Microsoft, à ne pas confondre avec Visual Studio, l'IDE propriétaire de Microsoft.
Principalement conçu pour le développement d'application avec JavaScript, TypeScript et Node.js,
l'éditeur peut s'adapter à d'autres types de langages grâce à un système d'extension bien fourni.

Les principales caractéristiques :


• IntelliSense : une technologie avancée qui propose, outre à la mise en évidence de la syntaxe et la
complétion automatique du code, un système d'inférence articulé et basé directement sur la
logique du code source ;
• Intégration native avec Git : le logiciel implémente le système de gestion de versions Git
directement dans l'interface de l'éditeur, ce qui représente un avantage pour pouvoir effectuer les
opérations de versioning plus aisément ;
• Ligne de commande intégrée : toujours dans l'interface de l'éditeur, il est possible de lancer la
ligne de commande et exécuter toutes les commandes disponibles sur le système d'exploitation ;
• Ecosystème d'extensions : les extensions sont au cœur du projet et il existe même un système
assez simple pour développer/publier ses propres extensions
• Debugging intégré : pour les développeurs plus avancés, il existe également des fonctionnalités de
débugging directement à l'intérieur de l'éditeur.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 35


1 Présentation des possibilités de développement dans Office 365

On remarque que l’interface de conception (IDE : Integrated Development Environnemt) est très différent
de celui de Visual Studio, on trouve principalement :

L’éditeur : affiche les fichiers ouverts et permet l’édition du code


Barre latérale : contient différents vues comme l’explorateur pour naviguer dans les éléments et projets
Barre d’état : information sur le projet en cours et le fichier en édition
Barre d’activités : donne des informations sur les changements qui seront transmis à git par exemple
Panneaux : on peut afficher différents panneaux pour afficher les erreurs, le débogage.

La force de cet outil est de fournir un ensemble d’outils et de générateurs pris en charge par Microsoft
pour la conception dans SharePoint Online avec la nouvelle expérience.
https://code.visualstudio.com/

Quels sont les autres outils disponibles et lequel choisir ?


Aujourd’hui l’environnement de développement pour Office 365 est ouvert et différents IDE peuvent être
utilisés selon l’expérience du développeur :

Visual Studio Code et Visual Studio :


Si Visual Studio Code est l’outil phare pour les développements SPFx,
Visual Studio reste indispensable pour les développements d’Add-In :
Dans la pratique sur un poste de développement il faut les deux outils.

Prise de notes

36 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
On recommande Visual Studio 2017 et pas 2015 pour les nouvelles
possibilités d’intégration JavaScript et les outils et concepteurs qu’il
propose.
Sublime
Sublime Text est un éditeur de texte générique codé en C++ et Python, disponible sur
Windows, Mac et Linux. Le logiciel a été conçu tout d'abord comme une extension pour
Vim, riche en fonctionnalités. En 2007, son créateur, Jon Skinner, quitta son travail chez
Google pour poursuivre un de ses rêves : créer un meilleur éditeur de texte. Il se donna
trois principes pour ce logiciel :
• Discret, interface minimum : on doit pouvoir se focaliser sur le texte et non
une myriades de barres d'outils ;
• Ne pas cacher le texte par des fenêtres ;
• Utiliser toute la place possible : plein écran, multi-écran, édition de fichiers
côte à côte devraient être possibles.
https://www.sublimetext.com/
Atom
Atom est un éditeur de texte libre pour macOS, GNU/Linux et Windows développé par
GitHub. Il supporte des plug-ins écrits en Node.js et implémente Git Control. La plupart
des extensions sont sous licence libre et sont maintenues par la communauté. Atom est
basé sur Chromium et Electron et est écrit en CoffeeScript.
L’IDE dispose de d’un nouveau genre d’interface, appelé Language Server Protocol
(LSP). Elle permet à Atom-IDE de traiter les langages Java, JavaScript, Flow, TypeScript,
C#, et PHP, en faisant le lien entre éditeurs de code et langages.
https://ide.atom.io/
Webstorm
WebStorm est un IDE pour les langages Web (HTML, CSS et JavaScript), développé par
l'entreprise JetBrains et basé sur la plateforme IntelliJ IDEA.
Particulierement adapté pour les développements JavaScript, Node.js, Type Script.

https://www.jetbrains.com/webstorm/

SharePoint Designer 2013


Outil proposé gratuitement depuis avril 2009, SharePoint Designer est l’outil de conception adapté aux
graphistes ou aux concepteurs de pages et de WorkFlows dans SharePoint.

SharePoint Designer apporte les nouveautés telles que la prise en charge d’AJAX, la création de rubans
pour SharePoint, l’accès aux BCS.

Dans bien des cas l’utilisation de SharePoint Designer permet d’éviter des développements complexes
et la connaissance des fonctionnalités qu’il apporte est un plus dans ce sens.

Ce produit a remplacé FrontPage et est utilisé aussi bien par les concepteurs/graphistes web que les
développeurs SharePoint. En effet il permet de voir la structure physique des dossiers SharePoint ce que
ne permet pas Visual Studio qui n’est pas en mesure de se connecter a SharePoint Online.

Par ailleurs il permet de modifier rapidement des éléments dans SharePoint comme les pages maitre,
d’injecter des pages sur un site pour les tester.

SharePoint Designer 2013 ne propose plus l’affichage en conception : il faut afficher le résultat dans
un navigateur directement.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 37


1 Présentation des possibilités de développement dans Office 365

 Designer peut être installé en même temps que le 2010 et les versions doivent correspondre en termes
de plateforme 32 bits ou 64 bits du produit Office Bureautique qui serait déjà installé.

il faut SharePoint Designer 2013 pour concevoir directement dans SharePoint Online.

3) Les outils indispensables pour le développement SharePoint

Pour les développements SPFx différents outils doivent être installés sur le poste de développement :
Cela s’explique par le fait que Microsoft s’appuie sur des outils provenant du monde de l’open source et
pour arriver à avoir une chaine de traitements complète il faut installer plusieurs composants qui chacun
gère un service spécifique.

La logique dans la chaine d’installation des outils commence par Node.js :

Node.js et NPM
NPM est le gestionnaire de paquets officiel de Node.js. Depuis la version 0.6.3 de Node.js, NPM fait partie
de l'environnement et est donc automatiquement installé par défaut lors de l’installation de Node.js.

NPM fonctionne avec un terminal et gère les dépendances pour une application. Il permet également
d'installer des applications Node.js disponibles sur le dépôt NPM.

Installer Node.js revient à installer NPM puisqu’ils fonctionnent ensemble.

URL du projet NPM : https://www.npmjs.com/

Le développement SharePoint utilise NPM pour gérer les librairies et les dependances de versions pour
assurer qu’un projet contient toutes les librairies nécessaires : c’est un équivalent de NuGet.

En réalité c’est Node.js qui distribue NPM, pour installer ces deux outils il suffit d’aller sur la page Node.js :
https://nodejs.org/en/

Pour la signification de l’acronyme ?


D'après l'auteur, npm n'est pas le sigle de « Node Package Manager ». Comme il le dit en plaisantant :
« Contrairement à la croyance de beaucoup, « npm » n'est en fait pas l'acronyme de « Node Package Manager ».
Il s'agit d'un rétro acronyme signifiant « npm is not an acronym » (« npm n'est pas un acronyme ») (si le nom avait été ninaa,
ç'aurait été un acronyme, et donc nommé de manière incorrecte) »
Il précise par la suite :
« Donc, plus sérieusement, le projet « npm » est nommé d'après son utilitaire en ligne de commande, lui-même ainsi nommé
pour être facilement écrit par un programmeur droitier sur un clavier US QWERTY, finissant avec l'annulaire droit en position
pour taper la clef - pour les flags et autres arguments en ligne de commande. Cet utilitaire s'écrit toujours en bas de casse,
même s'il est en tête de la plupart des phrases dans lesquelles il intervient. »

Prise de notes

38 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
GULP
GULP permet d’automatiser la construction d’un projet de développement en apportant
des règles de constructions et des workflow pour assurer toutes les étapes souhaitées
dans un build.

Il dispose également de nombreux de plugins (plus de 3000) qui permettent de profiter de


fonctions toutes prêtes (par exemple pour l’obfuscation du code JavaScript qui reste lisible
par le client)

Le developpemnt client SharePoint utilise GULP pour :


• Regrouper et réduire les fichiers JavaScript et CSS.
• Exécuter des outils pour appeler les tâches de regroupement et de réduction avant chaque
génération.
• Compiler les fichiers LESS ou Sass dans un fichier CSS.
• Compiler les fichiers TypeScript dans un fichier JavaScript.

http://gulpjs.com/

Yeoman
Yeoman aide le développeur a gagner du temps en fournissant des modèles de
départ qui respectent les meilleurs pratiques de développement :
On ne part pas d’un projet vide, mais au contraire grâce à Yeoman on peut partir
d’un projet contenant le squelette requis et l’organisation des fichiers avec du
contenu qu’il suffit de personnaliser.

Le générateur Yeoman SharePoint est disponible dans l’infrastructure pour vous permettre de
lancer des projets de composant WebPart côté client.
http://yeoman.io
Webpack
Webpack est un programme de regroupement de modules qui prend vos fichiers de
composants WebPart et leurs dépendances, et génère un ou plusieurs fichiers
groupés JavaScript pour vous permettre de charger des fichiers différents selon les
scénarios.
https://webpack.js.org/

Microsoft fournit un SDK pour les développements comprenant les documentations et des exemples.

Les outils à installer sont :


• Le SDK SharePoint 2016
• Des outils complémentaires qui peuvent être utiles que l’on trouve sur le site le github:
https://github.com/SharePoint
• Le SharePoint PnP :
La communauté de développement SharePoint (aussi appelée Communauté SharePoint PnP) est une
initiative open source coordonnée par les ingénieurs SharePoint. Cette communauté gère la
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 39


1 Présentation des possibilités de développement dans Office 365
documentation, les exemples, les contrôles réutilisables et d’autres initiatives open source pertinentes en
lien avec le développement de SharePoint.
http://aka.ms/SharePointPnP

• SharePoint Manager 2013 : liste l’arborescence des sites SharePoint 2013


(http://spm.codeplex.com/)
• Fiddler : https://www.telerik.com/fiddler , Cmder for Windows : http://cmder.net/, Outillage Git :
https://git-scm.com/

Il existe différents sites sur lesquelles on peut trouver des outils qui peuvent être proposés gratuitement :
• CAML Designer par exemple: http://sharepoint.biwug.be/Pages/Downloads.aspx

IV. Les Modèles de développement et technologies associées

Depuis SharePoint 2013, SharePoint apporte plusieurs nouvelles fonctions qui sont directement destinées
aux développeurs.
Plus récemment un nouveau Framework est apparu avec l’objectif d’unifier tous les Framework existants
et historique dans SharePoint : SPFx !

1) Le modèle d’Add-In SharePoint

L’un des changements les plus importants est le nouveau modèle d’Applications pour SharePoint et
Office.
Les Add-Ins sont une nouvelle méthode de développement de distribution et de déploiement pour
apporter des nouvelles fonctionnalités dans SharePoint Online (depuis la version 2013).

• Les Apps s’exécutent en dehors du serveur SharePoint et de ce fait peuvent être exécutées dans
Windows Azure ou sur un serveur distant quelconque (pas forcement SharePoint).
• Les App interagissent avec SharePoint via le client-side-object-model (CSOM) ou par des appels
REST (Representational State Transfer).

De ce fait les Add-Ins ne déploient aucun code serveur et n’exécutent jamais du code serveur dans
SharePoint !

Quels sont les objectifs de ce modèle d’application ?

Le modèle d’Add-In a été conçu pour permettre aux développeurs de programmer des applications qui
s’exécuteront aussi bien On-Premise que sur un Cloud.
Ce modèle dissocie un développement d’une version de SharePoint ce qui apporte plus de sécurité et de
facilité aux utilisateurs pour trouver l’Add-In de leur choix.

Les principaux objectifs sont :

• Les Add-Ins doivent fonctionner aussi bien sur SharePoint On-Premise que sur SharePoint Online.

Prise de notes

40 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
• Le code d’un Add-In ne s’exécute jamais dans l’hôte SharePoint. Cela apporte plus de stabilité car
l’Add-In n’interfère pas avec le processus et la mémoire du serveur SharePoint. Un Add-In ne peut
pas bloquer un processus ou bloquer un autre Add-In.
• Le code de l’Add-In obtient les données SharePoint au travers de Web Services. Les Web Services
rendent transparent la version de SharePoint, ce qui fait qu’un Add-In développé pour SharePoint
2013 fonctionnera sans problème avec 2016 et les versions suivantes.
• Le code d’un Add-In s’exécute avec une identité propre et distincte. Cela permet d’assigner des
permissions propres aux Add-Ins. (ce qui n’est pas possible pour les solutions SandBox par
exemple qui s’exécutent toujours avec l’identité de l’utilisateur ou les solutions de Batterie).
• Les Add-Ins sont publiés dans un Catalogue d’application qui peut être On-Premise ou dans l’Office
Store. Chaque Web Application peut avoir son catalogue d’Add-In ou avoir un catalogue global.

Quels sont les avantages à développer des Add-Ins?

• Faible impact sur les performances de la batterie SharePoint, puisque le code s’exécute
essentiellement en dehors de SharePoint : les administrateurs sont moins sollicités sur les
problèmes de performances liées aux applications déployées.

• Une meilleure encapsulation des fonctionnalités : lorsqu’un Add-In est installé sur un site, celle-ci
provisionne un sous-site (le site App Web) à l’emplacement ou on l’installe. Ce sous-site web pour
l’App contient les ressources, les pages, les listes, types de contenus, colonnes de sites, etc…Cela
empêche toute interférence entre les App et les autres sites. Et lors de la désinstallation de l’Add-
In les éléments associés sont supprimés de façon plus sure cohérente.

• Meilleure gestion des autorisations : un App-In doit définir les permissions requises pour pouvoir
fonctionner là où elle est installée.

• Cohérence selon les plateformes : Les Add-Ins fonctionnent exactement de la même façon que sur
SharePoint online : il n’y a aucune différence dans les capacités et fonctionnalités disponibles.

• Meilleure visibilité des Add-Ins : Les Add-Ins peuvent être développées pour une entreprise mais
aussi être transmisses au Microsoft Office Marketplace et ainsi être répertoriées publiquement sur
internet.

Le développement d’Add-In SharePoint

Ce nouveau modèle permet de développer 2 différents types d’applications SharePoint :


Des Add-In hébergés par SharePoint ou des Add-Ins hébergés par un fournisseur.

Nom 2013 Nom 2016


apps for SharePoint SharePoint Add-ins
app part add-in part
app web add-in web

Les personnalisations déclaratives dans les Add-In


Un certain nombre d’éléments peuvent être créé de façon déclarative en utilisant le langage interne de
SharePoint : Le CAML pour Collaboration Application Markup Language, qui est au format XML.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 41


1 Présentation des possibilités de développement dans Office 365

Certains éléments doivent être construits avec un minimum de définition CAML :


Des définitions de types, des définitions de listes par exemple nécessitent un minimum de déclaratif.

D’autres éléments peuvent être crée en déclaratif ou par programmation comme : les listes, les types de
contenus et différents éléments dans les interfaces SharePoint.

Utiliser le déclaratif lorsqu’il existe un concepteur dans Visual Studio permettant d’aiguiller la syntaxe
CAML. La syntaxe CAML est fastidieuse et très pointilleuse ce qui la rend complexe dans certains cas où
l’on privilégiera de la programmation plutôt que du déclaratif.

• Avantages du déclaratifs :
Peut avoir un concepteur dans Visual Studio
Permet une bonne maintenabilité et une facilité de lecture

• Inconvénients :
Pas de débogage possible !
Une documentation qui n’est pas toujours complète.

Dans ces cas, utiliser le minimum de déclaratif et faire les traitements par programmation en utilisant
un Récepteur d’évènement ou du code client.

Un modèle distribué pour les Workflow

A partir de SharePoint 2013, SharePoint s’appuie sur le modèle d’exécution de Worflow Manager 1.0 qui
est un nouveau composant destiné aux serveurs et s’exécutant dans le Framework 4.5 et WF 4.5.
Il permet d’exécuter les worklows avec beaucoup plus de montée en charge en permettant de déployer
dans Windows Azure, dans un site spécifique sous la forme d’App ou de solutions isolée (sandbox) plutôt
que sur la batterie SharePoint.

Dans SharePoint Online cette infrastructure est transparente pour le développeur, qui doit avoir à l’esprit
que pour déployer un Workflow il faut un Add-In et respecter une règle :

Le modèle est entièrement déclaratif ce qui permet le déploiement dans SharePoint Online.
Les développements de Workflow deviennent intégralement déclaratifs !

Pour avoir une liste exhaustive des fonctionnalités, vous trouverez dans le dossier fichiers de cours :
 Voir le fichier : « Nouveautes Developpeur SharePoint 2016.docx»
 Voir le fichier : « SPFeature.xlsx » pour identifier en fonction du métier les fonctions possibles.

Add-In SharePoint et Add-In Office

Les Add-In SharePoint et Office permettent d’ajouter une application personnalisée qui utilise des
technologies Web pour étendre les fonctionnalités d’une interface (SharePoint ou Application Office).

Mais ils reposent sur des technologies très différentes et il ne faut pas les confondre.

Prise de notes

42 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
Aspect Add-In SharePoint Add-In Office
Point d’entrée et L’accès se fait dans SharePoint par un
Le lancement se fait dans une
lancement de navigateur par un site, une page, un application Office ou dans Office
l’application menu ou un control dans une page. Online. L’application peut apparaitre
dans le volet des taches dans Excel ou
au-dessus d’un email dans Outlook.
Interaction avec le Comme l’Add-In ne se lance pas dans L’Office Add-In peut lire et modifier le
document en cours le contexte d’un document on ne peut document ou l’email en cours
dans Office pas modifier le document en cours
Interaction avec le On peut appeler les Web Service On peut faire pareil mais pour le
contenu SharePoint SharePoint depuis un Add-In pour contenu dans Office OnLine
atteindre le contenu SharePoint uniquement
Logiciel Client Accessible par la plupart des Il faut au moins une application Office
navigateurs 2013 et supérieure

2) Les modèles de programmation Client

Le coté client devient un modèle de programmation incontournable dans SharePoint il a donc été
considérablement amélioré par Microsoft :

• Le modèle JavaScript : Il est apparu avec SharePoint 2010 sous le nom de « client-side object
model for JavaScript », dans SharePoint plusieurs améliorations sur la portée des API et la
possibilité de faire des appels Cross-Domain.

• Le modèle client .NET Framework : Apparu également avec SharePoint 2010, sous le nom de
« SharePoint object model for managed clients » il permet dans SharePoint de programmer les API
principales de SharePoint et n’est plus limité à un sous-ensemble restreint d’API

• Silverlight Object Model : Ce modèle est apparu dans SharePoint 2010, principalement pour
développer des WebPart Silverlight. Silverlight n’est plus utilisé dans SharePoint 2013 excepté
pour les applications Windows Phone. Apparait donc un « Mobile object model » qui est une
version allégée et spécifiquement destinée à la programmation vers les terminaux mobiles
Windows Phone. Ce modèle permet par exemple de pousser des notifications aux téléphones.
Ce modèle est aujourd’hui déprécié

Le développement avec les modèles objet Client :


Le modèle objet client quel que soit le mode (JavaScript, .NET, Mobile, REST) utilise un même web service
WCF : Client.svc.
Chaque modèle client est en réalité un PROXY ou une façon d’envoyer des données à Client.svc et de
traiter le retour fourni par le service.
Les traitements qui utilisent le modèle objet Client, sont tous les traitements déclenchés depuis le
navigateur en mode AJAX, les appels déclenchés à distance en dehors d’un contexte SharePoint (App
SharePoint et applications distantes)

• REST/OData : avec SharePoint 2010 est apparu les appels REST à partir de SharePoint 2013 le
format standard OData a été choisi par Microsoft, ce qui permet plus d’opérations tout en

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 43


1 Présentation des possibilités de développement dans Office 365
respectant un format standard défini par un organisme indépendant. Il permet les opérations
CRUDQ (create, retrieve, update,delete, query). OData est un protocole exclusivement Web,
utilisant http pour obtenir et manipuler des données.

L’Open Data Protocol est disponible à l’adresse :


www.odata.org

Face à ces différents Framework et considérant le chemin pris par la plateforme Office 365, est apparu un
Framework client phare : SPFx !

3) Le Framework SPFx
Ce Framework a pour objectif de permettre l’utilisation de composant Open Source, d’avoir une
ouverture sur différents langage et outils de déploiement mais avec un critère majeur :
C’est une technologie de développement Client qui s’exécute dans le navigateur.

Il permet les développements dans l’interface moderne de SharePoint c’est-à-dire qu’il s’inscrit dans la
logique d’une expérience d’utilisation et fournit un mode totalement responsive.

Il fonctionne aussi bien dans la version Online que sur un SharePoint OnPremise (2016 avec SP2) mais il
tire le meilleur dans SharePoint online.

• Un Framework en constante évolution depuis aout 2016

Drop 1 GA V1.4 v1.5 v1.6


17/08/16 02/17 07/12/2017 05/06/18 05/09/18

RC0 GA v1.3 + v1.4.1 v1.5.1


09/01/17 Extensions 15/02/18 26/06/18
25/09/17

v1.0: WebParts v1.5: Dev Preview Dynamic Data, Beta WebAPI, package
managers, flag --plusbeta
v1.3: Extensions v1.5.1: Bug Fix
v1.4: Assets packaging v1.6 : GA WebAPI
v1.4.1: Beta AadHttpClient & MSGraphClient

Une meilleure façon de développer dans le client :

• Une unification de la façon de développer


Plusieurs langages sont pris en charge mais le Framework cible est le même et la hiérarchie de classes de
programmation ne change pas. On accède également à l’unification des développements SharePoint et
Teams (Les WebPart peuvent être ajoutés en nouvel onglet dans Teams)

Prise de notes

44 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

• Une rupture technologique pour les développeurs SharePoint historique


On doit rentrer dans un cadre beaucoup plus contraint dans les développements et les technologies et
outils viennent de l’open source : c’est une nouvelle galaxie pour le développeur SharePoint historique.

• Un ensemble de règles et procédures de déploiement

• L’administrateur du tenant reprend le contrôle sur les personnalisations


L’administrateur global peut via le catalogue d’application désactiver ou supprimer des applications
Le développeur charge des nouvelles versions en mode en fonction des besoins
L’administrateur global accède à des statistiques d’utilisations
L’administrateur de la collection de sites ajoute les applications pour les rendre disponibles

• Des restrictions sur les développements qui permettent à SharePoint de garder le contrôle

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 45


1 Présentation des possibilités de développement dans Office 365

LES TYPES DE DÉVELOPPEMENT SP 2016 FP2


SPFx v1.1
SP 2019
SPFx v1.4.1
Online
SPFX v1.6
Modern

SPFx Web Parts Application Customizer


Field Customizer
Classic & Modern List View Command Set

SP16 SP19 SPO SP19 SPO SP19 SPO

Classique Web Parts Custom Actions JSLink

SP16 SP19 SP16 SP19 SP16 SP19

SPFx permet de développer des WebPart aussi pour l’expérience classique (c’est un cas particulier)

SPFx est déconseillé pour :

• Il s’exécute toujours dans le contexte de l’utilisateur et ne permet pas d’élévation des privilèges :
s’il faut élever les privilèges utiliser des API externes qui le permettent
• Il n’est pas approprié pour les opérations longues ou massives : utiliser des fonctions Azure ou des
scripts PowerShell OnPremise.
• Tout le code est lisible par l’utilisateur final : ne pas stocker d’informations sensibles dans le code
car il y a une règle d’or en programmation client : ON NE FAIT JAMAIS CONFIANCE AU CLIENT !

4) Des nouvelles façons de concevoir et penser les affichages

Expérience classique :
La conception d’une charte graphique adaptée a toujours demandé historiquement beaucoup d’efforts.
Depuis SharePoint 2013 une méthode complètement nouvelle apparait s’appuyant exclusivement sur des
affichages HTML, CSS et JavaScript.

On peut désormais créer une page maitre en HTML avec n’importe quel éditeur de développement Web.
L’intégration dans SharePoint se fait ensuite avec Designer Manager dans les sites de publications
SharePoint pour créer les rendus HTML pour différents contrôles (Menus de navigation, titre de site, etc…)

Nouvelle Expérience :
L’expérience d’utilisation n’est pas personnalisable mais au contraire chaque composant doit s’inscrire
dans la logique de l’interface graphique.

C’est ce qui amène par exemple Office UI Fabric : un ensemble de composants graphiques que SPFx peut
utiliser pour apporter l’expérience prévue par la nouvelle expérience SharePoint.
Prise de notes

46 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

Ensemble de composant permettant la mise


en place de l’expérience d’utilisation sur un Fonts, icons Colors
frontal SharePoint.

Profite de l’expérience Microsoft pour


donner une cohérence entre un
développement spécifique et ce qui existe
dans la plateforme.

Disponible en natif (OOB : Out of the Box)

Permet de concevoir des WebPart


naturellement et parfaitement intégrés.

Office UI Frabric React propose un ensemble


de composants graphiques (controles)
réutilisables.

http://dev.office.com/fabric

La nouvelle expérience doit être utilisée telle qu’elle est prévue et vouloir la
personnaliser à outrance est une erreur : Dans ce cas, il faut revenir à l’expérience
classique !

Etudiez le cout d’un développement de charte graphique SharePoint et qui plus est dans une plateforme
qui évolue regulierement.

5) Les changements importants en synthèse dans SharePoint OnLine

• Une nouvelle expérience d’utilisation :


o Un choix déterminant est à faire pour l’expérience d’utilisation attendue
• Meilleure prise en charge des mobiles
o Le responsive est par nature dans la conception avec la nouvelle expérience
• InfoPath est toujours en version 2013 comme SharePoint Designer
o Mais ils ciblent l’expérience classique : Pour l’expérience moderne l’outil de conception
devient PowerApp
• Workflow Manager est toujours le moteur des workflow :
o Pour des traitements transverses Flow est la nouvelle plateforme de Workflow
• Les Workflows de MOOS 2007 sont encore pris en charge
• Les solutions SandBox sont encore prises en charge
o Mais il est prévu qu’elles soient très prochainement complètement supprimées
• Les App s’appellent désormais Add-ins
o Un choix est a faire dans un projet entre Add-In et utilisation de SPFx
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 47


1 Présentation des possibilités de développement dans Office 365
Historique des solutions de développement

Les outils en synthèse pour le développement SPFx

La Réponse de Microsoft : Pourquoi SharePoint Framework ?


SharePoint Fx a été lancé sous la forme d’un produit local en 2001. Au fil du temps, une importante
communauté de développeurs l’a agrandi et façonné de plusieurs façons. La plupart du temps, cette
communauté de développeurs a suivi les mêmes modèles et les mêmes pratiques que l’équipe de
développement produit SharePoint, en utilisant notamment des composants WebPart.
De nombreuses fonctionnalités ont été écrites en C#, compilées dans des DLL et déployées sur les
batteries de serveurs locales.

Cette architecture fonctionnait bien dans les environnements ne comprenant qu’une entreprise, mais il
n’était pas extensible dans le cloud, où plusieurs clients sont exécutés côte-à-côte.
Par conséquent, nous avons introduit deux modèles de remplacement : l’injection JavaScript côté client et
les compléments SharePoint.
Prise de notes

48 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

Ces deux solutions ont des avantages et des inconvénients.

Comparaison par rapport aux outils Microsoft de la chaine de développement :

6) Un environnement de développement pour quels types de développement ?

➢ Développement d’applications qui vont manipuler SharePoint avec le modèle objet SharePoint.
➢ Développement utilisant les API clients et qui s’exécutent à distance en dehors de SharePoint.
➢ Appels des WebServices intégrés de SharePoint pour effectuer des actions à distance.
➢ Création de nouveaux modèles de sites, de nouvelles pages, pages maitre et de thèmes.
➢ Pour les sites de publication (Serveur SharePoint) développement de nouvelles mises en page
(page layouts)
➢ Création de nouvelles listes, bibliothèques et colonnes.
➢ Développement de WorkFlow et de composants WebPart.
➢ Interception des évènements de SharePoint et traitements serveur (Récepteur d’évènements)
➢ Développement d’Add-In pour être déployés sur n’importe quel tenant SharePoint
➢ Apport de nouveaux menus et éléments dans la nouvelle experience

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 49


1 Présentation des possibilités de développement dans Office 365

La difficulté pour le développeur SharePoint est de connaitre les


fonctions du produit. Avant de se lancer dans un développement il
faut toujours se poser la question : Peut-on le faire sans
développement en utilisant les composants ou fonctions qui sont
déjà présents dans le produit ?

Prise de notes

50 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365

V. Focus sur les développement Composites

La plateforme Office 365 et SharePoint Online est intégrée avec une gamme d’outils provenant de la suite
Office qui sont tous fortement intégrés à SharePoint Online.

En utilisant les outils de façons approprié et les produits disponibles dans certains cas on peut éviter des
développements ce qui est toujours préférables en terme de maintenance et d’évolutivité et de couts.

2 outils principaux permettent de concevoir pour SharePoint :

SharePoint Designer 2013 et InfoPath 2013.

1) Conception de solutions InfoPath


Introduction aux solutions de formulaires
Les solutions de formulaires permettent de concevoir des applications qui obtiennent des données des
utilisateurs. Les besoins associés sont aussi variés que vastes et les formulaires permettent de réaliser des
applications métier à forte valeur ajoutée.

La création et la personnalisation des formulaires demandent l’installation du logiciel InfoPath qui est
intégré à la suite Office. InfoPath est sans doute dans la suite Office le programme le plus fortement lié à
SharePoint tant les formulaires InfoPath sont présents dans SharePoint.
On peut penser à un formulaire dès que l’on souhaite obtenir des informations et permettre aux
utilisateurs de saisir cette information de la façon la plus adaptée à la solution que l’on souhaite mettre en
place.

Concevoir un formulaire c’est mettre en place :


 Les données du formulaire : elles peuvent être internes au formulaire, externes dans SharePoint,
Service Web ou en base de données
 L’apparence du formulaire : de nombreux contrôles permettent de créer des saisies (listes, dates,
tableaux, boutons, zone de texte, etc..) et l’on peut créer plusieurs affichages qui seront ensuite des
pages pouvant être affichées.
 Les règles de validation et de conformité : différentes règles peuvent être définies pour valider les
données qui seront saisies par l’utilisateur ainsi que les messages d’erreurs à afficher.

Les Formulaires dans SharePoint


En réalité les formulaires InfoPath sont très présents dans SharePoint et on les retrouve sur des
composants très variés :
 Tous les formulaires de Listes et Bibliothèques sont des formulaires InfoPath
 Les formulaires associés aux Workflows se personnalisent avec InfoPath
 Le Volet d’information affiché dans Office est un formulaire InfoPath et personnalise avec InfoPath

En dehors de l’utilisation dans SharePoint des formulaires InfoPath on peut bien entendu concevoir une
solution totalement personnalisée à partir d’InfoPath.
Dans ce cas les composants SharePoint utilisé est la Bibliothèque de Formulaires qui sert à stocker des
formulaires InfoPath.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 51


1 Présentation des possibilités de développement dans Office 365
Scénarios d’utilisations d’InfoPath
 Personnaliser le formulaire d’ajout des éléments dans une liste pour ajouter des règles de saisies
particulières lors de l’ajout de nouveaux éléments
 Personnaliser le formulaire du Panneau d’information dans Office pour avoir un affichage personnalisé
 Créer des solutions métiers de toute pièce : Demande de congés, Saisir des Comptes Rendus
d’activités, Demandes d’achats et tout ce qu’on appelle des Demandes en entreprise (Déplacement,
Note de Frais, etc...)

Architecture globale des solutions InfoPath

Avant tout chose il faut comprendre les technologies et surtout le principe des technologies InfoPath.
Au départ on créer un formulaire, c’est comme un modèle qui permettra de créer des nouveaux
formulaires : Le formulaire modèle à l’extension XSN et contient un format propre à InfoPath.

Lorsqu’on remplit des nouveaux formulaires, ce sont des fichiers XML qui ne contiendront que les
données et aucunes caractéristiques d’affichage. Pour afficher ces fichiers XML le formulaire modèle doit
être obtenu et affiché.
Modèle de Formulaire Fichier XML contenant uniquement les
Format XSN données saisies

Utiliser InfoPath
Lorsqu’on lancer le programme InfoPath, on voit tout de suite les éléments que l’on peut concevoir :

Modèles de Formulaires Courants :


 Liste SharePoint : permet de concevoir les formulaires associés aux listes, et dans ce cas il faut un
accès à la liste SharePoint pendant la conception
 Bibliothèque de Formulaires SharePoint : c’est un formulaire prédéfini pour être associé plus à une
bibliothèque de formulaire. Apporte juste un modèle de départ par rapport à Formulaire vierge.
Prise de notes

52 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
 Courrier électronique : Permet de concevoir des formulaires qui seront utilisés dans Outlook
 Formulaire vierge : choisir ce modèle pour concevoir un formulaire en partant de zéro !
 Formulaire vierge (InfoPath Filler), formulaires spécifiques pour être utilisé avec le programme
InfoPath Filler qui est dédié aux utilisateurs qui remplissent des formulaires. InfoPath Filler est donc
plus simple et ne sert qu’à remplir des formulaires existants.

Modèles de Formulaires Avancés :


 Base de données : Permet de concevoir un formulaire qui stockera les données dans une base de
données, mais ces formulaires ne sont pas pris en charge en mode Web avec Office Forms Services
 Service Web : pour des formulaires basés sur des Service Web
 Fichier ou schéma XML : si on a un fichier XSD définissant un schéma pour la structure des données
XML qui seront générées lorsqu’on enregistrera un formulaire
 Fichier de connexion de données : Permet de créer des formulaires qui seront basés sur des
connexions de données déjà stockées dans SharePoint (dans des bibliothèques de connexion de
données)
 Panneau Informations sur le document : Pour concevoir des formulaires personnalisés qui
s’afficheront dans le panneau d’information dans Office (Word, Excel, Powerpoint)

L’interface de conception InfoPath


Pour utiliser correctement InfoPath et connaître les possibilités de conception, la description de l’interface
InfoPath permet d’en connaître la richesse.
Tout d’abord le ruban InfoPath

Les onglets permettent d’avoir accès aux fonctions de conception, on note :


 Accueil : permet de concevoir les formats, ajouter les contrôles du formulaire et définir les règles de
validation sur les données qui seront saisies.
 Insertion : Permet d’ajouter des formats de disposition, des images, des liens.
 Création de page : pour ajouter des affichages, définir les thèmes couleurs, les mise en page.
 Données : Permet de définir toutes les sources de données externes utilisées dans le formulaire.
 Développeur : Pour avoir accès à Visual Studio Application pour Office.
 Disposition : Permet de définir les alignements, modifier les tableaux et les cellules des tableaux

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 53


1 Présentation des possibilités de développement dans Office 365
Au ruban, s’ajoute un volet à droite permettant de
définir la structure des données dans les fichiers XML
qui seront générés lors de la saisie des données.

Lorsqu’on remplit un formulaire, le fichier contenant


toutes les données saisies est au format XML. La
structure du format XML est affichée dans le volet
Champs dans InfoPath.

On peut définir le format XML que l’on souhaite en


changeant les noms des champs et en ajoutant des
champs enfants : cela revient à créer la structure XML
et le vocabulaire des formulaires générés

Etapes de conception
Les étapes dans une conception InfoPath devraient normalement être les suivantes :
 Tout d’abord il faut connaître les données du formulaire et ensuite définir le format de ces données.
 Concevoir le formulaire en plaçant les contrôles qui rempliront les données du formulaire
 Mettre en place les règles de validation, les filtres et la logique métier
 Publier le formulaire sur sa destination finale

Usages et conseils de développement

 On vous demande de personnaliser un formulaire pour une liste personnalisée en ajoutant des
éléments graphiques, des règles de validation différentes de celles en standard OOTB.

 On vous demande de créer de toute pièce une solution de formulaire en partant de zéro avec un focus
sur la saisie des données et des listes SharePoint utilisées en source pour le remplissage des données.

Prise de notes

54 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
2) Focus sur PowerApp

PowerApps est un outil Microsoft qui offre la possibilité de développer rapidement des applications
personnalisées qui peuvent être connectés à d’autres outils Microsoft comme SharePoint, OneDrive,
Office 365, SQL Server via des passerelles et des APIs (API REST).

Il offre la possibilité de développer des composants que nous pouvons intégrer sous SharePoint Online ou
bien personnaliser des formulaires SharePoint :

PowerApp ne fonctionne qu’avec la nouvelle expérience de SharePoint, le produit similaire est


InfoPath qui lui ne fonctionne qu’avec l’expérience classique.

Les utilisateurs de PowerApps peuvent créer des web apps, mobile apps et logique métier (basée sur des
workflow)

Les composants de PowerApp


Microsoft PowerApp a pour but de permettre à quiconque de créer des applications business rapidement
sans avoir une connaissance en développement. Cet outil est dédié aux développeurs IT, aux employeurs
qui veulent développer leurs propres applications.
Les applications développées par PowerApp ont la possibilité de connecter à d’autres technologies
comme Office 365, Dynamics CRM, OneDrive, SharePoint, SQL Server, Oracle databases, SAP, …
Pour créer publier et administrer vos applications il suffit d’utiliser les différentes plateformes de
PowerApps :
 https://web.PowerApps.com/ : à travers lequel vous pouvez ouvrir et gérer des applications, créer
des connexions à vos données.
 https://home.dynamics.com/ : c’est dans lequel l’utilisateur des applications PowerApps peut trouver
l’application qui répond à ses besoins et qui était partagé dans Microsoft AppSource
 PowerApp Studio : vous installer cet outil dans vos PC en version Windows 8 pour créer des
PowerApps applications de la même façon que vous faisiez en ligne, configurer les éléments
d’interface utilisateur et des formules de type Excel.
 PowerApp Web Studio : cet outil a les mêmes avantages offerts par PowerApps Studio mais on
travaille en version en ligne sur n’importe quels browsers
 Centre d’administration PowerApp ou https://admin.PowerApps.com/ : à travers cette plateforme
vous définissez des environnements et des stratégies de données.
 PowerApp Player : c’est dans lequel vous pouvez lancer vos applications dans des appareils mobiles
virtuels qui contiennent des supports pour IOS, Android, Windows Phone.
 Connecteurs et passerelles : ce sont des connecteurs qui permet la connexion entre plusieurs service
SaaS comme Microsoft SharePoint, Microsoft Office 365, Google Drive, Facebook, Twitter, Microsoft
OneDrive, Salesforce, Slack, GitHub, Dynamics AX, Dynamics CRM, etc… connexion à SQL Databases, la
possibilité d’utiliser des protocoles tel que FTP, SMTP, RSS… ainsi qu’une connexion à des ressources
comme Microsoft SQL Server ou Microsoft SharePoint
 Microsoft Flow : avec PowerApp vous pouvez convertissez des tâches répétitives en flux de travail
après avoir déclencher un évènement par l’intermédiaire du Microsoft Flow .
 Common Data Service : c’est la plate-forme de données d'entreprise PowerApp qui
Fournit une implémentation du modèle de données commun Microsoft avec des services pour créer des
applications, des entités personnalisées, des listes de sélection. Comme il offre la possibilité de protéger,
importer et exporter des données.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 55


1 Présentation des possibilités de développement dans Office 365

L’architecture coté client et coté cloud


PowerApp fait partie de la suite de services maintenant proposée avec les plans Office 365, il a
l’architecture suivante :

Architecture PowerApp
. : source Microsoft Channel 9

Usage de PowerApp
À travers son nouvel outil, Microsoft annonce des avantages tant pour les employés que pour les
développeurs et professionnels de l’IT. En ce qui concerne les employés, PowerApp permet de :
• Créer des applications qui fonctionnent sur tout type d’appareil avec des modèles pour démarrer
rapidement.
• Créer des applications avec la possibilité de connecter PowerApp aux services cloud tels qu’Office
365, Dynamics CRM, OneDrive, SharePoint, SQL Server, les bases de données Oracle, SAP et plus.
• Créer des applications avec la possibilité de les partager comme des documents. Il suffit de taper
une adresse e-mail pour que vos collègues de travail puissent profiter d’une application que vous
avez créée.
Avec PowerApp on peut créer des applications qui offrent aux utilisateurs la possibilité d’avoir une
connexion à leur Data Sources tous en respectant les règles de sécurité des données et les contrôles de
confidentialité : On-Premises Data / Data Service / Data Source

Prise de notes

56 Stéphane LEENHARDT - SupMicro tous droits 2019


1 Présentation des possibilités de développement dans Office 365
3) Présentation de SharePoint Designer

Après s'être connecté au site (ou sous-site), SharePoint Designer permet :


- D'ajouter et de modifier des Listes et des Bibliothèque
- De mettre en place des Flux de travail (Workflow)
- Ajouter et modifier des Pages
- Ajouter des "Pièces jointes" (anciennement éléments de site)
- Ajouter et modifier des types de contenu
- Ajouter et modifier des colonnes de sites, qui pourront ensuite être utilisées dans les listes et les
Bibliothèques
- Ajouter et modifier des Types de contenu externe
- Ajouter et paramétrer des Sources de données (SQL, Web Services etc…)
- Ajouter et modifier des Pages Maîtres
- Ajouter et modifier des Dispositions de page (disponible si l'infrastructure de publication a été
activée)
- Ajouter et gérer les groupes d'utilisateurs
- Accéder aux sous-sites

La principale utilisation de SharePoint Designer :


- Concevoir des Workflow
- Concevoir des solutions du BCS pour se connecter a des bases de données externes.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 57


1 Présentation des possibilités de développement dans Office 365
Actuellement SharePoint Designer est le seul produit Microsoft capable d’afficher la structure physique
d’un site SharePoint Online.

C’est donc un outil indispensable pour un développeur même si d’autres outils open source permettent
de se connecter à un site SharePoint Online, étant donné que c’est l’outil de l’éditeur il faut l’avoir sur son
poste de développement.

L’utilisation de SharePoint Designer sur un site SharePoint Online vous fait perdre tout support de la
part de Microsoft.

Prise de notes

58 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint

I.Le Modèle Objet Client de SharePoint

Le Modèle Objet Client de SharePoint


• Installation du SDK
• Architecture de fonctionnement
• Etablir une connexion à SharePoint Online

Opérations de modifications avec le modèle objet


• Modifier une propriété
• Ajout dans SharePoint

Exemples de Programmation
• Bonnes pratiques de programmation du CSOM
• Exemples de programmation
• SharePoint PnP CSOM

1) Installation du SDK et disponibilité

Le CSOM SharePoint Online


Une librairie est dédiée aux développements SharePoint Online :
C’est le pakckage NuGet : Microsoft.SharePointOnline.CSOM

 Dans Visual Studio vérifiez si vous disposez du pakckage NuGet approprié :


Dans le menu Outils -> Gestionnaire de package NuGet -> Console du gestionnaire de package

Pour rechercher la dernière version disponible de la librairie :


Find-Package Microsoft.SharePointOnline

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 59


2 Les Modèles Objet Clients de SharePoint
Le résultat dans la console est le suivant :
Id Versions Description
-- -------- -----------
Microsoft.SharePointOnline.CSOM {16.1.7618.1200} This package
contains SharePoi...
Temps écoulé : 00:00:00.7931209

 Pour installer un nouveau package dans le projet par défaut dans Visual Studio :

Install-Package Microsoft.SharePointOnline.CSOM

Ou dans le cas ou plusieurs projets sont ouverts dans une solution :

Install-Package Microsoft.SharePointOnline.CSOM -ProjectName LibCodeUtil

Reference sur les commandes NuGet :


https://docs.microsoft.com/fr-fr/nuget/tools/package-manager-console

La documentation des API


https://msdn.microsoft.com/en-us/library/office/jj193041.aspx
 On retrouve cette url en recherchant : «.NET client API reference for SharePoint Online »

On peut également télécharger « SharePoint Online Client Component SDK » depuis le


téléchargement Microsoft, mais attention les versions ne sont pas régulièrement à jour :
Par exemple si vous téléchargez sur Microsoft Download vous aurez la version 16.0.6906.1200 alors
que dans la galerie NuGet la dernière version est la 16.1.7618.1200.

Il est donc conseillé de privilégier le package NuGet pour obtenir les dernières versions de
librairies.

2) Architecture et fonctionnement

L’accès se fait à distance, c’est une nouvelle solution de développement en remplacement des Web
Service intégrés à SharePoint OnLine s’appuyant sur le Framework W.C.F.

Le modèle objet est prévu de manière à donner une même logique de développement pour tous les
accès clients qu’ils soient .NET, Mobile ou JavaScript

Les modèles objet client.NET, Mobile et ECMAScript sont différents mais profitent d’une logique de
programmation équivalente à celle de la programmation Serveur :

Prise de notes

60 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint

Données SharePoint

Consistence Efficacité
Application Client
.Net CLR Mobile JavaScript

Architecture des échanges entre le client et SharePoint


Communication assurée par les standards du Web :
JSON, XML et architecture AJAX.
L’harmonisation des modèles de programmation client permet une même logique de programmation
pour tous les modes clients :
1. Obtenir le ClientContext : Objet Central de communication
2. Lecture de propriété par la méthode Load du ClientContext
3. Toutes les requêtes doivent être terminées par ExecuteQuery

Données SharePoint Base de Contenu

SharePoint API
Application
Serveur
Web Service Client.svc

JSON XML
Client OM WPF/WinForm/Office
Application
Mobile
Client Application JavaScript
Client

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 61


2 Les Modèles Objet Clients de SharePoint

Application Client SharePoint OnLine

Séquence de Commandes Client.svc


command 1;
command 2; Exécute les commandes
command 3; dans un lot
XML
command 1;
context.ExecuteQuery();
command 2;
command 3;
JSON
Traitement du résultat Envoi le résultat

Equivalence des modèles de programmation selon les langages

Server .NET Managed Silverlight JavaScript


(Microsoft.SharePoint) (Microsoft.SharePoint.Client) (Microsoft.SharePoint.Client.Silverlight) (SP.js)
SPContext ClientContext ClientContext ClientContext
SPSite Site Site Site
SPWeb Web Web Web
SPList List List List
SPListItem ListItem ListItem ListItem
SPField Field Field Field

On retrouve des similitudes entre les différents modèles objet qui possèdent les mêmes classes mais
se programment différemment selon le langage.

Le runtime .NET conserve l’identité du ClientContext, ce qui permet de réaliser plusieurs opérations
qui affecteront l’objet et modifieront son état : Cela permet de continuer à travailler avec le même
objet sans avoir à demander une nouvelle connexion et ainsi d’éviter des allers et retours multiples
entre le client et le serveur SharePoint.

Le Contexte permet de centraliser les échanges entre l’application et SharePoint ce qui autorise un
contrôle de la volumétrie : comme les requetés sont envoyées en XML, ce XML est chargé dans la
mémoire du serveur ce qui peut solliciter les ressources. Pour cette raison la taille de la trame ne
peut pas dépasser 3,2 Mo ce qui est déjà énorme.

Prise de notes

62 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint

Type de Assemblages / Taille Emplacement


Modèle
Client .NET Microsoft.SharePoint.Client.dll (281ko) Reference locale au projet .NET
Microsoft.SharePoint.Client.Runtime.dll
(145ko)
Silverlight Microsoft.SharePoint.Client.Silverlight (262Ko) Se trouve dans SharePoint Online
Microsoft.SharePoint.Client.Silverlight.Runtime (16\TEMPLATE\LAYOUTS\ClientBin)
(138Ko)
ECMAScript SP.js (380Ko) (SP.debug.js /559KB) Se trouve dans SharePoint Online
SP.Core.js (13Ko) (SP.Core.debug.js /20KB) (16\TEMPLATE\LAYOUTS)
SP.Runtime.js (68Ko) (SP.Runtime.debug.js
/108KB)

Limites du modèle objet client :

Il faut gérer la synchronisation et les mises à jour, Pas d’élévation possible des privilèges d’exécution,
les requêtes sont faites en lot, Les applications .NET exécutent en synchrones, les applications
Mobile/ECMAScript sont asynchrones.

Cas d’usages de ce FrameWork

• On vous demande de réaliser un outil d’administration avec une interface Graphique Riche et
permettant de réaliser des opérations dans SharePoint.

De nombreux éditeurs utilisent le CSOM .NET pour fournir des solutions métiers et des outils
permettant de gérer une plateforme SharePoint : Par exemple « SharePoint Online Browser » utilise
exclusivement le CSOM .NET.

• On vous demande de faire dialoguer un site ASP.NET avec une plateforme SharePoint Online sans
utiliser des mécanismes d’intégration entre SharePoint et l’application ASP.NET :
Les deux environnements doivent dialoguer mais rester complètement indépendant les uns des
autres.

 En réalité les compléments hébergés par un fournisseur utilisent le CSOM .NET pour dialoguer
avec SharePoint et une application hébergée pour faire le lien et l’identification entre SharePoint et
l’application.

3) Etablir une connexion à SharePoint Online

L’objet principal qui va gérer le contexte d’une connexion à SharePoint est le ClientContext :
C’est l’objet central dans la programmation coté client, il fonctionne d’une manière similaire au
contexte du serveur.

L’obtention d’un contexte répond à des exigences différentes selon le type d’application

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 63


2 Les Modèles Objet Clients de SharePoint
Application Managée Il faut fournir une URL absolue
.NET
ECMAScript Pas d’URL ou une URL relative ou se trouve la page
Silverlight Pas d’URL ou une URL relative à la page ou se trouve le code Silverlight

L’espace de nom Microsoft.SharePoint.Client peut contenir des classes qui peuvent venir en conflit
de nom avec d’autres librairies. Dans ce cas, Il faut utiliser dans cas un alias d’espace de nom :

using Client = Microsoft.SharePoint.Client;

Se Connecter à SharePoint avec un credential (combinaison login+mot de passe)

La plupart des tenant SharePoint utilisent le mécanisme d’identification Microsoft pour résoudre
l’identité des utilisateurs dont la source est en réalité Azure Active Directory.

A ce sujet Microsoft donne un accès à Azure Active Directory même si vous ne disposez pas
d’infrastructure ou d’abonnement Azure :
Depuis l’application Administrateur-> Centre d’administration -> Azure Active Directory

Exemple de connexion

using (var context = new ClientContext("https://xxxx.SharePoint.com"))


{
var securepassword = new SecureString();
foreach (char c in txtPassword.Text)
{
securepassword.AppendChar(c);
}
context.Credentials = new SharePointOnlineCredentials("login”, securepassword);
context.Load(context.Web, w => w.Title);
context.ExecuteQuery();
}

Une fois le contexte obtenu, chaque demande de propriétés est demandée par la méthode Load()
suivi d’ExecuteQuery() :

Web web = context.Web;


context.Load(web, w => w.Title); //ou context.Load(web); pour tout charger
context.ExecuteQuery();

MessageBox.Show(web.Title);

On charge la requête avec Load() et on transmet les demandes au serveur par ExecuteQuery().
Il faut faire cela pour chaque demande de valeur venant du serveur.

Volumétrie des données retournées par SharePoint

Prise de notes

64 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
La méthode Load() permet d’indiquer grâce à une expression Lambda les valeurs des propriétés que
l’on souhaite obtenir en retour depuis SharePoint :

On peut demander le Titre et la description d’un site en combinant plusieurs instructions dans le
même appel :

context.Load(web, w => w.Title, w => w.Description);

Par exemple la classe Web contient plusieurs dizaines de propriétés qui ne seront pas valorisées
(elles seront dans un état PropertyOrFieldNotInitializedException ) et uniquement les propriétés
demandées seront retournées dans le retour JSON ce qui donne un maximum de performance !

En analysant le contexte avec le déboguer on voit toutes les propriétés qui ne sont pas demandées
à l’état PropertyOrFieldNotInitializedException et si on essaye de lire ces propriétés on obtient une
Erreur.

De nombreuses instructions utilisent les expressions lambda pour raccourcir le code et transmettre
des filtres sur les valeurs qui seront échangées, cela dans le but de réduire le volume des données qui
transitent entre le client et le serveur.

Les propriétés qui retournent des collections ne sont pas récupérées pour des raisons de
performances. Ainsi, la commande context.Load(web) ne chargera pas les propriétés telles que
Webs, Fiels, etc… Pour ces propriétés il faut faire un chargement explicite pour obtenir toutes les
valeurs.

Par exemple pour charger les sous-sites d’un site il faut un appel explicite et demander la propriété
Webs qui retourne les sous-sites d’un site :

context.Load(web, w => w.Title, w => w.Webs);

Volumétrie d’une demande à l’envoi

On peut appeler plusieurs fois la méthode Load() avant d’appeler la méthode ExcecuteQuery() !

Ainsi on maitrise également le volume d’une requête (au format XML) envoyée à SharePoint :
(La taille des requêtes entrantes sont limitées à 3,2 Mo ce qui est énorme pour un format XML qui
augmente de façon proportionnelle lorsque le contenu est chargé dans la mémoire du serveur.)

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 65


2 Les Modèles Objet Clients de SharePoint
Conclusion
Ainsi les deux objectifs de ce Framework sont remplis :

• La consistance dans les modèles de programmation : .NET, JavaScript et Silverlight


• L’efficacité permettant de contrôler à l’envoi le volume à traiter et dans les réponses fournies
par SharePoint d’affiner les valeurs des propriétés retournées.

Certaines opérations peuvent être complexes avec CSOM et peuvent nécessiter un effort de
programmation :
Il existe un projet open source PnP CSOM qui apporte plusieurs simplifications et si vous ne trouvez
pas facilement de méthode dans le CSOM il est conseillé de regarder dans PnP CSOM si la solution ne
s’y trouve pas.

II. Opérations de Modifications avec le modèle objet client

Modifier des valeurs de propriétés

Cette opération va toujours se faire en 2 temps :


 On modifie la valeur sur l’objet que l’on manipule mais cet objet est déconnecté du serveur, les
modifications que l’on apporte sont faite dans le runtime et l’espace mémoire coté client.

 Il faut créer une commande de changement et l’envoyer au serveur : C’est le rôle de la méthode
Update() qui va créer une commande avec tous les changements opérés sur l’objet.

 Pour envoyer la commande il faut comme pour toute demande appeler la méthode Update() :

Exemple de mise à jour du titre et de la description d’un site

Web web = context.Web;


web.Title = "Nouveau Titre";
web.Description = "Nouvelle Description";

// Attention la méthode Update() ne fait rien sur le serveur


//mais cree une commande qu’il faut envoyer :
// tant que ExecuteQuery() n’est pas appelée
//il ne se passe rien sur le serveur.
web.Update();

// Envoi au serveur et demande de modification a SharePoint


context.ExecuteQuery();

Opération d’ajout dans SharePoint

De la même façon que pour une modification Il faut d’abord créer l’objet coté client, on lui donne des
valeurs et on charge la requête qui transmettra l’ordre de création au serveur SharePoint.

Avec la particularité que toutes les classes qui permettent de faire des ajouts sont suffixées avec le
mot : CreationInformation.
Prise de notes

66 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
Ce suffixe exprime le fait que l’objet sera utilisé pour créer une commande qui va ensuite créer un
nouvel élément dans SharePoint.

La démarche de développement est la suivante :


 On identifie la propriété qui retourne la collection de l’élément que l’on souhaite ajouter.
 On ajoute un objet CreationInformation à cette collection, à ce moment-là une commande de
création sera créée mais il faut l’exécuter si on veut voir un impact dans SharePoint avec
ExecuteQuery()

Exemple d’ajout d’un nouveau site dans une collection de sites

WebCreationInformation creation = new WebCreationInformation();


creation.Url = "projet1";
creation.Title = "Projet Client";
Web newWeb = context.Web.Webs.Add(creation);

// On demande le titre en retour du site apres execution de la commande


context.Load(newWeb, w => w.Title);
context.ExecuteQuery();
string titre = newWeb.Title ;

Pour savoir si vous pouvez ajouter un élément dans SharePoint il faut donc disposer de la classe
appropriée permettant de définir la commande d’ajout qui sera envoyée à SharePoint.

Les objets qui permettent de créer des éléments contiennent tous le mot CreationInformation, ainsi
on trouve :

WebCreationInformation ListCreationInformation
ViewCreationInformation GroupCreationInformation
UserCreationInformation FileCreationInformation
RoleDefinitionCreationInformation FieldLinkCreationInformation
NavigationNodeCreationInformation ContentTypeCreationInformation
ListItemCreationInformation

Ajouts à partir de 2016 à ce jour :

AlertCreationInformation AttachmentCreationInformation
EventReceiverDefinitionCreationInformation HubSiteCreationInformation
ListItemCreationInformationUsingPath Publishing.PageLayoutCreationInformation
WikiPageCreationInformation ViewCreationInformation
WorkflowAssociationCreationInformation

Cette liste est importante car exhaustive et si vous ne trouvez pas l’élément que vous souhaitez
ajouter c’est qu’il n’est pas disponible (encore) dans le CSOM !

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 67


2 Les Modèles Objet Clients de SharePoint
III.Bonnes pratiques de Programmation dans le CSOM

1) Ne pas oublier d’appeler charger les propriétés avant de les appeler

ClientContext context = new ClientContext("http://SiteUrl");


Web web = context.Web;
label1.Text = web.Title;

Cet exemple déclenche une erreur car on a pas chargé avec Load() ni exécuté avec ExecuteQuery().

De la même façon l’exemple suivant déclenche une erreur :


Web web = context.Web;
ListCreationInformation creationInfo = new ListCreationInformation();
creationInfo.Description = web.Title;
creationInfo.Title = web.Title;
List newList = web.Lists.Add(creationInfo);

Les propriétés web.Title et web.Description n’ont pas été chargée et ne sont pas initialisées.

 Ce qu’il faut faire :

Web web = context.Web;


context.Load(web, w => w.Title, w=>w.Description);
context.ExecuteQuery();
ListCreationInformation creationInfo = new ListCreationInformation();
creationInfo.Description = web.Description;
creationInfo.Title = web.Title;
SP.List newList = web.Lists.Add(creationInfo);
context.ExecuteQuery();

2) Appeler des méthodes sur des propriétés d’un objet déjà dans un appel

L’exemple suivent fonctionne :

ClientContext context = new ClientContext("http://SiteUrl");


Web web = context.Web;
SP.List list = web.Lists.GetByTitle("Announcements");

Lors du chargement de la variable list, le CSOM chargera dans le context l’objet web puis demandera
la propriété Lists et appellera la méthode GetByTitle().

3) Lors de l’ajout d’éléments rappeler la collection au lieu d’une variable

Par exemple vous souhaitez ajouter dans l’affichage certaines colonnes d’une liste :

Microsoft.SharePoint.Client.List liste = context.Web.Lists[0];


View vue = liste.Views[0];
vue.ViewFields.Add("Title");
vue.ViewFields.Add("Description");
Prise de notes

68 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
vue.Update();
context.ExecuteQuery();

La description sera bien ajoutée à l’affichage mais pas le Titre :


La raison est que ViewFields retourne une nouvelle copie à chaque appel, c’est donc la dernière copie
en mémoire qui sera mis à jour lors de l’appel de Update() ;

Solution : déclarer une variable intermédiaire pour ne pas travailler sur une copie

Microsoft.SharePoint.Client.List liste = context.Web.Lists[0];


View vue = liste.Views[0];
ViewFieldCollection champsVue = vue.ViewFields;
champsVue.Add("Title");
champsVue.Add("Description");
champsVue.Update();
context.ExecuteQuery();

IV.Exemples de programmation

1) Exemples sur le tenant


Une nouvelle classe permet dans la dernière version du CSOM de manipuler le tenant :
Dans ce cas il faut un contexte d’administration globale connecté sur l’url : https://tenant-
admin.sharepoint.com

Obtenir les sites classiques


Tenant tenant = new Tenant(context);
SPOSitePropertiesEnumerable siteProps = tenant.GetSiteProperties("0", true);
context.Load(siteProps);
context.ExecuteQuery();
Console.WriteLine("Total Site Collections: " + siteProps.Count.ToString());
foreach (var site in siteProps)
{
Console.WriteLine(site.Title + "\t" + site.Template.ToString());
}

Obtenir tous les sites


Tenant tenant = new Tenant(context);
SPOSitePropertiesEnumerable siteProps =
tenant.GetSitePropertiesFromSharePoint("0", true);
context.Load(siteProps);
context.ExecuteQuery();
Console.WriteLine("Total Site Collections: " + siteProps.Count.ToString());
foreach (var site in siteProps)
{
Console.WriteLine(site.Title +"\t"+ site.Template.ToString());
}

Supprimer une collection de sites

var tenant = new Tenant(tenantContext);

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 69


2 Les Modèles Objet Clients de SharePoint
SpoOperation spoOperation =
tenant.RemoveSite("https://tenant.sharepoint.com/sites/Nom_collection");
tenantContext.Load(spoOperation);
tenantContext.ExecuteQuery();

2) Exemples sur les sites

Modifier les propriétés du site web

Web web = context.Web;

web.Title = "Nouveau Titre";


web.Description = "Nouvelle Description";

// Update ne déclenche pas d’aller et retour il faut executer


web.Update();

// envoi de la commande au serveur et mise a jour.


context.ExecuteQuery();

Créer un nouveau site web SharePoint

Cet exemple ajoute un nouveau sous-site enfant sur le site sur lequel le contexte se trouve :

WebCreationInformation creation = new WebCreationInformation();


creation.Url = "site1";
creation.Title = "Hello site1";
Web newWeb = context.Web.Webs.Add(creation);

// Retrieve the new web information.


context.Load(newWeb, w => w.Title);
context.ExecuteQuery();

label1.Text = newWeb.Title;

Supprimer un site

// Delete the web object


context.Web.DeleteObject();
c.ExecuteQuery();

Obtenir la hiérarchie des sites d’une collection de sites

L’API client ne fournit pas de méthode permettant d’obtenir tous les sites d’une collection de sites,
mais uniquement les sous-sites d’un site. Cela oblige à construire soi-même le parcours d’une
collection en utilisant un algorithme récursif permettant de retrouver une hiérarchie complète.

public static void getSubWebs(string path)


{
try
{
Prise de notes

70 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
ClientContext clientContext = new ClientContext( path );
Web oWebsite = clientContext.Web;
clientContext.Load(oWebsite, website => website.Webs, website => website.Title);
clientContext.ExecuteQuery();
foreach (Web orWebsite in oWebsite.Webs)
{
string newpath = mainpath + orWebsite.ServerRelativeUrl;
getSubWebs(newpath);
Console.WriteLine(newpath + "\n" + orWebsite.Title );
}
}
catch (Exception ex)
{

}
}

3) Exemples sur les listes

Obtenir toutes les listes d’un site

Web web = context.Web;


context.Load(web.Lists,
lists => lists.Include(list => list.Title,list => list.Id));

context.ExecuteQuery();
foreach (List list in web.Lists)
{
label1.Text = label1.Text + ", " + list.Title;
}

On peut également utiliser une alternative en stockant les listes dans une collection avec
LoadQuery():
IEnumerable<SP.List> result = context.LoadQuery(
web.Lists.Include(list => list.Title,list => list.Id) );

Ajouter une nouvelle liste et la mettre à jour directement

Web web = context.Web;


ListCreationInformation creationInfo = new ListCreationInformation();
creationInfo.Title = "Ma Liste";
creationInfo.TemplateType = (int)ListTemplateType.Announcements;
List list = web.Lists.Add(creationInfo);
list.Description = "nouvelle description";
list.Update();
context.ExecuteQuery();

Supprimer une liste

Web web = context.Web;


List list = web.Lists.GetByTitle("Ma Liste");
list.DeleteObject();
context.ExecuteQuery();
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 71


2 Les Modèles Objet Clients de SharePoint

Ajouter un nouveau champ à une liste

List list = context.Web.Lists.GetByTitle("Announcements");


Field field = list.Fields.AddFieldAsXml(
"<Field DisplayName='MyField2' Type='Number'/>" , true ,
AddFieldOptions.DefaultValue);
FieldNumber fldNumber = context.CastTo<FieldNumber>(field);
fldNumber.MaximumValue = 100;
fldNumber.MinimumValue = 35;
fldNumber.Update();
context.ExecuteQuery();

4) Exemples sur les éléments de listes

Obtenir les éléments d’une liste

List announcementsList = context.Web.Lists.GetByTitle("Announcements");

// on ne prend que les 100 premiers


CamlQuery query = CamlQuery.CreateAllItemsQuery(100);
ListItemCollection items = announcementsList.GetItems(query);

context.Load(items);
context.ExecuteQuery();
foreach (ListItem listItem in items)
{
label1.Text = label1.Text + ", " + listItem["Title"];
}

Ajouter un nouvel élément dans une liste

List announcementsList = context.Web.Lists.GetByTitle("Announcements");


ListItemCreationInformation itemCreateInfo = new ListItemCreationInformation();
ListItem newItem = announcementsList.AddItem(itemCreateInfo);
newItem["Title"] = "Nouvelle ligne!";
newItem["Body"] = "Bonjour !";
newItem.Update();
context.ExecuteQuery();

Toujours utiliser le « internal name » car les autres noms d’une colonne peuvent changer en
fonction de la langue.

Mettre à jour une ligne de liste

List announcementsList = context.Web.Lists.GetByTitle("Announcements");

ListItem listItem = announcementsList.GetItemById(1);


listItem["Body"] = "This is my new value!!";
listItem.Update();
context.ExecuteQuery();

Prise de notes

72 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
Supprimer une ligne dans une liste

List announcementsList = context.Web.Lists.GetByTitle("Announcements");


ListItem listItem = announcementsList.GetItemById(2);
listItem.DeleteObject();
context.ExecuteQuery() ;

5) Exemples sur la gestion des utilisateurs

Ajouter un utilisateur dans un groupe SharePoint

GroupCollection siteGroups = context.Web.SiteGroups;


// on suppose qu’on connait l’id du groupe =5
Group membersGroup = siteGroups.GetById(5);

// on cree l’utilisateur
UserCreationInformation userCreationInfo = new UserCreationInformation();
userCreationInfo.Email = "user@domain.com";
userCreationInfo.LoginName = "domain\\user";
userCreationInfo.Title = "Mr User";

// on l’ajouter au groupe
User newUser = membersGroup.Users.Add(userCreationInfo);

context.ExecuteQuery();

Obtenir la liste des utilisateurs dans un groupe

GroupCollection siteGroups = context.Web.SiteGroups;


Group membersGroup = siteGroups.GetById(5);
context.Load(membersGroup.Users);
context.ExecuteQuery();

foreach (User member in membersGroup.Users)


{
label1.Text = label1.Text + ", " + member.Title;
}

Création d’un nouveau Niveau d’autorisation (Role)

BasePermissions perm = new BasePermissions();


perm.Set(PermissionKind.CreateAlerts);
perm.Set(PermissionKind.ManageAlerts);

RoleDefinitionCreationInformation creationInfo = new


RoleDefinitionCreationInformation();
creationInfo.BasePermissions = perm;
creationInfo.Description = "permet de gerer les alertes";
creationInfo.Name = "Gestionnaire d’alertes";
creationInfo.Order = 0;
RoleDefinition rd = context.Web.RoleDefinitions.Add(creationInfo);
context.ExecuteQuery();

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 73


2 Les Modèles Objet Clients de SharePoint
Ajout d’un niveau d’autorisation à un utilisateur

Principal user = context.Web.SiteUsers.GetByLoginName(@"domain\user");

// on suppose qu’on a un role Read :


RoleDefinition readDef = context.Web.RoleDefinitions.GetByName("Read");
RoleDefinitionBindingCollection roleDefCollection = new
RoleDefinitionBindingCollection(context);
roleDefCollection.Add(readDef);
// on fait le lien entre le role et l’utilisateur
RoleAssignment newRoleAssignment = context.Web.RoleAssignments.Add(user,
roleDefCollection);
context.ExecuteQuery();

6) Autres exemples

Détecter par programmation si votre liste/bibliothèque sont affiché à l’aide de « modernes » ou «


classique »

PageRenderType , que vous pouvez obtenir à l’aide de CSOM ou REST

using (var cc = new ClientContext(siteUrl))


{
cc.Credentials = new SharePointOnlineCredentials(userName, password);

// charge une page


File file =
cc.Web.GetFileByServerRelativeUrl("/sites/dev/ECMTest/Forms/AllItems.aspx");
cc.Load(file, f => f.PageRenderType);
cc.ExecuteQuery();

// Check page render type


Console.WriteLine($"Status = {file.PageRenderType}");
}

La propriété PageRenderType a été introduite dans 2017 janvier CSOM version (16.1.6112.1200).

Personnaliser l’expérience par défaut d’une liste

// charger la liste
var list = context.Web.Lists.GetByTitle(title);
context.Load(list);
context.ExecuteQuery();

Prise de notes

74 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
// Possible options are Auto (= what it's defined at tenant level), NewExperience
//(= "modern") and ClassicExperience
list.ListExperienceOptions = ListExperience.ClassicExperience;

list.Update();
context.ExecuteQuery();

Exemple de Chargement de Fichier avec le modèle objet Client

using (ClientContext clientContext = new ClientContext(siteUrl))


{

string uploadLocation = Path.GetFileName(cheminFichier);


if (!string.IsNullOrEmpty(subfolderPath))
{
uploadLocation = string.Format("{0}/{1}", subfolderPath, uploadLocation);
}
uploadLocation = string.Format("/{0}/{1}/{2}", NomSite, NomBibliothque,
Nomfichier);
var list = clientContext.Web.Lists.GetByTitle(NomBibliotheque);
var fileCreationInformation = new FileCreationInformation();
fileCreationInformation.Content = System.IO.File.ReadAllBytes(cheminFichier);
fileCreationInformation.Overwrite = true;
fileCreationInformation.Url = uploadLocation;
list.RootFolder.Files.Add(fileCreationInformation);
clientContext.ExecuteQuery();
}
 Le « using » est disponible par une méthode d’extension qui se trouve dans la librairie
Client.Runtime :

Exemple de chargement direct sans passer par Service.svc

Service.svc est configuré pour ne pas autoriser les fichiers de plus 3,2Mo
Pour augmenter cette limite la meilleure méthode est d’utiliser le protocole WebDav pour charger
les fichiers :

ClientContext context = new ClientContext("http://url de la collection de sites");


using (FileStream fs = new FileStream(@"chemin du fichier", FileMode.Open))
{
Microsoft.SharePoint.Client.File.SaveBinaryDirect(context,"/Nom_Site/Nom_Liste/Nom
_Fichier", fs, true);
}
// pour mettre a jour des proprietes après chargement du fichier
var web = context.Web;
var f = web.GetFileByServerRelativeUrl("/Nom_Liste/Nom_Fichier");
var item = f.ListItemAllFields;
item["Title"] = "Value";
item["Author"] = 66;
item["Editor"] = 67;
item["Created"] = DateTime.Now.AddYears(-10);
item["Modified"] = DateTime.Now.AddYears(-5);
item.Update();
clientContext.Load(item, i=>i.Id);
clientContext.ExecuteQuery();

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 75


2 Les Modèles Objet Clients de SharePoint
Exemple d’Appels avec WPF et une propriété imbriquée pour afficher une liste des listes SharePoint

Si on souhaite afficher toutes les listes d’un site et l’URL de chaque liste :
using (ClientContext contexte = new ClientContext("http://serveur"))
{
Web lesiteRacine = contexte.Web;
contexte.Load(lesiteRacine,x=>x.Title,x=>x.Lists);
contexte.ExecuteQuery();
foreach (Microsoft.SharePoint.Client.List liste in lesiteRacine.Lists)
{
contexte.Load(liste, x => x.RootFolder); //il faut charger explicitement
}
contexte.ExecuteQuery();
LabelTitre.Content = lesiteRacine.Title;
List<Microsoft.SharePoint.Client.List> listes=
lesiteRacine.Lists.ToList<Microsoft.SharePoint.Client.List>();
ListBoxListe.DataContext = listes;
ListBoxListe.ItemsSource = listes;
}

L’expression de liaison dans WPF pour afficher dans une liste sera :

<ListBox x:Name="ListBoxListe" Margin="158,89,24,30">


<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Title}"/>
<TextBlock DataContext="{Binding RootFolder}"Text="{Binding ServerRelativeUrl}"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Prise de notes

76 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
V.Le SharePoint PnP CSOM pour SharePoint Online

Les projets PnP (Pattern and Practices) sont des surcouches qui apportent des fonctionnalités
supplémentaires et simplifiées d’un existant.

On trouve différents PnP dans SharePoint en fonction de la technologie que l’on souhaite utiliser :
Dans le cas du CSOM on trouve le SharePointOnlinePnpCore en tant que package NuGet.

Que permet le PnP ?


• Moteur de provisionnement à distance dans SharePoint
• Gestionnaire d’identification
• Un Framework (Timer Job) pour les travaux planifiés
• Des méthodes utilitaires et d’extensions.

(Attention ces Frameworks sont mis à jour tous les mois : corrections et ajout de nouvelles
fonctionnalités demandées par la communauté.)

Le projet est disponible sur le github : https://github.com/SharePoint/pnp-sites-core

1) Le Provisionnement à distance

En utilisant le nouveau moteur d’approvisionnement PnP, vous pouvez modéliser un site en


configurant la conception des colonnes de site, des types de contenu, des définitions et des instances
de liste, des apparences composées, des pages (pages de composants WebPart ou pages Wiki) et
bien plus via votre navigateur web.
Lorsque vous avez terminé la conception, vous pouvez exporter ce que vous avez fait dans un format
de modèle d’approvisionnement durable (XML, JSON ou ce que vous voulez), et vous pouvez
appliquer ce modèle à autant de sites cibles que vous le souhaitez.

Grâce à
une
nouvelle

méthode d’extension, appelée GetProvisioningTemplate, vous pouvez récupérer un objet


Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 77


2 Les Modèles Objet Clients de SharePoint
ProvisioningTemplate qui peut être enregistré à l’aide d’un fournisseur de modèle et un formateur de
sérialisation.

Enregistrer un modèle de site en format XML

ProvisioningTemplateCreationInformation ptci = new


ProvisioningTemplateCreationInformation(ctx.Web);

// Create FileSystemConnector, so that we can store composed files somewhere


temporarily
ptci.FileConnector = new FileSystemConnector(@"c:\temp\pnpprovisioningdemo", "");
ptci.PersistComposedLookFiles = true;
ptci.ProgressDelegate = delegate (String message, Int32 progress, Int32 total)
{
// Use this to simply output progress to the console application UI
Console.WriteLine("{0:00}/{1:00} - {2}", progress, total, message);
};

// Execute actual extraction of the tepmplate


ProvisioningTemplate template = ctx.Web.GetProvisioningTemplate(ptci);

Appliquer le modèle de site

using (var context = new ClientContext(destinationUrl))


{
context.Credentials = new SharePointOnlineCredentials(userName, password);
Web web = context.Web;
context.Load(web, w => w.Title);
context.ExecuteQueryRetry();

// Configure the XML file system provider


XMLTemplateProvider provider =
new XMLFileSystemTemplateProvider(String.Format(@"{0}\..\..\",
AppDomain.CurrentDomain.BaseDirectory),"");

// Load the template from the XML stored copy


ProvisioningTemplate template =
provider.GetTemplate("PnP-Provisioning-Demo-201505-Polished.xml");

// Apply the template to another site


Console.WriteLine("Start: {0:hh.mm.ss}", DateTime.Now);
// We can also use Apply-PnPProvisioningTemplate
web.ApplyProvisioningTemplate(template);
Console.WriteLine("End: {0:hh.mm.ss}", DateTime.Now);
}

Les avantages sont multiples :


• Personnaliser les modèles. Étant donné que les collections de sites sont toujours démarrées
avec un modèle out-of-the-box, les personnalisations que vous présentez en utilisant le
nouveau modèle de mise en service à distance intègrent des mises à jour automatiques sans
toute maintenance supplémentaire requis par vous. En outre, cette approche permet d’éviter
les problèmes qui en résulte différents modèles utilisés dans différentes collections de sites.

Prise de notes

78 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
• Utiliser un modèle basé sur le modèle. Fournit un modèle de mise en service simple basée sur
un modèle, qui vous permet d’enregistrer une conception de site existant comme modèle de
mise en service.

• Modèles persistant au format sérialisé. Vous êtes en mesure de conserver vos modèles de
mise en service dans n’importe quel format de sérialisation vous convient le mieux ; par
exemple, XML ou JSON.

Démarche de conception

1. Conception et création de votre site de personnalisation.

2. Création et si vous le souhaitez conserver votre modèle de mise en service dans un


format sérialisé que vous choisissez.

3. Application du modèle de mise en service pour une collection de sites de nouveau ou


existant qui a été créée à l’aide d’un modèle de site out-of-the-box.

2) Le FrameWork de Timer Job

L’infrastructure du travail du minuteur PnP est un ensemble de classes conçus pour simplifier la
création de processus d’arrière-plan qui fonctionnent sur des sites SharePoint.
L’infrastructure du travail du minuteur est similaire aux travaux du minuteur code local confiance
totale (SPJobDefinition). La principale différence entre l’infrastructure du travail du minuteur et le
travail de minuteur de code de confiance totale est que l’infrastructure du travail du minuteur utilise
des API côté client uniquement et par conséquent, peuvent (et devraient) être exécuté en dehors de
SharePoint. L’infrastructure du travail du minuteur permet de créer des travaux du minuteur qui
fonctionnent sur SharePoint Online.

Le développement est assez simple, en revanche dans le cadre d’Office 365 il faut déployer le code
dans un service qui permette une execution planifiée :
Azure ou un serveur Windows OnPremise.

La classe de Timer Job

public class SimpleJob: TimerJob


{
public SimpleJob() : base("SimpleJob")
{
TimerJobRun += SimpleJob_TimerJobRun;
}

void SimpleJob_TimerJobRun(object sender, TimerJobRunEventArgs e)


{
e.WebClientContext.Load(e.WebClientContext.Web, p => p.Title);
e.WebClientContext.ExecuteQueryRetry();
Console.WriteLine("Site {0} has title {1}",
e.Url, e.WebClientContext.Web.Title);
}

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 79


2 Les Modèles Objet Clients de SharePoint
}

Execution du travail

static void Main(string[] args)


{
// Instantiate the timer job class
SimpleJob simpleJob = new SimpleJob();

// The provided credentials need access to the site collections you want to use
simpleJob.UseOffice365Authentication("user@tenant.onmicrosoft.com", "pwd");

// Add one or more sites to operate on


simpleJob.AddSite("https://<tenant>.sharepoint.com/sites/d*");

// Run the job


simpleJob.Run();
}

Le déploiement

Soit en tant qu’Azure WebJob ou alors dans le planificateur des taches de Windows.

3) Exemple de simplification de code

Afficher tous les sites


Pour afficher la liste de tous les sites d’une collection avec PnP il suffit d’écrire le code suivant :

static void Main(string[] args)


{
string siteUrl = "https://sharepointonline.sharepoint.com";

AuthenticationManager authManager = new AuthenticationManager();


//Interactive Login to SharePoint site - Opens a Online signin page to
//authenticate the user
var context = authManager.GetWebLoginClientContext(siteUrl);

IEnumerable<string> webUrls = context.Site.GetAllWebUrls();


string weburl = "";
foreach (var url in webUrls)
{
weburl += url + "\r\n";
}
Console.WriteLine(weburl);

Console.WriteLine("Press any key to exit.");


Console.ReadKey();
}
Il n’est pas nécessaire de faire du récursif.

Créer une vue sur une liste

Prise de notes

80 Stéphane LEENHARDT - SupMicro tous droits 2019


2 Les Modèles Objet Clients de SharePoint
using (var clientContext =
authManager.GetSharePointOnlineAuthenticatedContextTenant(siteUrl, userName,
password))
{
// List Name
string listName = "TestList";

// Get List
List list = clientContext.Site.RootWeb.GetListByTitle(listName);

// Input for creating view


string viewName = "customview";
string[] viewFields = { "Title", "Author" };
bool defaultView = true;

// Creates New View


View newView = list.CreateView(viewName, ViewType.None, viewFields,30,
defaultView, null, false, false);

// Output
Console.WriteLine("The view has been created.");
Console.WriteLine("View Name : " + newView.Title);
Console.WriteLine("View ID : "+newView.Id);
Console.ReadKey();
}

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 81


3 Développement coté Client - Navigateur

Dévéloppéménts cliénts intégrés dans


SharéPoint
Pour communiquer avec SharePoint depuis un client, plusieurs méthodes sont possibles.
Le choix se fait en fonction de l’emplacement d’exécution du code et du langage utilisé pour le
développement.

Le critère principal étant de savoir quelle est l’expérience que vous allez cibler :
Moderne ou classique ?

I.Possibilités et critères de sélection

1) Méthodes disponibles pour ajouter du code Client dans SharePoint

Le WebPart Editeur de Script / Editeur de contenu

Dans les pages d’expérience classique le WebPart Editeur de contenu est le WebPart le plus courant et
fréquemment utilisé lorsqu’on veut facilement ajouter un code JavaScript :

Mais il peut être désactivé par l’administrateur du tenant :


Si on désactive l’utilisation des scripts personnalisés, Il faut charger les librairies nécessaires et on accède
au DOM de la page (performances faibles)

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-


ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>

Prise de notes

82 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
//Code personnalisé
</script>

• Il ne permet pas de maintenir facilement le script.

Le WebPart Editeur de contenu, permet de faire un lien vers un fichier qui sera chargé dans la page :
Ce fichier peut faire appel à des fonctions JavaScript : c’est un peu mieux en termes de maintenabilité.

(Une société a développé un Editeur de Script pour les pages modernes, mais fortement déconseillé
http://www.bitalus.com/)

Ajout de custom action

Que sont les custom action et ou sont-elles dans SharePoint ?

Les actions personnalisées sont en réalité des nouveaux menus que vous pouvez apporter dans les menus
existants de SharePoint.

Le schéma de l’élément CustomAction est disponible sur :


https://docs.microsoft.com/fr-fr/sharepoint/dev/schema/customaction-element

<CustomAction
Description = "Text" GroupId = "Text" Id = "Text" ImageUrl = "Text"
Location = "Text" Rights = "Text" RootWebOnly = "TRUE" | "FALSE"
ScriptSrc = "Text" Sequence = "Integer" Title = "Text" UIVersion = "Integer">

<UrlAction Url="Text" />


</CustomAction>

Ces actions peuvent être ajoutées sur plusieurs éléments de l’interface dont la liste est la suivante :

A partir de la liste des default custom action ID on peut connaitre les valeurs à déclarer pour ajouter
l’action à l’emplacement souhaité :
https://docs.microsoft.com/en-us/sharepoint/dev/schema/default-custom-action-locations-and-ids

Dans le tableau, la liste associe le Location à la propriété Location, l’ID Group au GroupID ou au
CustomActionGroup.

 On peut ajouter des menus dans l’écran de paramètres


Le location est toujours : Microsoft.SharePoint.SiteSettings pour le menu de paramètres
Le GroupId permet de cibler la section que l’on souhaite : Customization, Galleries, SiteAdministration,
SiteCollectionAdmin, UsersAndPermissions

Exemple :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 83


3 Développement coté Client - Navigateur

Le menu Supprimer les sites est une action personnalisée ajoutée par programmation à l’interface
SharePoint.

 On peut ajouter des menus dans le menu Paramètres


Le location est Microsoft.SharePoint.StandardMenu
Microsoft laisse des trous de 100 en 100 dans ce menu pour la séquence.

Exemple de définition :
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="SiteActionsToolbar" GroupId="SiteActions"
Location="Microsoft.SharePoint.StandardMenu" Sequence="1000" Title="Parametres du site
Personnalisé">
<UrlAction Url="/_layouts/Settings.aspx"/>
</CustomAction>
</Elements>

 On peut ajouter des menus dans le menu de l’élément

Exemple :

Est ajouté avec la définition suivante :

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Id="CA_WF_Init" RegistrationType="List" RegistrationId="101"
ImageUrl="/SiteAssets/Images/RTEDCELL.GIF" Location="EditControlBlock"
Sequence="301" Title="My Custom ECB Menu Item" >
<UrlAction
Prise de notes

84 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
Url="~site/default.aspx?ItemId={ItemId}&amp;ListId={ListId}"/>
<!--Url="<Custom Application Page URL>?ItemId={ItemId}&amp;ListId={ListId}"/>-->
</CustomAction>
</Elements>

 On peut également ajouter des actions dans les Rubans de SharePoint

Mais l’action personnalisée est aussi un moyen d’ajouter du script :

Un moyen d’injecter des scripts personnalisés est d’utiliser le mécanisme des custom actions ou actions
personnalisées

Cette méthode permet d’ajouter un script globale sur une collection de sites ou sur un site, mais il n’existe
pas d’interface intégrée dans SharePoint pour les administrer !

 Pour ajouter dans SharePoint une custom action les choix sont :
• Remote Provisioning (Pattern and Practice) en utilisant du CSOM.NET
• PowerShell remote provisioning
• Une solution Sandbox peut ajouter des custom action
• Un Complément peut ajouter avec un CSOM mais requiert un contrôle total sur la collection

Mais pas uniquement pour ajouter un script :


Par exemple, la custom action pointe sur un fichier qui peut être JavaScript ou CSS : c’est un moyen pour
apporter un comportement sur l’ensemble des pages d’un site en expérience classique.

Définition d’une action personnalisée qui référence un script

<CustomAction Location="ScriptLink" ScriptSrc="/_layouts/.../your_javascript_file.js"


Sequence="100">

Ou :

<CustomAction Location="ScriptLink" ScriptBlock="alert('hello');" Sequence="100">

Ajout en PowerShell

param (
[Parameter(Mandatory=$true)][string]$url
)

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 85


3 Développement coté Client - Navigateur
If ((Get-PsSnapin | Where-Object { $_.Name -eq "Microsoft.SharePoint.PowerShell" }) -
eq $null)
{
Write-Host "Loading SP PowerShell cmdlets..."
Add-PsSnapin Microsoft.SharePoint.PowerShell | Out-Null
}

try {
$site = Get-SPSite $url
$uca = $site.UserCustomActions | ? { $_.Title -eq "global.js" } | Select -First 1

if ($uca -eq $null) {


$uca = $site.UserCustomActions.Add()
}

$uca.Title = "global.js"
$uca.Location = "ScriptLink"
$uca.ScriptSrc = "~sitecollection/SiteAssets/global.js"
$uca.Sequence = 100
$uca.Update()

} catch {
Write-Host "Error" -ForegroundColor Red
Write-Host $_.Exception.Message -ForegroundColor Red
Write-Host $_.Exception.StackTrace -ForegroundColor Red
}

Ou avec PnP PowerShell :


Add-PnPJavaScriptBlock -Name myAction -script '<script>Alert("This is my Script
block");</script>' -Sequence 9999 -Scope Site
https://docs.microsoft.com/en-us/powershell/module/sharepoint-pnp/add-
pnpjavascriptblock?view=sharepoint-ps

Ajout en CSOM JavaScript

var clientContext = new SP.ClientContext();


var site = clientContext.get_web();
var UserCustomActions = site.get_userCustomActions();
var newUserCustomAction = UserCustomActions.add();
newUserCustomAction.set_location('ScriptLink');
newUserCustomAction.set_scriptSrc('~SiteCollection/SiteAssets/jquery-1.9.1.js');
newUserCustomAction.set_sequence(9);
newUserCustomAction.set_title('Jquery');
newUserCustomAction.set_description('Global Jquery');
newUserCustomAction.update();

Une Custom action peut être ajoutée au niveau de la collection de sites ou d’un site dans ce cas le script
s’exécutera pour tous les sites ou seulement pour un site en particulier.

Ajout par JSLink

Prise de notes

86 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
La propriété JSLink a été ajoutée avec la version 2013 de SharePoint et permet de personnaliser
l’affichage des listes, éléments, type de contenu et WebPart : Cette nouvelle fonctionnalité est appelée
Client Side Rendering depuis SharePoint 2013.

Cette proprietes est disponible dans la configuration de éléments (en CAML) et on l’a trouve également
dans l’interface sur une colonne de liste par exemple.

Le rôle du JSLink est de fournir un fichier JavaScript qui va prendre en charge le rendu, un peu comme un
modèle dynamique.

Comme l’application du fichier est dynamique, il ne modifie pas le comportement standard du composant
mais vient uniquement se substituer à l’affichage.

Cette technique permet un meilleur contrôle du rendu et évite comme auparavant de personnaliser un
rendu XSL avec du CSS.

Ou trouve t’on la propriété JSLink :


Attention, si vous n’avez pas activé les scripts personnalisés elle ne sera pas disponible.

On trouve cette propriété sur les propriétés de tous les WebPart


(expérience classique) :

Une autre possibilité est également de définir un Lien XSL :

Cela permet en effet de personnaliser un affichage mais demande


de connaitre le langage XSL qui n’est plus un langage d’actualité
même s’il reste largement encore utilisé dans SharePoint.

Exemple simple : Afficher un champ en italique

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 87


3 Développement coté Client - Navigateur
overrideCtx.Templates.Fields = {'Description': { ‘View’:
‘<i><#=ctx.currentItem.Description#></i>’ }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

• overrideCtx : variable contenant le context en cours de la ligne


• overrideCtx.Templates.Fields : donne l’accès aux champs de façon individuelle
• RegisterTemplateOverrides : enregistre le modèle à utiliser

Ajout sur la page maitre

L’ajout de script sur une page est une solution pour fournir un code général mais fortement déconseillée
dans SharePoint online.

2) Personnaliser l’affichage dans les colonnes

HTML dans un JavaScript Client Side Mise en forme Field


champ calculé : incorporé rendering JSON Customizer
Plus pris en (JSLink) (SPFx)
charge depuis
juin 2017 dans
Online
Déploiement
OUI OUI OUI OUI
simple et rapide
Supporté par
l’expérience OUI OUI
moderne
Code
OUI OUI OUI OUI
personnalisé ?
Limitation sur le
OUI OUI
type de colonne
Flexibilité OUI OUI OUI
Mise en forme
OUI OUI OUI OUI OUI
conditionnelle
Liens d’action OUI OUI OUI OUI OUI

• Afficher un tableau de bord exécutif (KPI)


• Afficher des indicateurs de gestion de projet
• Afficher différentes compagnies avec un lien vers le symbole boursier
• Afficher vos contacts avec un lien pour envoyer un courriel (mailto)
• etc.

Mise en forme JSon

Prise de notes

88 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
La mise en forme de colonne et les extensions Personnalisateur de champ de SharePoint Framework vous
permettent de personnaliser l’affichage des champs dans des listes SharePoint. Le personnalisateur de
champ est plus avancé, car vous pouvez l’utiliser pour écrire le code de votre choix pour contrôler
l’affichage d’un champ.

La mise en forme de colonne est appliquée plus facilement et plus largement. Toutefois, elle est moins
flexible, car elle n’autorise pas le code personnalisé ; elle autorise uniquement certains éléments et
attributs prédéfinis.
• Les types de colonne suivants prennent en charge la mise en forme de colonne :
Une seule ligne de texte , Nombre , Choix, Personne ou groupe, Oui/Non ,Lien hypertexte
Image , Date/Heure , Recherche, Titre (dans les listes)

• Les éléments suivants ne sont pas pris en charge actuellement :


Métadonnées gérées, Filename (dans les bibliothèques de documents), Calculé, Étiquette de rétention

• Mise en forme de liste :


Vous pouvez utiliser la mise en forme d’affichage pour personnaliser la façon dont l’affichage des listes et
des bibliothèques SharePoint est présenté. Pour ce faire, vous devez construire un objet JSON qui décrit
les éléments affichés lorsqu’une ligne est chargée dans un affichage de liste, ainsi que tous les styles à
appliquer à ces éléments. La mise en forme de l’affichage ne modifie pas les données dans les éléments
de la liste ; elle ne change que la façon dont elle est présentée aux utilisateurs qui parcourent la liste.
Toute personne pouvant créer et gérer des affichages dans une liste peut utiliser la mise en forme de
l’affichage pour configurer la façon dont les affichages sont présentés.

 Dans les paramètres d’une colonne (parametres de liste/bibliothèque) on trouve :

La mise en forme de colonne la plus simple est celle qui place la valeur du champ à l’intérieur d’un
élément <div />. Cet exemple fonctionne pour les champs de nombre, de texte, de choix et de date :

{
"elmType": "div",
"txtContent": "@currentField"

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 89


3 Développement coté Client - Navigateur
}

Les champs de personne sont représentés dans le système en tant qu’objets et le nom d’affichage d’une
personne est inclus dans la propriété title de cet objet.
{
"elmType": "div",
"txtContent": "@currentField.title"
}

Les champs Liste de choix sont également représentés en tant qu’objets ; le texte d’affichage est stocké
dans la propriété lookupValue :
{
"elmType": "div",
"txtContent": "@currentField.lookupValue"
}
Application d’une mise en forme conditionnelle :
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": "=if(@currentField <= 70,'sp-field-severity--warning', '')"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField <= 70,'Error', '')"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}

https://docs.microsoft.com/fr-fr/sharepoint/dev/declarative-customization/column-formatting

Conclusion :

Cette méthode est peu intrusive et permet des règles pour personnaliser facilement des colonnes.

II. Développements avec SPFx

SPFx est le Framework unifié principalement pour les développements dans les pages modernes.

Sur un site moderne avec la propriété NO SCRIPT d’activer on ne peut pas faire :
Prise de notes

90 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
• Des scripts personnalisés sur les pages
• Pas de JSLink sur les listes et les bibliothèques
• Pas d’action personnalisée

Dans un premier temps, on rappelle ce qu’il apporte par rapport aux autres approches disponibles dans
SharePoint :

• Il s’exécute dans le contexte de l’utilisateur actuel et de la connexion dans le navigateur. Il


n’existe aucun iFrame pour la personnalisation (JavaScript est incorporé directement dans la
page).
• Les contrôles sont affichés dans un DOM de page normale.
• Les contrôles sont réactifs et accessibles par nature.
• Il permet au développeur d’accéder au cycle de vie, en plus des tâches de rendu, de
chargement, de sérialisation et de désérialisation, de modification de la configuration,
et bien plus encore.
• Il ne dépend pas d’une infrastructure. Vous pouvez utiliser toute infrastructure JavaScript qui
vous convient : React, Handlebars, Knockout, Angular et bien d’autres.
• La chaîne d’outils utilise des outils de développement clients open source courants, tels que
npm, TypeScript, Yeoman, webpack et Gulp.
• Performances fiables.
• Les utilisateurs finaux peuvent utiliser les solutions SPFx côté client approuvées par les
administrateurs client (ou leurs délégués) sur tous les sites, y compris les sites de groupes,
les sites personnels ou les sites d’équipe en libre-service.
• Les composants WebPart SPFx peuvent être ajoutés aux pages classiques et modernes.

1) Les types de développement possibles avec SPFx

Avant de voir comment développer il est important de savoir quels sont les composants qui seront
possibles et s’ils répondent au besoin que vous avez sur un projet.

On trouve 2 catégories d’artefact SharePoint que l’on peut ajouter :

Des WebPart d’une part et des extensions d’autre part.

• Des WebPart disponibles aussi bien pour l’expérience classique de moderne

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 91


3 Développement coté Client - Navigateur

Des extensions qui permettent actuellement 3 types d’ajouts :


• Application customizer : exécution pour toute la page, utilisation de zones particulières
(top, bottom)
• Field Customizer : personnalisation des colonnes (à la JSLink)
• Command Sets : ajout d’actions dans les listes SharePoint

Un prérequis important pour SPFx est d’approuver le certificat SSL utilisé par le serveur gulp :

Cette opération se fait une fois en exécutant la commande suivante : gulp trust-dev-cert
Pour désapprouvé le certificat : gulp untrust-dev-cert

Les commandes importantes du serveur gulp


Tache Rôle
gulp serve Lance l’environnement local de développement
--nobrowser optionnel)

gulp build Construit le projet (transpiling) → voir le dossier “lib”

gulp test Exécute les tests unitaires s’ils existent

gulp bundle | gulp Construit le projet en mode DEBUG → voir le dossier “dist”

gulp bundle --ship | gulp --ship Construit le projet pour le mode livraison / prêt a distribuer
→ voir le dossier “temp” folder

gulp package-solution Package la solution en app en mode DEBUG→ voir le dossier


“sharepoint”

gulp package-solution --ship Package la solution pour la production → voir le dossier


“sharepoint”
gulp deploy-azure-storage Ajoute les fichiers dans un CDN Azure

gulp clean Nettoie le projet des artéfacts et supprime les précédents


builds
gulp trust-dev-cert Ajoute un certificat du développeur sur le serveur local ->
requis sur le poste de développement

Le générateur Yeoman

Le générateur est installable en tant que package npm :


npm install @microsoft/generator-sharepoint

Pour obtenir les arguments disponibles :


yo @microsoft/sharepoint --help

Prise de notes

92 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

Option Description
--help Affiche l’aide
--skip-cache Ne se souvient pas des reponses, Default: false.
--skip-install N’installe pas automatiquement les dépendances. Pour pouvoir construire le
projet il faudra installer les dependances avec npm install. Default: false.
--component-type Le type de composant : « webpart » ou « extension » pour le moment.
--component-description Description du composant
--component-name Nom du composant
--framework Le Framework a utiliser "none", "react", "knockout".
--plusbeta Pour utiliser des packages beta avec @plusbeta
--extension-type Le type d’extension: ApplicationCustomizer, FieldCustomizer,
ListViewCommandSet.
--solution-name Nom de la solution et du dossier
--environment L’environnement cible "onprem" or "spo".
--package-manager Le gestionnaire de packages pour la solution "npm", "pnpm", or "yarn".
Default: npm
--skip-feature-deployment Si défini permet à l’administrateur du tenant d’avoir le choix de déployer le
composant sur tous les sites immédiatement sans avoir besoin de
fonctionnalité de déploiement ni d’installer l’application dans les sites.

Exemple de script

yo @microsoft/sharepoint
--solution-name "hello-world"
--framework "react"
--component-type "webpart"
--component-name "HelloWorld"
--component-description "HelloWorld web part"
--skip-install
--environment "spo"
--skip-feature-deployment true

2) Développement de Command Sets

Les jeux de commandes permettent d’ajouter des nouveaux menus aux listes de la même façon qu’on le
ferait avec l’expérience classique en utilisant les actions personnalisées (Custom Action).

La commande est soumise aux autorisations de l’utilisateur et s’exécute dans le contexte de sécurité de
l’utilisateur et permet des ajouts sur différentes parties d’une liste

• La barre d’outils :
La barre d’outils d’une liste fournit des fonctions globales à la liste et les opérations devraient agir sur
plusieurs éléments de la liste.

• Le menu contextuel :
Edit Control Block ou ECB est le menu contextuel d’un élément dans une liste :
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 93


3 Développement coté Client - Navigateur
On cible ce menu si l’on souhaite faire des opérations sur un élément de la liste.

Démarche de développement
La mise en place du projet se fait en débutant par créer un dossier en ligne de commande pour stocker le
projet :

Générer un squelette d’application


Une fois le dossier créé on génère le squelette du projet en utilisant le générateur Yeoman :
yo @microsoft/sharepoint

Différentes questions sont posées par le générateur :


La seule qui est particulière est de savoir si l’on souhaite installer l’extension au niveau du tenant : Si on
choisit cette option il faut savoir que le déploiement avec Feature Framework est impossible.
Le choix de ne pas installer au niveau du tenant permet de tester le déploiement sur un site SharePoint.

A la fin de la création du projet vous trouvez ce message :

Anatomie du projet
On peut ouvrir le dossier directement avec Visual Studio Code : VSC n’utilise pas de modèle de projet
comme Visual Studio mais repose uniquement sur des dossiers. Il n’y a donc pas de fichier de projet à
ouvrir mais simplement un dossier : click-droit sur le dossier -> Open with Visual Studio code

Ou depuis la ligne de commande en exécutant :


code .

Prise de notes

94 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
On trouve différents dossiers mais le dossier
contenant les sources est le dossier src

Attention on trouve plusieurs fichiers qui sont


utilisés par des outils différents :

.vscode : contient les paramètres de


l’environnement de travail Visual Studio Code et
les préférences.
Selon le langage on peut avoir des options propres
à un langage. Pour modifier une valeur cliquez sur
le crayon a gauche ou afficher la nouvelle interface
de paramétrage

.config : contient les paramètres pour le


déploiement du projet.

node_modules : l’environnement d’exécution


node.js
Tous les modules sont téléchargés ce qui prend de
la place sur le disque et un certain temps lors de la
génération du squelette.

sharepoint : contient les définitions CAML qui


feront le lien entre SharePoint et le code
personnalisé.

Points d’entrées et modèle d’exécution

Dans le dossier .src se trouve un fichier Type Script contenant la logique de l’application.

• onInit()

Est déclenché avant le chargement du DOM et permet de faire des actions de paramétrage.
• onListViewUpdated()

Est déclenché au moment où le composant va s’afficher dans l’UI (User Interface) et dans le cas d’un jeu
de commande c’est le moment ou l’utilisateur fait une action qui permet l’affichage de la commande.

L’événement onListViewUpdated() se produit séparément pour chaque commande (par exemple, un


élément de menu) chaque fois qu’une modification est apportée au ListView, et un nouveau rendu de
l’interface utilisateur doit être effectué.
Le paramètre de la fonction event (IListViewCommandSetListViewUpdatedParameters) représente les
informations sur la commande rendue.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 95


3 Développement coté Client - Navigateur
Le gestionnaire peut utiliser ces informations pour personnaliser le titre ou ajuster la visibilité, par
exemple, si une commande doit être affichée uniquement lorsqu’un certain nombre d’éléments est
sélectionné dans l’affichage de liste. Il s’agit de l’implémentation par défaut.

Lorsque vous utilisez la méthode tryGetCommand, vous recevez un objet Command qui est une
représentation de la commande affichée dans l’interface utilisateur. Vous pouvez modifier ses valeurs
(title ou visible) pour modifier l’élément de l’interface utilisateur.
SPFx utilise ces informations lorsque le nouveau rendu des commandes est effectué.
Ces objets conservent l’état du dernier rendu.
Par conséquent, si une commande est définie sur visible = false, elle reste invisible jusqu’à ce qu’elle soit
redéfinie sur visible = true.

Exemple d’affichage d’une commande :

@override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void
{
const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
if (compareOneCommand) {
// la commande est masquée tant qu’une ligne n’est pas selectionnée.
compareOneCommand.visible = event.selectedRows.length === 1;
}
}

• onExecute()

Est déclenchée lors de l’appel de la commande, c’est ici que va se trouver la logique et le comportement
de la commande.

Par défaut dans l’implémentation proposée on trouve le code suivant :


Dans l’implémentation par défaut, différents messages s’affichent en fonction du bouton sélectionné.

@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
case 'COMMAND_1':
Dialog.alert(`${this.properties.sampleTextOne}`);
break;
case 'COMMAND_2':
Dialog.alert(`${this.properties.sampleTextTwo}`);
break;
default:
throw new Error('Unknown command');
}
}

Liaison avec SharePoint

La liaison du code personnalisé avec SharePoint utilise un format bien connu et historique : le langage
CAML et c’est par une définition d’élément en format XML que le lien va se faire :
Prise de notes

96 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

Dans le dossier SharePoint on trouve des fichiers elements.xml :


<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Title="CommandSetExport"
RegistrationId="100"
RegistrationType="List"
Location="ClientSideExtension.ListViewCommandSet.CommandBar"
ClientSideComponentId="abb5aa9a-093f-488c-a655-8730763d1752"
ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is
selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always
visible.&quot;}">
</CustomAction>
</Elements>

Lors de l'exécution l'action personnalisée fonctionnera sur les listes et les bibliothèques de documents,
mais ne sera pas déployée si le fichier elements.xml n'est pas mis à jour.
RegistrationId=100 Associera uniquement l'action personnalisée à des listes et pas à des bibliothèques de
documents.
Pour associer l'action personnalisée à des bibliothèques de documents, le RegistrationId doit être réglé
sur 101.
Si vous souhaitez que l'action travail sur les listes et les bibliothèques de documents, une autre
CustomAction doit être ajouté au elements.xml fichier :

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Title="SPFxListViewCommandSet"
RegistrationId="100"
RegistrationType="List"
Location="ClientSideExtension.ListViewCommandSet.CommandBar"
ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is
selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always
visible.&quot;}">
</CustomAction>
<CustomAction
Title="SPFxListViewCommandSet"
RegistrationId="101"
RegistrationType="List"
Location="ClientSideExtension.ListViewCommandSet.CommandBar"
ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is
selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always
visible.&quot;}">
</CustomAction>

</Elements>

Le projet est en langage Type Script, et pour le tester il y a plusieurs méthodes :

Pour une extension il n’y a pas de Workbench puisque l’extension doit être déployée dans une plateforme
existante pour pouvoir être testée !
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 97


3 Développement coté Client - Navigateur

Il existe néanmoins une méthode peu intrusive pour tester une extension sans pour autant la déployer
dans une plateforme :

On peut tester une extension sans la déployer dans un catalogue, pour y arriver on lancer un serveur local
sans prise en charge du navigateur :

gulp serve –nobrowser

On navigue ensuite sur le site de son choix et par une redirection d’url on peut tester le complément en
fournissant les paramètres suivant à SharePoint Online :

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActio
ns={"fc875dc3-2180-4f1b-bc1c-a20d8ece961b":
{"location":"ClientSideExtension.ListViewCommandSet"}}

• loadSPFx=true

Ce paramètre oblige le Framework SPFx à se charger pour la page. Pour des raisons de performances, le
Framework n’est pas chargé s’il n’y a pas de règles enregistrées dans SharePoint et qui font appel au
Framework. Comme le composant ne se trouve pas dans SharePoint, il faut explicitement charger le
Framework.

• debugManifestsFile
Le chargeur ne regarde normalement que dans le catalogue d’applications pour identifier le composant
qui doit être chargé : Mais dans notre cas, le composant est local, il faut donc indiquer explicitement le
chemin du manifest.

• customActions
Simule l’action personnalisée : La clé identifie le GUID de l’extension qui doit être chargée. Cette clé est
contenue dans le fichier manifest.json mais on la retrouve plus facilement à partir du fichier sharepoint->
elements.xml et dans la propriété ClientSideComponentId

• properties
Dans l’exemple par defaut il y a 2 messages qui sont définis, lorsqu’on va tester l’extension il faut prévoir
de passer ces propriétés dans la chaine d’URL sinon elles ne seront pas définies.

On peut définir les locations suivantes :


• ClientSideComponent.ListViewCommandSet : ajoute aussi bien une commande à la barre de
commande et au menu ECB
• ClientSideComponent.ListViewCommandSet.CommandBar : ajoute uniquement à la barre de
commande
• ClientSideComponent.ListViewCommandSet.ContextMenu : ajoute uniquement au menu ECB

Prise de notes

98 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
Exécution de l’extension

Lorsqu’on teste l’extension étant donné qu’elle ne se trouve pas dans SharePoint, on peut considérer cela
comme un risque majeur pour la sécurité, même si ce n’est pas le cas dans notre contexte. Un message
d’avertissement est automatiquement affiché :

La communication se fait en mode HTTPS il faut donc enregistrer le certificat du serveur Gulp en tant
que certificat approuvé au moins une fois :

gulp trust-dev-cert

Par ailleurs le test avec ce type de déploiement (qui n’est pas un vrai déploiement justement) ne
fonctionne que sur un site « du développeur ».

Pour exécuter l’extension il faut changer les URL dans le fichier config -> serve.json et exécuter ensuite
avec la commande :
gulp server

Ou si l’on souhaite tester sans lancer un site en particulier : gulp serve –nobrowser et construire l’url qui
permettra de tester l’extension :

Exemple d’url avec propriétés

https://supmicro.sharepoint.com/sites/ofb_sharepoint/Lists/Demandes
Achat/AllItems.aspx?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSP
FX=true&customActions={"c928d110-907f-4cfb-ac33-
f3e9e1e13731":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","propert
ies":{"sampleTextOne":"One item is selected in the list","sampleTextTwo":"This command
is always visible."}}}

Résultat du squelette par défaut :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 99


3 Développement coté Client - Navigateur

@override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void
{
const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
if (compareOneCommand) {
// This command should be hidden unless exactly one row is selected.
compareOneCommand.visible = event.selectedRows.length === 1;
}
}

Le jeu de commande est la seule extension qui permet d’afficher une icône associée à la commande :

C’est une meilleure expérience pour l’utilisateur en associant une icône qui affiche une image pertinente
par rapport à l’action réalisée par la commande.

Attention l’icône n’est affichée que lorsque la commande est affichée dans la barre de commande.

L’icône est soit disponible sur une url web ou alors peut être embarquée directement en contenu :
La taille des icônes est 16x16 et si l’image est plus grande elle sera réduite par SharePoint.
C’est pourquoi il est conseillé d’utiliser des images vectorielles en SVG ou en taille 16X16.

Pour apporter les images il faut les déployer sur un emplacement disponible sur internet, plusieurs
options existent :
Un site SharePoint, un fournisseur de contenu (Azure Blob, site SharePoint dédié)

Ou alors en intégrant directement le contenu de l’image encodée en Base 64 :


Par exemple le site https://www.base64-image.de/ permet d’obtenir le contenu d’un fichier encodé en
base 64.

Dans ce cas on place le contenu directement dans la propriete :


"iconImageUrl": "data:image/png;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxx"
Résultat :

3) Développement de personnalisateurs d’application

Prise de notes

100 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

Les personnalisateurs d’application permettent d’accéder à des emplacements connus sur des
pages SharePoint que l’on peut modifier pour ajouter une logique ou une présentation
personnalisée.

On peut principalement créer des expériences d’en-tête et de pied de page dynamiques qui
s’affichent sur toutes les pages dans SharePoint Online.

Ce modèle revient plus ou moins à utiliser une collection UserCustomAction dans un objet Site
ou Web pour modifier l’expérience de page via un script JavaScript personnalisé.

Le principal avantage des extensions de l’infrastructure SharePoint (SPFx) est que les éléments de
la page ne changeront pas si des modifications sont apportées à la structure HTML/DOM dans
SharePoint Online.

En effet cette méthode remplace ce qui est proposé dans l’experience classique avec une Custom Action
ou par un JSLink, mais avec un autre avantage : celui de pouvoir cibler des zones de contenus prédéfinies.
(Auparavant il fallait utiliser soi un Delegate Control ou modifier la page maitre)
• Top
• Bottom
• DialogContainer

Démarche de développement

Le point de départ est la méthode onInit :


@override
public onInit(): Promise<void> {

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 101


3 Développement coté Client - Navigateur
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
console.log("debut de init");
let message: string = this.properties.testMessage;
if (!message) {
message = '(No properties were provided.)';
}

Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);

return Promise.resolve();
}

Ajout de contenus dans les zones dédiées

// top placeholder..

let topPlaceholder: PlaceholderContent =


this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
if (topPlaceholder) {
topPlaceholder.domElement.innerHTML = `<div class="${styles.app}">
<div class="ms-bgColor-themeDark ms-fontColor-white
${styles.header}">
<i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i>&nbsp;
${escape(HEADER_TEXT)}
</div>
</div>`;
}

// bottom placeholder..

let bottomPlaceholder: PlaceholderContent =


this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
if (bottomPlaceholder) {
bottomPlaceholder.domElement.innerHTML = `<div class="${styles.app}">
<div class="ms-bgColor-themeDark ms-fontColor-white
${styles.footer}">
<i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i>&nbsp;
${escape(FOOTER_TEXT)}
</div>
</div>`;
}

On accède à une zone de contenu avec la méthode tryCreateContent et on indique la cible :


On ajoute ensuite le contenu souhaité.

Actuellement il n’y a que 2 zones dans la version 1.6 de SPFx mais d’autres devraient être disponible.

Méthode de débogage
Paramètre Description
loadSPFX=true permet de s’assurer que SharePoint Framework est chargé sur la page. Pour des
raisons de performances, l’infrastructure ne se charge pas à moins d’avoir au
moins une extension enregistrée. Comme aucun composant n’est enregistré, vous
devez charger explicitement l’infrastructure.

Prise de notes

102 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

debugManifestsFile permet d’indiquer que vous souhaitez charger les composants SPFx qui sont
distribués localement. Le chargeur recherche uniquement les composants dans le
catalogue d’applications (pour votre solution déployée) et le serveur de manifeste
SharePoint (pour les bibliothèques système).
customActions permet de reproduire une action personnalisée. Lorsque vous déployez et
enregistrez ce composant dans un site, vous devez créer cet objet CustomAction
et décrire toutes les différentes propriétés que vous pouvez définir sur ce dernier.
key utilisez le GUID de l’extension comme clé à associer à l’action personnalisée. Cela
doit correspondre à la valeur d’ID de votre extension qui est disponible dans le
fichier manifest.json de l’extension.
location type d’action personnalisée. Utilisez
ClientSideExtension.ApplicationCustomizer pour l’extension du
personnalisateur d’application.
properties Objet JSON facultatif contenant les propriétés disponibles via le membre
this.properties.

Format générique des paramètres d’url :

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.
js&customActions={"<extensionId>":{"location":"<extensionType>","propert
ies":<propertiesJSON>}}

Exemple :

https://contoso.sharepoint.com/sites/team-
a/sitepages/news.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/man
ifests.js&customActions={"e5625e23-5c5a-4007-a335-
e6c2c3afa485":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"t
estMessage":"Hello as property!"}}}

4) Développement de personnalisateur de champ

Consiste à personnaliser le rendu d'un champ en utilisant des éléments HTML personnalisés et du code
côté client. Les extensions peuvent être déployées dans SharePoint Online, et pour les créer vous pouvez
utiliser les outils JavaScript modernes.

Démarche de développement

Le générateur Yeoman construite le squelette suivant :

import { Log } from '@microsoft/sp-core-library';


import { override } from '@microsoft/decorators';
import {
BaseFieldCustomizer,
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 103


3 Développement coté Client - Navigateur
IFieldCustomizerCellEventParameters
} from '@microsoft/sp-listview-extensibility';

La classe de base pour le personnalisateur de champ est importée à partir du package sp-listview-
extensibility, qui contient le code SharePoint Framework requis par le personnalisateur de champ.

Les méthodes à utiliser

• onInit()
Est l’emplacement dans lequel vous devez effectuer les configurations nécessaires pour votre extension.
Cet événement se produit après que this.context et this.properties ont été attribués, mais avant que la
page DOM ne soit prête. Comme pour les composants WebPart, onInit() renvoie une promesse que vous
pouvez utiliser pour effectuer des opérations asynchrones.
onRenderCell() ne s’active pas tant que votre promesse n’a pas été résolue.
Si vous n’en avez pas besoin, renvoyez simplement Promise.resolve<void>();.

• onRenderCell()
Se produit lorsque le rendu de chaque cellule est effectué. Il fournit un élément HTML event.domElement
où votre code peut écrire son contenu.

• onDisposeCell()
Se produit immédiatement avant que l’élément event.cellDiv soit supprimé. Il peut être utilisé pour
libérer des ressources qui ont été allouées pendant le rendu du champ. Par exemple, si onRenderCell() a
monté un élément React, onDisposeCell() doit être utilisé pour le libérer ; sinon, une perte de ressource se
produit.

La solution par défaut contient le code suivant

@override
public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
// Use this method to perform your custom cell rendering.
const text: string = `${this.properties.sampleText}: ${event.fieldValue}`;
event.domElement.innerText = text;
event.domElement.classList.add(styles.cell);
}

@override
public onDisposeCell(event: IFieldCustomizerCellEventParameters): void {
// This method should be used to free any resources that were allocated during
// rendering.
// For example, if your onRenderCell() called ReactDOM.render(), then you should
// call ReactDOM.unmountComponentAtNode() here.
super.onDisposeCell(event);
}

Vous ne pouvez pas utiliser actuellement le workbench local pour tester les extensions SharePoint
Framework.

Structure du fichier elements.xml


Prise de notes

104 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

<?xml version="1.0" encoding="utf-8"?>


<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

<Field ID="{060E50AC-E9C1-3D3C-B1F9-DE0BCAC200F6}"
Name="SPFxPercentage"
DisplayName="Pourcentage"
Type="Number"
Min="0"
Required="FALSE"
Group="SPFx Columns"
ClientSideComponentId="7e7a4262-d02b-49bf-bfcb-e6ef1716aaef">
</Field>

</Elements>

L’id de la propriété ClientSideComponentId a été mise à jour pour correspondre à celle du fichier
manifest.json : c’est ce qui fait la liaison entre le personnaliseur de champ et SharePoint.
Vérification du package

Le fichier package-solution.json définit les métadonnées de package, comme illustré dans le code suivant :
Pour vérifier que le fichier element.xml est pris en compte lorsque la solution est mise en package,
l’établissement de la structure par défaut a ajouté la configuration nécessaire pour définir une définition
de fonctionnalité d’infrastructure de fonctionnalité pour le package de solution.

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-
solution.schema.json",
"solution": {
"name": "field-extension-client-side-solution",
"id": "80c04d1b-dca7-4d0a-86c0-9aedf904704f",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"features": [
{
"title": "Application Extension - Deployment of custom action.",
"description": "Deploys a custom action with ClientSideComponentId
association",
"id": "b27507b9-7c2a-4398-8946-7438571f16f6",
"version": "1.0.0.0",
"assets": {
"elementManifests": [
"elements.xml"
]
}
}
]
},
"paths": {
"zippedPackage": "solution/field-extension.sppkg"
}
}

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 105


3 Développement coté Client - Navigateur
Par ailleurs, l'attribut includeClientSideAssets est défini sur true par défaut, ce qui signifie que les
ressources JavaScript sont automatiquement mises en package dans le fichier sppkg : les librairies sont
intégrées dans le package.

Méthode de débogage

Les paramètres qui permettent de tester le personnaliseur de champ sont les mêmes que pour les autres
extensions avec des paramètres spécifiques :

Paramètre Description
loadSPFX=true permet de s’assurer que SharePoint Framework est chargé sur la page.
Pour des raisons de performances, l’infrastructure ne se charge pas à
moins d’avoir au moins une extension enregistrée. Comme aucun
composant n’est enregistré, vous devez charger explicitement
l’infrastructure.
debugManifestsFile permet d’indiquer que vous souhaitez charger les composants SPFx qui
sont distribués localement. Le chargeur recherche uniquement les
composants dans le catalogue d’applications (pour votre solution
déployée) et le serveur de manifeste SharePoint (pour les bibliothèques
système).
fieldCustomizers indique les champs de votre liste dont le rendu doit être contrôlé par le
personnalisateur de champ. Le paramètre ID spécifie le GUID de
l’extension qui doit être utilisé pour contrôler le rendu du champ. Le
paramètre des propriétés est une chaîne de texte facultative contenant
un objet JSON qui est désérialisé dans this.properties pour votre
extension.
key Utilisez le nom interne du champ comme clé.
id GUID de l’extension du personnalisateur de champ associée à ce champ.
properties Valeurs de propriétés définies dans l’extension. Dans cet exemple,
sampleText est une propriété définie par l’extension.

Format des paramètres d’url :

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp
/manifests.js&fieldCustomizers={"<fieldName>":{"id":"<fieldCu
stomizerId>","properties":<properties>}}

Exemple :

https://contoso.sharepoint.com/sites/team-
a/Lists/Orders/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/t
emp/manifests.js&fieldCustomizers={"Percent":{"id":"45a1d299-990d-4917-ba62-
7cb67158be16","properties":{"sampleText":"Hello!"}}}

Prise de notes

106 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

5) Débogage et méthode de tests

SPFx est récent, les langages utilisés également et plusieurs composants proviennent de l’open source !
Il est donc primordial pour le développeur de s’assurer avant de débuter un projet qu’il est bien en
condition de tester et suivre l’exécution de son code.
Par ailleurs, il faut aussi s’assurer de pouvoir tracer l’exécution du code car cela permet de résoudre
rapidement de nombreux problèmes :

Les problèmes de logique, d’avoir accès avec des espions aux propriétés des objets à l’exécution (cela
permet d’identifier les valeurs que l’on souhaite obtenir) et ainsi de gagner en efficacité et temps de
développement.

Historiquement les premières versions de SPFx ne permettaient le débogage qu’avec Google Chrome et
c’est assez particulier pour le souligner.

Plus récemment, des nouveaux composants permettent le débogage avec Edge mais il faut les installer.

Pour déboguer avec Microsoft Edge, vous devrez installer la Mise à jour Windows du 10 avril 2018 qui
inclut le protocole Microsoft Edge DevTools.

La version de Windows 10 associée est la version 1803, et on peut tester si on possède une version
actuelle en allant sur cette adresse :
https://www.microsoft.com/en-us/windows/comprehensive-security

Edge intègre désormais un nouveau protocole : Edge DevTools Protocol (un ensemble d’API REST, JSON-
RPC/WebSocket) qui permet de diagnostiquer et déboguer un onglet Edge.
L’intégration de ce protocole est prévue pour Visual Studio, Visual Studio Code pour autoriser le
développeur à lancer directement un débogage depuis l’IDE.

(Ce protocole est issu d’un groupe de travail composé de Google, Firefox et Microsoft réunit au sein du
DevTools Protocol Web Platform Incubator Community Group : WICG, dont l’adresse est
https://github.com/WICG/devtools-protocol).

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 107


3 Développement coté Client - Navigateur

https://docs.microsoft.com/en-us/microsoft-edge/devtools-protocol/

• Pour déboguer en utilisant Chrome :


https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

• Pour déboguer en utilisant Edge :


On installe le débogueur pour Visual Studio Code : VS Code - Debugger for Microsoft Edge

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge
Pour tester si le serveur de developpement Edge est actif :
MicrosoftEdge.exe --devtools-server-port 9222 https://www.bing.com

On vérifie dans Visual Studio Code qu’on possede bien les extensions :

Pour être assuré de lancer de façon impérative le débogueur on peut utiliser l’instruction :
debugger;

Le source map doit être activé, c’est qui permet la liaison entre un breakpoint et le code qui s’exécute :
"configurations": [{

Prise de notes

108 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
"name": "Local workbench",
"type": "edge",
"request": "launch",
"url": "https://localhost:5432/workbench",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///../../../src/*": "${webRoot}/src/*",
"webpack:///../../../../src/*": "${webRoot}/src/*",
"webpack:///../../../../../src/*": "${webRoot}/src/*"
},
"runtimeArgs": [
"--remote-debugging-port=9222"
]
},

Le Framework de log des messages


Pour utiliser la classe Log on l’importe :

import { Log } from '@microsoft/sp-core-library';

On dispose de 4 méthodes en fonctions de la gravité que l’on souhaite afficher au développeur :

Log.verbose("HelloWorld", "Here is a verbose log", this.context.serviceScope);


Log.info("HelloWorld", "Here is an informational message.",
this.context.serviceScope);

Log.warn("HelloWorld", "Oh Oh, this might be bad", this.context.serviceScope);


Log.error("HelloWorld", new Error("Oh No! Error! Ahhhhhh!!!!"),
this.context.serviceScope);

Les messages apparaissent dans la fenêtre de Console (dans les outils de développement du navigateur)

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 109


3 Développement coté Client - Navigateur

6) Manipulation de l’environnement

Une extension permet d’obtenir un Context ce qui permet de réaliser une programmation qui s’adapte au
composant en cours ou sur lequel l’utilisateur se trouve :

this.context.pageContext

https://docs.microsoft.com/en-us/javascript/api/sp-page-context?view=sp-typescript-latest
Le contexte donne accès aux informations les plus utiles et le développeur n’a pas à se soucier de savoir
où il se trouve : il obtient cette information depuis le context, pour :

Proprietes disponibles
cultureInfo Il fournit des informations de culture pour l’utilisateur actuel de l’application. Cette classe
est principalement utilisée avec la classe PageContext.
isInitialized Retourne si le PageContext a été initialisé.

Prise de notes

110 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
legacyPageContext Objet qui fournit les propriétés SharePoint classiques qui peuvent être requis par certains
scripts hérités. Elle renvoie un objet JavaScript dont le contenu est similaire à la
_spPageContextInfo variable de fenêtre à partir de pages classiques. Le contenu de cette
variable peut changer dans les futures versions de SharePoint.
list Informations contextuelles de la liste SharePoint qui héberge la page. S’il n’existe aucune
liste associée à la page en cours, cette propriété sera non définie.
listItem Informations contextuelles pour l’élément de liste SharePoint qui héberge la page. S’il
n’existe aucun élément de liste associé à la page en cours, cette propriété sera non définie.
serviceKey Clé de service pour PageContext.
site Informations contextuelles pour la collection de sites SharePoint (« site ») qui héberge la
page.
user Il fournit des informations contextuelles à l’utilisateur de SharePoint qui accède à la page.
Cette classe est principalement utilisée avec la classe PageContext.
web Informations contextuelles pour le site SharePoint (« web ») qui héberge la page.

III.Développement classiques avec ECMA Script


1) Le CSOM JavaScript

Le modèle CSOM peut être utilisé pour les contenus SharePoint locaux ou hébergé à distance dans un
cloud.

Avant de pouvoir développer avec le modèle il faut d’abord inclure les librairies requises
<script
src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript">
</script>
<script
type="text/javascript" src="/_layouts/15/sp.runtime.js">
</script>
<script type="text/javascript" src="/_layouts/15/sp.js">
</script>
<script type="text/javascript">
// code du programme ici
</script>
Reference AJAX library à partir de Microsoft CDN.
Reference SP.Runtime.js par une URL relative.
Reference SP.js par une URL relative.

Comme pour le modèle objet .NET CSOM la première chose à obtenir est le contexte :
function retrieveWebSite(siteUrl) {
var clientContext = new SP.ClientContext(siteUrl);
this.oWebsite = clientContext.get_web();

clientContext.load(this.oWebsite);

clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 111


3 Développement coté Client - Navigateur
function onQuerySucceeded(sender, args) {
alert('Title: ' + this.oWebsite.get_title() +
' Description: ' + this.oWebsite.get_description());
}

function onQueryFailed(sender, args) {


alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}

On peut également filtre les réponses, comme avec les expressions lambda

clientContext.load(this.oWebsite, 'Title', 'Created');

Le changement de valeur

this.oWebsite.set_title('Mon site SharePoint');


this.oWebsite.set_description('Site modifie par CSOM.');
this.oWebsite.update();

clientContext.load(this.oWebsite, 'Title', 'Description');

Ajout de liste

var listCreationInfo = new SP.ListCreationInformation();


listCreationInfo.set_title('My Announcements List');
listCreationInfo.set_templateType(SP.ListTemplateType.announcements);

this.oList = oWebsite.get_lists().add(listCreationInfo);

clientContext.load(oList);

Parcourir toutes les listes


function retrieveAllListProperties(siteUrl) {
var clientContext = new SP.ClientContext(siteUrl);
var oWebsite = clientContext.get_web();
this.collList = oWebsite.get_lists();
clientContext.load(collList);

clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var listInfo = '';
var listEnumerator = collList.getEnumerator();

while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += 'Title: ' + oList.get_title() + ' Created: ' +
oList.get_created().toString() + '\n';
}
alert(listInfo);
Prise de notes

112 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
}

function onQueryFailed(sender, args) {


alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}

Parcourir les listes, en filtrant les propriétés obtenues


function retrieveSpecificListProperties(siteUrl) {
var clientContext = new SP.ClientContext(siteUrl);
var oWebsite = clientContext.get_web();
this.collList = oWebsite.get_lists();

clientContext.load(collList, 'Include(Title, Id)');


clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var listInfo = '';
var listEnumerator = collList.getEnumerator();

while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += 'Title: ' + oList.get_title() +
' ID: ' + oList.get_id().toString() + '\n';
}
alert(listInfo);
}

function onQueryFailed(sender, args) {


alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}

2) Développements Clients possibles dans les Pages ou Composants SharePoint


d’expérience classique

Les pages ou les composants peuvent faire appel à du code coté client. Dans SharePoint, plusieurs fichiers
js et css permettent de faire appel à du code à la demande plutôt que d’avoir un fichier unique contenant
la totalité du code et alourdissant la page.
Ces composants se trouvent dans le modèle objet ECMAScript de SharePoint.
Espace de nom : SP.UI

Pour développer avec ce modèle, il faut une page dans un contexte SharePoint :
1. Ajouter les inclusions suivantes :
<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

<script type="text/javascript">

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 113


3 Développement coté Client - Navigateur
//you'll get intellisense here
</script>
2. Si le code modifie du contenu SharePoint, il faut une demande d’autorisation qui se fait en
ajoutant :
<SharePoint:FormDigest runat="server" />
3. Programmer le code dans le dossier layouts directement pour avoir l’auto complétion dans
Studio.

Le support cible les navigateurs :


• Microsoft Internet Explorer 7.0 ou plus / Firefox 3.5 ou plus / Safari 4.0 ou plus
3) Le FrameWork : Dialog

Ce Framework permet d’éviter les allers et retours de pages, mais permet de réaliser des dialogues avec
l’utilisateur sans poster la page. Ce Framework permet d’afficher des boites de dialogues coté client, ce
qui va griser la page en arrière-plan : l’utilisateur peut agrandir la boite de dialogue qui peut également
utiliser le Ruban ce qui permet de faire des interactions entre le Ruban et la boite de dialogue.

L'apparition des boites de dialogues se traduit par la manière suivante :

Une boite de dialogue en superposition devant la page à partir de laquelle la boite est affichée.

AVANTAGE :
• On ne quitte pas la page (pas d'allers et retours avec le serveur)
• Le traitement est coté client et décharge le serveur de traitements processeurs.
• L'interactivité est plus forte avec l'utilisateur (DHTML) et permet la conception d'applications au
standard Web 2.0

Démarche de développement
Avant d'afficher une boite de dialogue on lui donne les options suivantes:

Prise de notes

114 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
var options= {
url:"http://www.google.com",width: 800,height: 600, title: '', allowMaximize: false,
showClose: true,
dialogReturnValueCallback: CloseCallback
};
ou en utilisant une syntaxe plus détaillée :
var options = SP.UI.$create_DialogOptions();
options.width = 500;
options.height = 250;
options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";
options.dialogReturnValueCallback = Function.createDelegate(
null, CloseCallback);

On peut ensuite affichée la boite de dialogue en mode Modal:


SP.UI.ModalDialog.showModalDialog(options);

La fonction de callback a la signature suivante : CloseCallback (result, target) {

on traite la fermeture par le paramètre « result » :


function CloseCallback(result, target) {
if(result === SP.UI.DialogResult.OK) {
alert("OK !");
}
if(result === SP.UI.DialogResult.cancel) {
alert("annuler!");
}
}

Les Message d’Etat


Les messages d'état sont affichés en dessous du Ruban et permettent d’afficher des informations
importantes à l’utilisateur. (Alertes, taches en cours, confirmations pour des actions)
Exemple de message d’état dans l’administration centrale de SharePoint.

Pour ajouter un état


SP.UI.Status.addStatus = function(strTitle, strHtml, atBeginning) { }
ou
var sid = SP.UI.Status.addStatus('My Status:', 'Hello World', true);
strTitle : le titre, strHtml : le contenu, atBeginning : si le message apparait au début de la liste.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 115


3 Développement coté Client - Navigateur
Retourne l'Id de l'état.

Pour ajouter du contenu a un état existant :


var sid = SP.UI.Status.appendStatus(sid, strTitle, strHtml);

Les états sont classés par priorité et changent de couleur selon la gravité (rouge, jaune, vert, bleu)
Pour changer la priorité :
SP.UI.Status.setStatusPriColor = function(sid, strColor) { }
Ou
SP.UI.Status.setStatusPriColor(sid, 'red');

Pour changer la valeur d'un message d'état:


SP.UI.Status.updateStatus = function(sid, strHtml) { }

Pour supprimer un état :


SP.UI.Status.removeStatus = function(sid) { }
Ou tous les supprimer :
SP.UI.Status.removeAllStatus(hide);

Les Notifications
Les notifications sont utilisées pour afficher des messages temporaires qui restent par défaut au moins 5
secondes. Ces messages peuvent être des notifications de chargement en cours, de traitement en
cours. Ces boites de dialogues sont affichées en à droite de l’interface en dessous du Ruban.

Pour ajouter une notification :


var nid = SP.UI.Notify.addNotification(strHtml, bSticky);
strHtml : le contenu, bSticky : booléen qui indique si la notification reste jusqu'a ce que la page soit
supprimée.

Pour supprimer une notification :


SP.UI.Notify.removeNotification(nid);

il existe une méthode interne plus riche :


function addNotification(strHtml, bSticky, tooltip, onclickhandler) { }

tooltip : infobulle quand on passe la souris sur la notification, onclickhandler fonction de rappel exécutée
au moment où l'on clique sur l'infobulle.

Gestion des Custom Action depuis JavAscript

Ajout au menu ECB


var siteUrl = '/sites/MySiteCollection';

function createUserCustomActionList() {
Prise de notes

116 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

var clientContext = new SP.ClientContext(siteUrl);


var oWebsite = clientContext.get_web();
this.oList = oWebsite.get_lists().getByTitle('My List');
var collUserCustomAction = oList.get_userCustomActions();

var oUserCustomAction = collUserCustomAction.add();


oUserCustomAction.set_location('EditControlBlock');
oUserCustomAction.set_sequence(100);
oUserCustomAction.set_title('My First User Custom Action');
oUserCustomAction.set_url(siteUrl + '/_layouts/MyPage.aspx');
oUserCustomAction.update();
clientContext.load(oList, 'Title' ,'UserCustomActions');
clientContext.executeQueryAsync(Function.createDelegate(this,
this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

alert('Custom action created for ' + this.oList.get_title());}

function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());


}

Modifier une custom action de liste pour ajouter une image a un menu

var siteUrl = '/sites/MySiteCollection';


function modifyUserCustomAction() {
this.clientContext = new SP.ClientContext(siteUrl);
var oWebsite = clientContext.get_web();
this.oList = oWebsite.get_lists().getByTitle('My List');
this.collUserCustomAction = oList.get_userCustomActions();

clientContext.load(oList,'UserCustomActions','Title');

clientContext.executeQueryAsync(Function.createDelegate(this, this.SetImage),
Function.createDelegate(this, this.onQueryFailed));
}

function SetImage() {
var customActionEnumerator = collUserCustomAction.getEnumerator();

while (customActionEnumerator.moveNext())
{
var oUserCustomAction = customActionEnumerator.get_current();

if (oUserCustomAction.get_title() == 'My First User Custom Action')


{
oUserCustomAction.set_imageUrl('http://MyServer/_layouts/images/MyIcon.png');
oUserCustomAction.update();

clientContext.load(oUserCustomAction);

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 117


3 Développement coté Client - Navigateur
clientContext.executeQueryAsync(Function.createDelegate(this,
this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
}
}

Prise de notes

118 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

IV.Déploiement des extensions et hébergement dans un CDN

1) Le rôle d’un CDN

Un réseau de diffusion de contenu est une plate-forme de serveurs hautement distribuée optimisée pour
diffuser du contenu, notamment des applications Web et du contenu multimédia en streaming.
Ce réseau de serveurs est réparti en différents emplacements physiques et points du réseau afin de traiter
directement les requêtes des utilisateurs finaux demandant du contenu Web et une diffusion multimédia
sécurisée et rapide. Elle sert d'intermédiaire entre un serveur de contenu, également appelé serveur
d'origine, et ses utilisateurs finaux, ou clients.

Sans CDN, les serveurs d'origine de contenu doivent répondre à chacune des requêtes des utilisateurs
finaux, générant un trafic conséquent sur le serveur d'origine et une charge accrue. En cas de pics de trafic
excessivement dense ou de charge persistante, le risque de défaillance du serveur d'origine est élevé.
En répondant aux requêtes des utilisateurs finaux à la place du serveur d'origine sur un réseau proche de
l'utilisateur final, le CDN déleste les serveurs de contenu et améliore l'expérience Web, ce qui profite à la
fois au fournisseur de contenu et aux utilisateurs finaux.

Les CDN sont principalement connus pour la diffusion de sites Web et de leur contenu. Les agents
utilisateurs, qui sont essentiellement des terminaux exécutant des navigateurs Web, envoient des
requêtes pour demander le contenu (code HTML, images, CSS et fichiers JavaScript) nécessaire pour
afficher des pages Web.

Le réseau global Microsoft (avec aujourd’hui la France Paris et Aix-En-Provence ou Marseille)

Un CDN peut être privé ou public :


Le privé est disponible uniquement pour une société donnée alors que le public est mutualisé pour
plusieurs sociétés.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 119


3 Développement coté Client - Navigateur
Microsoft utilise depuis plusieurs un CDN pour les librairies AJAX (JQuery, BootStrap,etc…) et l’on peut
avoir la liste des URL à cette adresse :
https://docs.microsoft.com/fr-fr/aspnet/ajax/cdn/overview

L’usage d’un CDN ne présente pas de risque puisqu’on est dans une architecture Web et donc forcément
connectée, en revanche pour des scripts qui seraient confidentiels l’usage d’un CDN privé est
indispensable.

2) Le CDN dans Office 365


Ou avait-on l’habitude de stocker les fichiers dans SharePoint ?

Historiquement les développeurs avaient l’habitude de stocker les ressources dans une bibliothèque
SharePoint disponible par défaut sur une collection de sites et qui n’était pas affichée dans la navigation
du site :
La bibliothèque nommée « Pièce Jointes » ou /SiteAssets, car c’est dans cette bibliothèque que
SharePoint stocke les fichiers qui sont ajoutés par les utilisateurs si on ne leur demande pas
d’emplacement.

Au niveau d’une entreprise, les libraires utilisées dans les applications clientes doivent être contrôlées et
une gouvernance des versions doit être en place. C’est dans ce sens que le CDN prend toute sa place.

• Assurer les versions des librairies utilisées dans l’entreprise


• Profiter de performances améliorées

Activation du CDN Office 365

Par défaut le CDN n’est pas activé sur une plateforme Office 365 , mais des instructions PowerShell vont
permettre de le mettre en place :

 On se connecte sur le tenant :


Connect-SPOService -Url https://contoso-admin.sharepoint.com

 On demande l’état actuel du CDN

Get-SPOTenantCdnEnabled -CdnType Public


Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public

Les solutions SharePoint Framework peuvent utiliser automatiquement le CDN public Office 365 dans la
mesure où il est activé dans votre client. Lorsque le CDN est activé, l’origine */CLIENTSIDEASSETS est
automatiquement ajoutée comme origine valide.
Set-SPOTenantCdnEnabled -CdnType Public

Prise de notes

120 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
Le CDN public est maintenant activé dans le client à l’aide de la configuration autorisée par défaut du type
de fichier. Cela signifie que les extensions de type de fichier suivantes sont prises en charge : CSS, EOT,
GIF, ICO, JPEG, JPG, JS, MAP, PNG, SVG, TTF et WOFF.

Les solutions SharePoint Framework peuvent utiliser automatiquement le CDN public Office 365 dans la
mesure où il est activé dans votre client. Lorsque le CDN est activé, l’origine */CLIENTSIDEASSETS est
automatiquement ajoutée comme origine valide.

Vous pouvez vérifier à nouveau la configuration actuelle de vos points de terminaison. Exécutez la
commande suivante pour obtenir la liste des origines CDN à partir de votre client :

Get-SPOTenantCdnOrigins -CdnType Public

Vérifier l’activation du CDN


Lorsque vous activez la première fois CDN, la configuration par défaut pour activer les origines par défaut
prendre un certain temps (15 minutes environ).
La configuration est terminée lorsque plus aucun message (configuration en attente) ne s'affiche lorsque
vous exécutez la commande Get-SPOTenantCdnOrigins -CdnType Public

Si vous avez précédemment activé Office 365 CDN, vous devez réactiver le CDN public afin d'avoir l'entrée
*/CLIENTSIDEASSETS ajoutée en tant qu’origine CDN valide pour le CDN public. Si cette entrée n’est pas
présente et que le CDN public est activé sur votre client, les demandes de groupement contiendront le
nom d’hôte du jeton spclientsideassetlibrary dans leur URL, ce qui causera l’échec des demandes.

Vous pouvez ajouter cette entrée manquante à l’aide de la commande :


Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl */CLIENTSIDEASSETS

Définir un CDN Spécifique publique ou privé

On peut créer un CDN pour etre synchronisé avec une bibliothèque spécifique.
Si les ressources peuvent etre purbliques (en acces anonyme meme si l’url n’est pas devinable) on utilise
les commandes suivantes :

New-SPOPublicCdnOrigin -Url
https://{tenant}.sharepoint.com/sites/{site}/SiteAssets/cdn

Dans cet exemple, on a ajouté un dosiser cdn dans une bibliothèque SiteAssets : les contenu ajoutés dans
ce dossier seront synchronisés avec le CDN.

On demande la liste des CDN :


Get-SPOPublicCdnOrigins | Format-List

On obtient les Id et sites associés à des CDN de toutes les collections de sites :
Id : 13200052f97a4dd249b6768527c2d4bf49dfb4dbec0eff57a88a7ef9dfede4d01883a44
Url : HTTPS://TENANT.SHAREPOINT.COM/SITES/SITE/SITEASSETS.
Id : 12390061f758b807354244dd12e9808aba5c97058384a46b61b43861da5e600492d2947

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 121


3 Développement coté Client - Navigateur
Url : HTTPS://TENANT.SHAREPOINT.COM/SITES/SITE2/SITEASSETS/CDN.

L’adresse du CDN Public est de la forme :

https://publiccdn.sharepointonline.com/{tenant-name}.sharepoint.com/{cd
n-origin-id}.

Pour obtenir la bonne adresse du CDN on doit avoir une url de la forme :

https://publiccdn.sharepointonline.com/tenant.sharepoint.com/12390061f7
58b807354244dd12e9808aba5c97058384a46b61b43861da5e600492d2947

C’est cette URL qu’il faut noter et définir dans le cdnBasePath de la solution.

Pour définir un CDN on utilise la directive cdnbasepath dans write-manifests.json :

Définir un CDN privé

Ou activer sur le tenant en tant que CDN privé les origines par défaut sont : */UserPhoto.aspx, et
*/Siteassets

SPOTenantCdnEnabled -CdnType Private -Enable $True

Pour ajouter une nouvelle origine on utilise la commande PowerShell suivante :


Add-SPOTenantCdnOrigin -CdnType Private -OriginUrl $liburl -Confirm:$false

Exemple :
Add-SPOTenantCdnOrigin -CdnType Private -OriginUrl */photo

Ajoute l’url /photo (donc une bibliothèque de documents) a tous les sites pour être synchronisée avec le
CDN.

Ajouter et Vérifier les extensions des fichiers synchronises avec le CDN

Pour afficher la liste des extensions prises en charge :

Get-SPOTenantCdnPolicies -CdnType Private

Pour modifier les extensions :

Prise de notes

122 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur
Set-SPOTenantCdnPolicy -PolicyType IncludeFileExtensions -PolicyValue "
CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF,TXT,DOCX" -CdnType Private

Attention on remplace la valeur il faut donc indiquer toutes les valeurs a chaque fois.
Vérification des paramètres de la solution

Le fichier package-solution.json définit les métadonnées de package :

"solution": {
"name": "helloword-webpart-client-side-solution",
"id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
"version": "1.0.0.0",
"includeClientSideAssets": true
},

La valeur par défaut pour includeClientSideAssets est true, ce qui signifie que les ressources statiques sont
automatiquement mises en package dans les fichiers .sppkg, et que vous n’avez pas besoin d’héberger
séparément vos ressources et votre système externe.

3) Packaging et installation de solution

Le packaging peut se faire soit pour des tests en mode DEBUG ou alors pour une solution finale en
production.

Pour préparer une solution finale les étapes sont les suivantes :

• Nettoyer la solution :

gulp clean

Supprime les fichiers dans src : on s’assure de ne pas avoir des fichiers inutiles

• Grouper la solution :

gulp bundle –ship

Cette opération exécute un build de version de votre projet à l’aide d’une étiquette dynamique comme
l’URL hôte pour vos ressources. Cette URL est automatiquement mise à jour en fonction des paramètres
de votre CDN client. Cette opération minifie également les fichiers pour réduire leur taille.

• Packaging de la solution

gulp package-solution --ship

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 123


3 Développement coté Client - Navigateur
Cela crée par exemple un package helloworld-webpart.sppkg minimal, mis à jour dans le dossier
sharepoint/solution : le sppkg est un format Zip en réalité.

Si vous souhaitez savoir exactement quels éléments ont été mis en package dans le fichier .sppkg, vous
pouvez consulter le contenu du dossier sharepoint/solution/debug.

En ouvrant le fichier sppkg on trouve un dossier ClientSideAssets qui montre les fichiers qui iront dans un
CDN :

Chargement dans un CDN des librairies tierces et fichiers ressources

gulp package-solution ne package pas les fichiers .js, .css et autres ressources :
Il faut charger ces ressources à l’emplacement de votre choix.

La procédure pour utiliser un CDN pour ces contenus est la suivante :

 gulp --ship
 télécharger les fichiers générés dans temp\deploy vers un CDN (par exemple
https://mytenant.sharepoint/siteAssets )
 changer le cdnBasePath pour l’url du CDN
 executer : gulp bundle --ship & gulp package-solution --ship
 Charger le fichier sppkg dans un catalogue d’application

Ajout dans Office 365

Vous pouvez installer le fichier sppkg dans le catalogue d’application de votre tenant.

 Allez dans https://tenant-admin.sharepoint.com

Prise de notes

124 Stéphane LEENHARDT - SupMicro tous droits 2019


3 Développement coté Client - Navigateur

 Dans App Catalog , puis dans Applications pour SharePoint

Il suffit de glisser-déplacer le fichier sppkg dans la bibliothèque /AppCatalog (Applications pour


SharePoint)

Déploiement de solution local ou Global

Un choix se fait pour savoir si vous voulez déployer globalement ou localement :


Dans l’exemple précèdent on a chargé un fichier sppkg dans le catalogue du tenant mais il faut ajouter
l’application sur chaque collection de sites pour qu’elle soit activée.

On peut également de choisir une activation globale : pour tous les sites, la solution sera disponible.

Lors de la génération du squelette Yeoman, si on répond Y (oui) pour que la solution soit disponible au
niveau du tenant, le fichier package-solution.json aura une propriété nouvelle :

"solution": {
"name": "tenant-deploy-client-side-solution",
"id": "dd4feca4-6f7e-47f1-a0e2-97de8890e3fa",
"version": "1.0.0.0",
"skipFeatureDeployment": true

Lorsque la solution avec l’attribut skipFeatureDeployment défini sur true est déployée sur le catalogue
d’applications client, l’administrateur a la possibilité de configurer la solution de sorte qu’elle soit
déployée de manière centralisée sur le client.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 125


3 Développement coté Client - Navigateur

Activation du
déploiement sur le
Tenant
Désactivé Activé

Les composants sont


La solution doit être activée sur
disponibles immédiatement sur
chaque site
tous les sites

La Fonctionnalité peut ajouter Les WebPart sont disponible sur


des éléments supplémentaires tous les sites

Par défaut, la case à cocher Rendre cette solution disponible pour tous les sites dans l’organisation n’est
pas sélectionnée. Si l’administrateur sélectionne la case à cocher, les composants figurant dans les
solutions sont automatiquement visibles et disponibles sur le client.

Mais il est possible de filtrer la disponibilité de la solution en fonction de :


• Un modèle de site
• Une définition de liste

Lorsqu’on utilise le déploiement sur le Tenant, tous les artefacts qui sont ajoutés par une
fonctionnalité sont ignorés : cela concerne par exemple des définitions de liste, de champs, de type de
contenu.

Prise de notes

126 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Manipulation des donnees SharePoint


On peut requêter tous les types de données présents dans SharePoint, cela inclus les données qui ne sont
pas forcément dans des listes. Différentes techniques permettent de requêter SharePoint comme :
➢ Les requêtes en langage CAML (Collaboration Application Markup Language)
➢ Les requêtes utilisant une exposition REST des données
➢ Les requêtes utilisant des API Office 365 et permettant d’obtenir des informations multiples

On distinguera les requêtes Serveur de celles que l’on peut transmettre en étant coté client.

Appels Client
Peuvent se faire avec CAML, le modèle objet Client, avec REST ou avec les services ADO.NET

I.Requêtes CAML

Le CAML est le langage interne pour la définition des éléments de SharePoint, il existe depuis la première
version de SharePoint (2001). Il est utilisé à plusieurs niveaux dans SharePoint :
➢ Dans les scripts qui utilisent le modèle objet SharePoint ou le CAML est envoyé en tant que valeur
de paramètre de méthode.
➢ Dans les messages SOAP, les chaines CAML indique les opérations à effectuer aux webservices
➢ Dans les définitions de sites frontaux, le CAML est utilisé pour instancier des nouveaux sites
➢ Dans les fonctionnalités et solutions SharePoint : Le CAML est le langage de dialogue entre une
définition et une action à réaliser par SharePoint.
➢ Expérience classique : Le rendu des éléments dans SharePoint : les affichages (champs, liste, type
de données) sont affichées à partir d’HTML défini dans une structure CAML
➢ On retrouve le CAML pour la définition des éléments dans SPFx et les Add-In mais pour définir des
artefacts SharePoint.

Constitution d’une requête CAML

<Query>
<Where>
<!—Operateur de comparaison-->
<Eq>
<FieldRef Name="Mettre le nom du champs" />
<Value Type="Mettre le Type de Données">valeur souhaitée</Value>
</Eq>
</Where>
<OrderBy>
<FieldRef Name="Mettre le nom du champs" />
<FieldRef Name="Mettre le nom du champs" />
</OrderBy>
</Query>

Une requête de recherche CAML commence toujours par le nœud racine : Query.
Dans Query deux éléments sont possibles : Where et OrderBy.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 127


4 Manipulation des Données SharePoint
➢ Where : permet de définir les critères de recherche (les filtres) et peut être plus ou moins complexe,
en définissant des opérateurs pour des recherches complexes.
➢ OrderBy : permet de définir les champs sur lesquels on souhaite un tri par défaut l’ordre est ascendant
sauf si on spécifie : Ascending="False"
➢ FieldRef : on utilise soit le nom interne du champ ou en utilisant ID on peut spécifier le Guid du champ
➢ Value : permet de définir la valeur dans le critère. L’attribut Type est optionnel et permet de donner
le type du champ. Sans Type, SharePoint considère le type comme Text.

Dans la clause Where on spécifie l’opérateur que l’on souhaite utiliser pour la recherche :
Operateur Description
Eq Egalité
Neq Non égalité
Gt Plus grand strictement
Geq Plus grand ou égal
Lt Plus petit strictement
Leq Plus petit ou égal
IsNull et IsNotNull Est nul ou non nul
BeginsWith Commence par
Contains Contient
DateRangeOverlap Compare des dates dans un événement récurrent
In Permet de définir plusieurs valeurs :
<In>
<FieldRef …>
<Values>
<Value>…</Value>
<Value>…</Value>
</Values>
</In>
Includes et Utilisé dans les champs Recherche d’information si le champ peut avoir
NotIncludes plusieurs valeurs

A ces opérateurs peuvent être combinés des opérateurs de jointure qui permettent de définir plusieurs
critères :
And Et
Or Ou
1) Exemples de combinaisons possibles

Requête Simple
<Where>
<Eq>
<FieldRef Name='Ville' />
<Value Type='Lookup'>Paris</Value>
</Eq>
</Where>
Recherche dans une colonne « Recherche d’information » la ville contenant Paris

Prise de notes

128 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Requête à 2 critères
<Where>
<And>
<Eq>
<FieldRef Name='Nom' />
<Value Type='Text'>LEENHARDT</Value>
</Eq>
<Geq>
<FieldRef Name='Age' />
<Value Type='Number'>30</Value>
</Geq>
</And>
</Where>
Recherche le nom LEENHARDT et pour un âge >=30
Requête à 3 critères
Elle doit imbriquer les opérateurs de jointure en partant vers le haut
<Where>
<And>
<And>
<Eq>
<FieldRef Name='Nom' />
<Value Type='Text'>LEENHARDT</Value>
</Eq>
<Geq>
<FieldRef Name='Age' />
<Value Type='Number'>30</Value>
</Geq>
</And>
<Lt>
<FieldRef Name='Age' />
<Value Type='Number'>60</Value>
</Lt>
<And>
</Where>
On ajoute un critère l’âge doit être <60.
2) Appel de requêtes CAML
L’objet de départ est SPQuery auquel on définit les propriétés Query, Joins, ProjectedFields et ViewFields.
Appels coté Serveur

SPQuery qry = new SPQuery();


string camlquery = "<OrderBy><FieldRef Name='Ville' /></OrderBy><Where>"+
"<Eq><FieldRef Name='Nom' /><Value Type='Text'>LEENHARDT</Value></Eq>"+ </Where>";
qry.Query = camlquery;
//Appel sur un objet SPList
SPListItemCollection listItemsCollection = list.GetItems(qry);

Options sur SPQuery :


qry.RowLimit = 10;
Limite le retour à 10 résultats

qry.IncludeMandatoryColumns = true;

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 129


4 Manipulation des Données SharePoint
Retourne en plus des champs demandés, tous les champs qui sont définis obligatoires dans la liste.

Appel depuis un CSOM .NET

//on obtient le contexte


SP.List oList = clientContext.Web.Lists.GetByTitle("Announcements");

CamlQuery camlQuery = new CamlQuery();


camlQuery.ViewXml =
"<View><Query><Where><Geq><FieldRef Name='ID'/>" +
"<Value Type='Number'>10</Value></Geq></Where></Query><RowLimit>100</RowLimit></View>";
ListItemCollection collListItem = oList.GetItems(camlQuery);
clientContext.Load(collListItem);
clientContext.ExecuteQuery();
foreach (ListItem oListItem in collListItem)
{
Console.WriteLine("ID: {0} \nTitle: {1} \nBody: {2}", oListItem.Id,
oListItem["Title"], oListItem["Body"]);
}

Appels Cote client


ClientContext clientContext = new
ClientContext("http://partenaires.koolvoyage.com");
List list = clientContext.Web.Lists.GetByTitle("Client API Test List");
CamlQuery camlQuery = new CamlQuery();
camlQuery.ViewXml =
@"<View>
<Query>
<Where>
<Eq>
<FieldRef Name='Category'/>
<Value Type='Text'>Development</Value>
</Eq>
</Where>
</Query>
<RowLimit>100</RowLimit>
</View>";
ListItemCollection listItems = list.GetItems(camlQuery);
clientContext.Load(
listItems,
items => items.Include(
item => item["Category"],
item => item["Estimate"]));
clientContext.ExecuteQuery();
foreach (ListItem listItem in listItems)
{
listItem["Estimate"] = (double)listItem["Estimate"] * 1.5;
listItem.Update();
}
clientContext.ExecuteQuery();
Les appels coté client peuvent se faire soit par les WebService SharePoint ou avec la classe EcmaScript
SP.CamlQuery

Prise de notes

130 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 131


4 Manipulation des Données SharePoint

II.Les appels REST dans SharePoint


REST est l’acronyme de Representation State Transfer et permet dans SharePoint de fournir les données
des listes et de bibliothèques directement à partir de requêtes http.
Le principe de fonctionnement est lié aux WebService qui associent la lecture, ajout, mise à jour et
suppression aux commandes GET, POST, PUT, DELETE du protocole http.
L’interface REST repose sur l’utilisation sous-jacente des services ADO.NET sur laquelle elle repose pour
exposer les données.

Aujourd’hui pour manipuler les services REST on trouve différentes API qui permettent de simplifier leur
usage.

Il existe deux modes possibles :


• REST/JSON
• REST/OData

1) L’importance de REST dans Office 365

L’architecture REST devient la méthode principale utilisée par Microsoft pour fournir des services et des
données dans Office 365.

Ce choix s’explique par différents avantages que l’on trouve dans cette architecture :

Simplicité : on construit une URL qui peut être testée facilement dans n’importe quel navigateur et
comme c’est un standard on trouve plusieurs outils pour tester une requête REST.

Portabilité : Les environnements techniques diffèrent selon les systèmes d’information et les technologies
utilisées sont multiples. REST permet de répondre à cette problématique car il est utilisable dans la
majorité des langages informatiques. Microsoft fournit de nombreux exemples de code et des SDK pour
utiliser Graph (.NET, Javascript, PHP, Android, etc..).

2) Le mode REST/JSON

L’interface possible est ListData.svc qui est un WebService de SharePoint faisant l’intermédiaire entre la
requête http et les données qui seront retournées.

Prise de notes

132 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Des URL codifiées permettent d’appeler les services REST directement à partir d’un navigateur
URL Description
http://serveur/_vti_bin/ListData.svc Retourne la liste des composants sur un
site donné
http://serveur/_vti_bin/ListData.svc/Projects Retourne les données d’une liste
http://serveur/_vti_bin/ListData.svc/$metadata Retourne les données qui décrivent
toutes les listes
http://serveur/sites/TestWebs/_vti_bin/listdata.svc/Emp Retourne le 2e élément
loyees(2)
http://lsspf4719/sites/TestWebs/_vti_bin/listdata.svc/E Retourne le titre sur la base d’un filter
mployees?$filter=Title eq 'My Project Title'
http://serveur/_vti_bin/Listdata.svc/Contacts(20)/Fname Retourne la colonne Fname du 20e
élément
http://serveur/_vti_bin/Listdata.svc/Contacts(20)/Fname Ne retourne que la valeur de la colonne
/$value Fname du 20e élément.
http://serveur/_vti_bin/Listdata.svc/Scontacts/$count Retourne le nombre d’éléments dans la
liste Contacts

Tri listdata.svc/Employees?$orderby=Fullname
Filtre listdata.svc/Employees?$filter=JobTitle eq 'SDE'
Projection listdata.svc/Employees?$select=Fullname,JobTitle
Pagination listdata.svc/Employees?$top=10&$skip=30
Expansion en ligne listdata.svc/Employees?$expand=Project

Le résultat est un format XML ATOM que l’on peut programmer comme tel…

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 133


4 Manipulation des Données SharePoint

Création d’appels REST fortement typés


Dans Visual Studio ajouter une référence de service, en indiquant l’url de la requête REST.
Visual Studio crée alors une classe de proxy fortement typée incluant toutes colonnes internes des
données obtenues.

3) Les appels REST utilisant le format OData

Le service client.svc est appelé par CSOM JavaScript,Silverlight et .NET mais est aussi capable de certaines
opérations en mode REST. Dans ce cas c’est format OData qui est un format standardisé qui est utilisé
pour retourner des données.
Les appels permettent toutes les opérations CRUD, selon l’opération le protocole http est différent (GET,
POST, PUT : met à jour et écrase/remplace, MERGE : met a jour uniquement, DELETE : pour supprimer)

Pour appeler en mode REST, il suffit d’ajouter /_api dans les url que l’on utilise.

Prise de notes

134 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint
Les formats d’URL possibles en appels REST/OData

Pour atteindre la collection de sites

http://server/site/_api/site

Pour atteindre un site

http://server/site/_api/web

Obtenir des informations en mode GET et REST

Titre d’un site web/title


Toutes les listes lists
Une liste en particulier lists/getbytitle('listname')
Tous les éléments d’une liste lists/getbytitle('listname')/items
Obtenir les valeurs d’une colonne lists/getbytitle('listname')?select=Title

Langages d’appels
On peut faire du REST/OData en C# coté serveur ou coté client, la démarche reste la même dans les cas.

Exemple en C#

HttpWebRequest endpointRequest =
(HttpWebRequest)HttpWebRequest.Create("http://<site url>/_api/web/lists");
endpointRequest.Method = "GET";
endpointRequest.Accept = "application/json;odata=verbose";
endpointRequest.Headers.Add("Authorization","Bearer " + accessToken);
HttpWebResponse endpointResponse =
(HttpWebResponse)endpointRequest.GetResponse();

Exemple en mode JavaScript

var executor = new SP.RequestExecutor(appweburl);


executor.executeAsync(
{
url:
appweburl +
"/_api/SP.AppContextSite(@target)/web/lists?@target='" +
hostweburl + "'",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: successHandler,
error: errorHandler
}
);

III.Les API REST Office 365

Aujourd’hui dans Office 365 on trouve 2 gammes d’API pour consommer des services Office 365 :
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 135


4 Manipulation des Données SharePoint

Les API SharePoint historiques et un ensemble d’API nommés Microsoft Graph.

1) Introduction a Graph

Microsoft Graph est une passerelle qui vous permet d’accéder aux données et aux renseignements dans
Microsoft 365 :
Microsoft Graph propose un modèle de programmabilité unifié pour vous aider à tirer parti de la quantité
impressionnante de données dans Office 365.
On peut utiliser l’API Microsoft Graph pour créer des applications pour les organisations et les clients qui
interagissent avec les données de millions d’utilisateurs.

Pour se connecter à Graph il y a un seul point d’entrée unique :


https://graph.microsoft.com
Les composants de Graph sont :
• Azure Active Directory
• les services Office 365 : SharePoint, OneDrive, Outlook/Exchange, Microsoft Teams, OneNote, le
Planificateur et Excel ;
• les services Enterprise Mobility and Security : Identity Manager, Intune, Advanced Threat Analytics
et Advanced Threat Protection ;
• les services de Windows 10 : activités et appareils ;
• Éducation

Origine du terme Graph :


La dénomination « Graph » vient du fait que toutes ces ressources sont interconnectées, formant un
réseau d’objets.
Par exemple, pour un utilisateur donné, Graph permet d’accéder à ses messages, son calendrier, ses
fichiers, mais également aux groupes auxquels il appartient.
Cet utilisateur est également associé à un manager, à un ou plusieurs appareils (PC, téléphone, etc..), et
d’autres choses encore… Ces interconnexions permettent d’imaginer beaucoup de scénario d’utilisation.

Prise de notes

136 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

• Productivité
Fonctionnalité Services pris Description
en charge
Calendrier Outlook Permet aux utilisateurs de configurer des rendez-vous et des
réunions sur le web, les appareils mobiles et de bureau. Elle
fait partie de l’outil de messagerie Outlook dans Office 365
qui permet également aux utilisateurs de gérer les e-mails et
les contacts.
Fichiers OneDrive et Gère et partage les fichiers des utilisateurs sur OneDrive et
SharePoint SharePoint.
Courrier Outlook Permet aux utilisateurs de communiquer, d’organiser les
messages et de gérer les priorités dans leur flux de travail,
sur le web, les appareils mobiles et de bureau. Elle fait partie
de l’outil de communication Outlook dans Office 365 qui
permet également aux utilisateurs de gérer les contacts et
de planifier des réunions.
Remarques OneNote Permet aux utilisateurs de planifier et d’organiser des idées
et des informations.
Contacts Outlook Permet aux utilisateurs de gérer les contacts sur le web, les
personnels appareils mobiles et de bureau. Elle fait partie de l’outil de
messagerie Outlook dans Office 365 qui permet également
aux utilisateurs de gérer les e-mails et de planifier des
réunions.
Classeurs et Excel Permet aux utilisateurs d’utiliser des feuilles de calcul Excel
graphiques pour effectuer des calculs complexes, suivre, analyser et
visualiser des données, et générer des rapports pr
• Collaboration

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 137


4 Manipulation des Données SharePoint
Fonctionnalité Services pris en Description
charge
Sites et des listes SharePoint Plateforme sur le web qui permet aux utilisateurs et aux groupes
Office 365 de partager, d’organiser, de gérer et de découvrir du
contenu (notamment des listes, des fichiers et des notes).
Tâches et plans Planificateur Permet aux utilisateurs dans les groupes Office 365 de créer des
plans, d’attribuer des tâches et de suivre leur avancement.
Travail d’équipe Microsoft Hub numérique et espace de travail dédié aux conversations qui
(version préliminaire) Teams permet aux équipes de partager des fichiers, des notes, des
calendriers et des plans.

• Veille sur les réseaux sociaux et analyses


Fonctionnalité Services pris en Description
charge
Veille sur les réseaux sociaux : Azure AD, Outlook, Obtient des informations sur des personnes selon
contacts SharePoint, etc. leur pertinence pour l’utilisateur. La pertinence est
déterminée par les relations professionnelles et les
modèles de communication et de collaboration de
l’utilisateur.
Veille sur les réseaux sociaux : Delve, OneDrive, Utilise des analyses et des techniques de machine
informations sur les documents Outlook, learning avancées pour suggérer les documents les
(préversion) SharePoint plus utilisés, consultés, modifiés ou partagés par un
utilisateur.

• Gestion des périphériques


Fonctionnalité Services pris en charge Description
Appareils et Intune Inscrit et configure les appareils et gère les
applications applications mobiles dans votre organisation.

• Sécurité
Fonctionnalité Services pris en charge Description
Intégration de la sécurité Azure AD Identity Offre une passerelle unifiée vers des informations
(préversion) Protection, Azure Security sur la sécurité et les actions proposées par Microsoft
Center et l’écosystème de partenaires.
Identity Protection Azure AD Permet d’accéder aux données de connexion et de
(préversion) compte à risque des utilisateurs dans Azure AD.

Et d’autres fonctions Expériences multi-appareils, Rapports d’utilisation, Éducation, Applications


professionnelles (Booking uniquement pour certains tenant)

Les concepts d’utilisateur et de groupe sont au cœur de Microsoft Graph :

Prise de notes

138 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Un utilisateur dans Microsoft Graph est une personne parmi des millions d’autres qui utilisent les services
cloud de Microsoft 365.
Il représente un point de contact dont l’identité est protégée et les accès sont bien gérés.
Les données des utilisateurs sont le moteur des entreprises. Les services Microsoft Graph mettent ces
données à la disposition des entreprises dans des contextes enrichis, des mises à jour en temps réel et des
informations ciblées, toujours en accord avec les autorisations appropriées.

Un groupe Office 365 est une entité fondamentale qui permet aux utilisateurs de collaborer. Il s’intègre
avec d’autres services, pour faciliter l’exécution de scénarios enrichis de planification des tâches, de
travail d’équipe et d’enseignement, entre autres.

Fonctionnalité Services pris en charge Description


Utilisateurs Azure AD et la plupart des services de Au cœur de Microsoft Graph, l’utilisateur
productivité, de collaboration, d’aide à est le point central de nombreux services
la décision et d’enseignement Microsoft Graph qui génèrent des
fonctionnalités centrées utilisateur.
Groupes Azure AD, OneDrive, OneNote, Un groupe Office 365 représente un outil
Outlook, Planificateur de collaboration fondamental qui
permet aux utilisateurs de partager des
conversations, des fichiers, des notes,
des calendriers, des plans et bien plus
encore.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 139


4 Manipulation des Données SharePoint
2) Comment s’identifier auprès de Graph

La première problématique qui se pose, à l’instar de tout projet informatique, est celle de la sécurité.
N’importe quel utilisateur ne doit pas accéder à n’importe quelle ressource.
Par exemple, un utilisateur ne doit pas accéder à la boite mail d’un autre utilisateur.

Pour utiliser Microsoft Graph API, il faut au préalable inscrire une application Azure Active Directory sur le
portail Azure :
C’est cette application qui permet de définir les droits d’accès à chaque ressource.
L’administrateur va définir selon le besoin, les différentes ressources accessibles.
C’est également cette application Azure Active Directory qui donne le contexte d’authentification (jeton)
permettant d’accéder aux ressources. Ainsi, une application métier qui ne possède pas ce jeton, ne pourra
pas accéder aux données de Graph.

Étapes relatives à l’autorisation et à l’authentification

1. Enregistrer votre application avec Azure AD.


2. Obtenir l’autorisation.
3. Obtenir un jeton d’accès.
4. Appeler Microsoft Graph avec le jeton d’accès.
5. Utiliser un jeton actualisé pour obtenir un nouveau jeton d’accès.

Les types d’applications prises en charge sont :

Prise de notes

140 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Il existe 2 versions du protocole qui ne permettent pas les mêmes identifications :

La version v2 prend en charge live les comptes MSA (Microsoft Sign Account : hotmail.com, outlook.com,
msn.com)

Lorsqu’on enregistre une application dans Azure AD il existe 2 méthodes différentes

Autorisations déléguées : utilisées par les applications qui ont un utilisateur connecté présent. Pour ces
applications, l’utilisateur ou un administrateur accorde les autorisations que l’application demande.
Ensuite, l’application se voit déléguer une autorisation d’agir en tant qu’utilisateur connecté lors des
appels à une API. En fonction de l’API, l’utilisateur peut ne pas être en mesure de donner son
consentement à l’API directement et avoir besoin d’un « consentement de l’administrateur ».

Autorisations d’application : utilisées par les applications qui s’exécutent sans utilisateur connecté
présent ; par exemple, les applications qui s’exécutent en tant que services ou démons en arrière-plan.
Les autorisations d’application peuvent uniquement être consenties par un administrateur, car elles sont
généralement puissantes et permettent d’accéder à des données situées au-delà des limites de
l’utilisateur ou à des données normalement réservées aux seuls administrateurs.

Dans la pratique que faut-il utiliser ?

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 141


4 Manipulation des Données SharePoint
Application externe
Une application tierce peut demander ces autorisations à des utilisateurs et des administrateurs. Ces
derniers doivent approuver la requête avant que l’application puisse accéder aux données ou agir pour le
compte d’un utilisateur.
En fragmentant les fonctionnalités de la ressource en ensembles plus réduits d’autorisations, il est
possible de créer des applications tierces pour qu’elles demandent uniquement les autorisations
nécessaires à leur fonctionnement.
Les utilisateurs et les administrateurs peuvent connaître avec précision les données auxquelles
l’application a accès, et être ainsi moins inquiets quant à une éventuelle intention malveillante. Les
développeurs doivent toujours respecter le concept de moindre privilège et demander uniquement les
autorisations dont ils ont besoin pour faire fonctionner leurs applications.

Dans ce cas un consentement peut être demandé à l’utilisateur final ou un administrateur peut octroyer
les autorisations demandées par l’application.

• Si le consentement est demandé à l’utilisateur final :

Pour les autorisations déléguées, les autorisations effectives de votre application correspondent au
niveau de privilège le moins élevé entre les autorisations déléguées que l’application a reçues (par le biais
d’un consentement) et les privilèges de l’utilisateur actuellement connecté.
Votre application ne peut jamais avoir plus de privilèges que l’utilisateur connecté.

Attention aux droits de l’utilisateur connecté :


Supposons que votre application ait reçu l’autorisation déléguée User.ReadWrite.All. Cette autorisation
permet nominalement à votre application de lire et mettre à jour le profil de chaque utilisateur dans une
organisation. Si l’utilisateur connecté est un administrateur général, votre application est en mesure de
mettre à jour le profil de chaque utilisateur de l’organisation. Toutefois, si l’utilisateur connecté n’a pas de
rôle d’administrateur, votre application peut uniquement mettre à jour le profil de l’utilisateur connecté.
Elle ne peut pas mettre à jour les profils des autres utilisateurs de l’organisation, car l’utilisateur pour
lequel elle est autorisée à agir n’a pas ces privilèges.

Demande de consentement à l’utilisateur final

Une application peut demander explicitement les autorisations requises avec l’attribut scope :
GET https://login.microsoftonline.com/common/oauth2/v2.0/authorize?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F&response_mode=query
&scope=
https%3A%2F%2Fgraph.microsoft.com%2Fcalendars.read%20
https%3A%2F%2Fgraph.microsoft.com%2Fmail.send
&state=12345

Une fois que l’utilisateur a entré ses informations d’identification, le point de terminaison v2.0 recherche
un enregistrement correspondant de consentement d’utilisateur. Si, par le passé, l’utilisateur n’a jamais
accepté les autorisations demandées et qu’un administrateur n’a jamais accepté ces autorisations pour le
compte de toute l’organisation, le point de terminaison v2.0 demande à l’utilisateur d’accorder les
autorisations demandées.

Prise de notes

142 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Demande de consentement d’un administrateur


Si un utilisateur consommateur peut accorder à une application l’accès à ce type de données, les
utilisateurs d’organisation sont limités lorsqu’il s’agit d’octroyer l’accès au même jeu de données
d’entreprise sensibles.

• Si votre application requiert l’accès à l’une de ces autorisations d’un utilisateur de l’organisation,
ce dernier recevra un message erreur indiquant qu’il n’est pas autorisé à donner son
consentement pour les autorisations de votre application.

• Si votre application requiert l’accès aux étendues restreintes aux administrateurs pour les
organisations, vous devez demander l’autorisation directement à un administrateur d’entreprise
également à l’aide du point de terminaison de consentement de l’administrateur, décrit ci-
dessous.

• Si l’application demande des autorisations déléguées à privilèges élevés et qu’un administrateur


accorde ces autorisations via le point de terminaison de consentement de l’administrateur, le
consentement est accordé à tous les utilisateurs du locataire.

• Si l’application demande des autorisations d’application et qu’un administrateur accorde ces


autorisations via le point de terminaison de consentement de l’administrateur, cette attribution
n’est pas effectuée pour le compte d’un utilisateur spécifique.
L’application cliente reçoit les autorisations directement.
Ces types d’autorisations sont généralement uniquement utilisés par les services démon et d’autres
applications non interactives qui s’exécutent en arrière-plan.

Conclusion
En fonction du profil de l’utilisateur le consentement aura des impacts soit pour l’utilisateur en cours ou
pour l’ensemble du tenant.

L’expérience de consentement est la suivante

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 143


4 Manipulation des Données SharePoint
L’invite de consentement vise à s’assurer que les utilisateurs disposent de suffisamment d’informations
pour décider de faire confiance ou non à l’application cliente afin de l’autoriser à accéder aux ressources
protégées en leur nom. Comprendre les blocs de construction permet aux utilisateurs invités à donner
leur consentement de prendre des décisions plus avisées et aide les développeurs à créer de meilleures
expériences utilisateur.

Fonctions Structure de l’écran de consentement


1 : Cet identificateur représente l’utilisateur
au nom duquel l’application cliente demande
à accéder aux ressources protégées.
2 L’intitulé change selon que les utilisateurs
suivent le flux de consentement utilisateur ou
administrateur. Dans le flux de consentement
utilisateur, l’intitulé sera « Permissions
requested » (Autorisations demandées),
tandis que dans le flux de consentement
administrateur, l’intitulé aura une ligne
supplémentaire « Accept for your
organization » (Accepter pour votre
organisation).
3 Logo de l’application : Cette image donne
aux utilisateurs un indice visuel pour
déterminer si cette application est bien celle à
laquelle ils souhaitaient accéder.
4 Nom de l’application : Cette valeur indique
aux utilisateurs quelle application demande à
accéder à leurs données.
5 Domaine de l’éditeur, Cette valeur fournit
aux utilisateurs un nom de domaine dont ils
peuvent évaluer la fiabilité. Ce domaine est
fourni par les développeurs et la propriété de
ce domaine d’éditeur est validée.

6 Autorisations : Cette liste contient les autorisations demandées par l’application cliente. Les utilisateurs
doivent systématiquement évaluer les types d’autorisations demandées pour savoir à quelles données
l’application cliente aura accès en leur nom s’ils donnent leur consentement. En tant que développeur
d’application, nous vous recommandons de demander des autorisations d’accès avec le niveau de
privilège minimum.

7 Description de l’autorisation : Cette valeur est fournie par le service exposant les autorisations.

8 Conditions générales de l’application : Ces conditions contiennent des liens vers les conditions
d’utilisation du service et la déclaration de confidentialité de l’application. L’éditeur est chargé de
mentionner ses règles dans les conditions d’utilisation du service. L’éditeur doit également indiquer de
quelle manière il utilise et partage les données des utilisateurs dans sa déclaration de confidentialité. Si
Prise de notes

144 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint
l’éditeur ne fournit pas de liens vers ces valeurs pour les applications mutualisées, un message
d’avertissement s’affiche en gras dans l’invite de consentement.

9 https://myapps.microsoft.com : Il s’agit du lien via lequel les utilisateurs peuvent afficher et supprimer
les applications non Microsoft qui ont actuellement accès à leurs données.

Considérations et Gouvernance

Pour choisir la méthode appropriée il faut étudier la façon dont l’entreprise Gouverne la sécurité pour
choisir la méthode d’identification appropriée :

Bien souvent on ne demande pas aux utilisateurs de consentement, car la DSI/service informatique,
préfère fixer et contrôler les autorisations ce qui donne une impression de maitrise des droits fournis aux
applications.

3) Format d’une requête Graph

La structure générique est la suivante :

https://graph.microsoft.com/{version}/{resource}?query-parameters

Les composants d’une requête incluent :


• Méthode HTTP - Méthode HTTP utilisée dans la requête à Microsoft Graph.
• {version} - Version de l’API Microsoft Graph qu’utilise votre application.
• {resource} - Ressource dans Microsoft Graph que vous référencez.
• Paramètre de la requête - Une série facultative de paramètres pour modifier la requête ou la
réponse.

Méthode Description
GET Lire les données à partir d’une ressource.
POST Créer une nouvelle ressource ou effectuer une action.
PATCH Mettre à jour une ressource avec de nouvelles valeurs.
PUT Remplacer une ressource par une autre.
DELETE Supprimer une ressource.
• Pour les méthodes GET et DELETE, le corps de la requête est requis.
• Les méthodes POST, PATCH et PUT nécessitent un corps de requête, généralement spécifié au
format JSON, qui contient des informations supplémentaires, telles que les valeurs des propriétés
de la ressource.
Version :
• v1.0 inclut les API généralement disponibles. Utilisez la version v1.0 pour toutes les applications de
production.
• beta inclut des API qui sont actuellement en version préliminaire. Étant donné que nous pourrions
apporter des modifications majeures à la version bêta de nos API, nous vous recommandons
d’utiliser la version bêta uniquement pour tester les applications en cours de développement ; ne
les utilisez pas dans vos applications de production.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 145


4 Manipulation des Données SharePoint

Ressource :
Votre URL doit inclure la ou les ressources avec lesquelles vous interagissez dans la requête, notamment
me, users, groups, drives et sites. Chacune des ressources de niveau supérieur inclut également des
relations, que vous pouvez utiliser pour accéder à des ressources supplémentaires, par exemple
me/messages ou me/drive. Vous pouvez également interagir avec les ressources à l’aide de méthodes.
Par exemple, pour envoyer un e-mail, utilisez me/sendMail.

Paramètre :
Exemple pour filtrer les emails reçus :
https://graph.microsoft.com/v1.0/me/messages?filter=emailAddress eq 'jon@contoso.com'

Liste des paramètres disponibles :


https://developer.microsoft.com/fr-fr/graph/docs/concepts/query_parameters

Quelques exemples de requêtes courantes

Opération URL
GET mon profil https://graph.microsoft.com/v1.0/me
GET mes fichiers https://graph.microsoft.com/v1.0/me/drive/root/children
GET ma photo https://graph.microsoft.com/v1.0/me/photo/$value
GET mon courrier https://graph.microsoft.com/v1.0/me/messages
GET mon courrier Importance https://graph.microsoft.com/v1.0/me/messages?$filter=importance%
haute 20eq%20'high'
GET mes événements du https://graph.microsoft.com/v1.0/me/events
calendrier
GET mon responsable https://graph.microsoft.com/v1.0/me/manager
GET le dernier utilisateur pour https://graph.microsoft.com/v1.0/me/drive/root/children/foo.txt/last
modifier le fichier foo.txt ModifiedByUser
GET les groupes Office 365 https://graph.microsoft.com/v1.0/me/memberOf/$/microsoft.graph.g
dont je suis membre roup?$filter=groupTypes/any(a:a%20eq%20'unified')
GET des utilisateurs dans mon https://graph.microsoft.com/v1.0/users
organisation
GET les groupes de mon https://graph.microsoft.com/v1.0/groups
organisation
GET des personnes en relation https://graph.microsoft.com/v1.0/me/people
avec moi
GET les éléments qui me sont https://graph.microsoft.com/beta/me/insights/trending
suggérés
GET mes notes https://graph.microsoft.com/v1.0/me/onenote/notebooks

4) Librairies et Démarche de développement

Tout d’abord choisir la version 1.0 ou 2.0 que vous souhaitez cibler de l’identification Active Directory :
Prise de notes

146 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint

Pour la v1.0 :
https://docs.microsoft.com/fr-fr/azure/active-directory/develop/active-directory-authentication-libraries
Aussi nommée ADAL : Active Directory Authentication Library

Pour la v2.0 :
https://docs.microsoft.com/fr-fr/azure/active-directory/develop/reference-v2-libraries
Aussi nommée MSAL : MicroSoft Authentication Library.

Une fois le choix de la version fait on sélectionne le package selon le langage de développement que l’on
va cibler :

On trouve des bibliothèques qui dépendent du type d’application que l’on souhaite développer.
Les applications clientes qui vont être exécutées à distance, des Bibliothèques de middleware et tierces.

On trouve aussi bien des bibliothèques ADAL que MSAL pour se connecter selon la plateforme :
• Les bibliothèques clientes incluent : JS, Angular, .NET, iOS et Android.
• Les bibliothèques de middleware : ASP.NET, Node
• Les tierces : Php, Scribe Java, iOs.

Mise en place d’un accès pour un utilisateur

En se connectant sur :
https://apps.dev.microsoft.com

On peut autoriser pour son profil utilisateur les accès aux API, comme Graph :
Soit en mode délégué ou en mode application.

On peut également définir des autorisations d’application au niveau d’Azure AD en allant dans la
rubrique : Applications d’entreprise

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 147


4 Manipulation des Données SharePoint

Pour afficher les autorisations accordées a graph :

Les propriétés donnent l’id de l’objet mais on peut utiliser le nom :

Pour demander une autorisation depuis une solution SPFx on modifie le config/package-solution.json:
Prise de notes

148 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-
solution.schema.json",
"solution": {
"name": "spfx-graph-client-side-solution",
"id": "5d16587c-5e87-44d7-b658-1148988f212a",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Calendars.Read"
}
]
},
"paths": {
"zippedPackage": "solution/spfx-graph.sppkg"
}
}

Avec plusieurs scope :


"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Calendars.Read"
},
{
"resource": "Microsoft Graph",
"scope": "User.ReadBasic.All"
}
Il suffit de combiner les portées souhaitées.

Une fois une demande d’autorisation transmise il faut qu’elle soit acceptée par un administrateur.

Pour cela il faut aller dans le centre d’administration avec la nouvelle interface d’administration : dans
Gestion des API

On trouve la liste des demandes d’autorisations des applications :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 149


4 Manipulation des Données SharePoint

Si vous essayez d’approuver une demande d’autorisation pour une ressource dont certaines autorisations
ont déjà été accordées (par exemple, en accordant des autorisations supplémentaires à Microsoft Graph),
les étendues demandées sont ajoutées aux autorisations accordées précédemment.

On peut également gérer en PowerShell les demandes d’autorisations :


Get-SPOTenantServicePrincipalPermissionRequests : affiche les demandes
Approve-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid> : accorde
Deny-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid> : refuse
Get-SPOTenantServicePrincipalPermissionGrants : affiche les permissions autorisées

Librairies disponibles dans SPFx

On trouve dans SPFx deux classes pour faire des appels REST, SPHttpClient pour les appels REST dans
SharePoint et une classe dédiée pour Graph MSGraphClient.

Accès aux API SharePoint

Exemple simple d’appel, pour afficher le titre d’un site

this.context.spHttpClient
.get(`${this.context.pageContext.web.absoluteUrl}/_api/web?$select=Title`,
SPHttpClient.configurations.v1)
.then((res: SPHttpClientResponse): Promise<{ Title: string; }> => {
return res.json();
})
.then((web: {Title: string}): void => {
console.log(web.Title);
});

Mais Les requêtes REST brutes sont sujettes aux erreurs :

Prise de notes

150 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint
SPHttpClient offre un support de base pour communiquer avec l'API REST SharePoint. Si vos applications
requièrent des requêtes GET plus complexes, des requêtes POST ou utilisent des fonctionnalités plus
avancées telles que le traitement par lots, vous remarquerez rapidement que l'utilisation de SPHttpClient
est lourde et sujette aux erreurs. Dans de tels cas, vous devriez envisager d'utiliser une autre solution,
telle que la bibliothèque PnPjs, qui vous offre une API fluent pouvant être vérifiée par TypeScript.

Exemple avec la librairie PnPjs


PnPjs provient de l’ensemble PnP SharePoint et propose une simplification dans la programmation.

Pour afficher le titre d’un site, l’exemple équivalent :


sp.web
.select('Title')
.get<{Title: string;}>()
.then(web => {
console.log(web.Title);
});

PnPjs offre un ensemble complet de fonctionnalités pour communiquer avec les API SharePoint. Mais ces
fonctionnalités ajoutent une charge supplémentaire à votre projet. Compressé, PnPjs ajoutera environ 40
Ko à la taille du paquet généré.

Se connecter à des applications Azure AD en utilisant le AadHttpClient

On importe la classe :
import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';

On peut faire une demande d’autorisation dans l’application avec aadHttpClientFactory :


export default class HelloWorldWebPart extends
BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
// ...

this.context.aadHttpClientFactory
.getClient('09c4b84d-13c4-4451-9350-3baedf70aab4')
.then((client: AadHttpClient): void => {
client
.get('https://contoso.azurewebsites.net/api/orders',
AadHttpClient.configurations.v1)
.then((response: HttpClientResponse): Promise<Order[]> => {
return response.json();
})
.then((orders: Order[]): void => {
// process data
});
});
}

// ...
}

Utilisation de MSGraph dans SPFx

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 151


4 Manipulation des Données SharePoint

Pour utiliser la classe MSGraphClient on l’importe :


import { MSGraphClient } from '@microsoft/sp-http';

On peut ensuite utiliser msGraphClientFactory pour appeler un contexte MSGraph :


export default class HelloWorldWebPart extends
BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
// ...
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
// appel de MSGraph ici
});
}

// ...
}

Exemple d’appel au profil de l’utilisateur :

export default class HelloWorldWebPart extends


BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
// ...

this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
// get information about the current user from the Microsoft Graph
client
.api('/me')
.get((error, response: any, rawResponse?: any) => {
// handle the response
});
});
}

// ...
}

Pour avoir un typage fort des types MSGraph on peut importer le package :
https://www.npmjs.com/package/@microsoft/microsoft-graph-types

npm install @microsoft/microsoft-graph-types --save-dev

Dans le code Type Script :


import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

client
.api('/me')
.get((error, user: MicrosoftGraph.User, rawResponse?: any) => {

Prise de notes

152 Stéphane LEENHARDT - SupMicro tous droits 2019


4 Manipulation des Données SharePoint
// handle the response
});

Cela permet un typage fort des éléments de réponse MSGraph et de mieux repérer les erreurs.

On peut utiliser la même architecture pour se connecter a des API d’Entreprises qui seront déployées dans
Azure et protégées par les mêmes systèmes d’identification.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 153


5 Personnalisation de site et de pages

Personnalisation de site et de pages


Objectifs
Présenter les fonctions disponibles pour personnaliser Office 365 dans son ensemble et les espaces
SharePoint en particulier.
Introduire les possibilités de personnalisation en fonction de la pérennité et de l’effort à fournir pour
parvenir au résultat attendu.
Au sujet de SharePoint différencier les possibilités de personnalisation entre le site Classique et
l’expérience moderne.

I.Personnalisation de site et outils de conception

Il existe plusieurs méthodes de personnalisation disponibles selon l’objectif souhaité :


Bien entendu si l’objectif à atteindre permet d’utiliser la méthode la plus simple il faut la privilégier…

Les différentes méthodes qui sont présentées sont classées du plus simple au plus compliqué.

Par ailleurs il faut prendre en considération que la plateforme Office 365 change continuellement et
que certaines personnalisations peuvent entrainer un dysfonctionnement de vos sites si Microsoft
applique des changements. Ce point est à prendre en considération dans le choix que vous prendrez
pour la personnalisation de vos sites.

Les possibilités en matière de personnalisation vont de celles qui personnalisent tout le tenant à celles qui
seront spécifiques à certains sites de l’entreprise.
Le point de départ est donc d’étudier les possibilités offertes au niveau le plus global puis d’étudier les
possibilités au niveau d’un site en particulier.

Les différentes méthodes sont (du plus simple au plus compliqué) :

1. Personnalisation au niveau de toute l’entreprise (on parle aussi de tenant ou d’organisation)


2. Personnalisation d’un thème
3. création d’un nouveau thème et d’une présentation composée
4. Conception d’une feuille de CSS alternative (éventuellement utilisation PnP Partner Pack)
5. Office UI Fabric
6. Ajout de code JavaScript pour l’injection de script personnalisé et de librairies externes
7. Personnalisation de Page Maitre (une option qui devient obsolète)

Ce qui change avec SharePoint Online :


Historiquement lorsqu’on souhaitait modifier la structure et la charte graphique d’un site SharePoint on
se concentrait essentiellement sur le développement de nouvelles pages maitres.
Prise de notes

154 Stéphane LEENHARDT - SupMicro tous droits 2019 1


5 Personnalisation de site et de pages

Le problème avec SharePoint Online est que Microsoft décide seul la planification des modifications sur la
plateforme et que vous pouvez avoir des incompatibilités à la suite de certaines mises à jour et des sites
qui ne fonctionneraient plus.

Faut-il s’interdire pour autant toute modification de page maitre ?


Pour certaines modifications simples non, mais si l’on décide de prendre le risque de mettre en œuvre
une charte graphique complexe sur une page maitre il faut que ce soit sur des sites de publications avec
l’infrastructure de publication qui permet de modifier la page maitre de façon maitrisée avec le
gestionnaire de conception.
Si malgré tout vous décidez de changer directement la page maitre, il faut prévoir un nouveau tenant
pour le développement et publier la page maitre sur un tenant qui recevra les dernières mises à jour en
mode : Prévisualisation.

Pour mettre en évidence le risque de personnaliser la page maitre, il faut prendre en compte l’évolution
de la plateforme :

Avec une page Maitre personnalisée, les mises à jour Microsoft ne seront pas appliquées sur une page
maitre personnalisée (ghosted = personnalisée) : il faudra mettre à jour manuellement la page maitre
personnalisée pour chaque mise à jour Microsoft…

Quelques évolutions dans l’expérience utilisateur depuis 2013 :

Prise de notes

2Stéphane LEENHARDT - SupMicro tous droits 2019 Cliquez ici pour taper du texte.
155
5 Personnalisation de site et de pages

Depuis 2013 plusieurs changements dans l’interface standard ont été réalisés et d’autres viendront dans
le futur.

Méthodes de déploiement pour apporter les personnalisations dans Office 365


La plateforme étant distante et sous contrôle de Microsoft les méthodes de déploiement vers Office 365
sont donc limitées par rapport à un SharePoint sur site.

Selon le choix et la personnalisation que l’on retient la méthode de déploiement change :

• Thème Office 365 : tout se fait via le navigateur.

• Thème, CSS, JavaScript : on peut ajouter via un navigateur ou par programmation.

• Page Maitre : on peut la personnaliser avec SharePoint Designer ou par programmation.

Selon la méthode de déploiement on peut ?

• Avec le Navigateur on peut :


Modifier la marque du tenant, modifier le logo, l’apparence en appliquant des thèmes, la navigation et les
affichages et concevoir des pages riches en contenu.

• Avec des outils appropriés on peut :

Avec Office 2013 et supérieur on peut avec Excel, Visio et surtout Access crée des contenus SharePoint
riches et dynamiques et avec Access on peut même créer une application SharePoint.

Avec SharePoint Designer on peut modifier les contenus des pages SharePoint et tester la conception plus
rapidement qu’en le faisant en ligne. Il permet également la conception de Workflow.

Prise de notes

156 Stéphane LEENHARDT - SupMicro tous droits 2019 3


5 Personnalisation de site et de pages
Avec InfoPath : Même si l’outil est amené à disparaitre (2028 ?) il permet à ce jour de concevoir des
formulaires pour les listes, pour le panneau d’information du document (Office 2010, 2013) et les
formulaires de Workflow SharePoint. (Mais à terme c’est Flow et PowerApp qui remplacent ces
technologies)

• Utiliser des services distants pour réaliser un approvisionnement distant

On peut utiliser le CSOM pour injecter dans SharePoint de nouveaux éléments à distance.
Cela peut se faire avec différentes technologies (.NET, PowerShell, JavaScript, etc…)

• Développer des compléments ou acquérir des compléments


Les compléments peuvent apporter des nouveaux bêlements dans SharePoint que l’on peut développer
ou acquérir :
Les compléments SharePoint, les compléments du fournisseur (qui utiliseront en réalité l’approvisionnent
distant) et ceux que l’on trouve sur le SharePoint Store.

Synthèse des personnalisations possible dans Office 365

Prise de notes

4Stéphane LEENHARDT - SupMicro tous droits 2019 Cliquez ici pour taper du texte.
157
5 Personnalisation de site et de pages

• S applique au • Permet de • Permet de substituer • Permet de modifier


tenant à tous les contrôler les tous les styles O365 le comportement • Permet un contrôle
services O365 couleurs, les • Contrôle sur les et les styles total sur les éléments
• Paramètres limités polices Couleurs, Polices, • Ajout dynamique • A appliquer sur
à ce jour • A appliquer pour positions et les effets sur les éléments chaque site sauf pour
• Peut être substitué chaque site • Permet une existants publication
aux niveaux expérience • Permet d étendre • Les mises a jour O365
inférieurs responsive l existant ne sont pas impactées

• Framework client JavaScript fourni par Microsoft :


composants robustes, responsive et homogenes
• Icones, Polices, Couleurs et composants visuels
(entrée, navigation, notification)
Bonne pour charte Graphique.
Couleur, Polices, Fond Très Bonne pour le
Fléxibilité Peu flexible Moyenne pour la disposition des Le plus flexible possible
uniquement éléments comportement
Faible, SharePoint Demande des tests Demandes des tests Attention aux fonctionnalités
Couts Quelques images à créer
Palette Color (responsive, navigateurs, mobile) (selon la version JavaScript) activées : PlaceHolder
Paramétrage Programmation
Technologies XML Langage CSS à maitriser ASP.NET
uniquement JavaScript
Moyen : plus fastidieux que Moyen: on peut implementer Déclaratif ASP.NET
Difficulté aucune Faible
difficile sa propre logique uniquement
Mise à jour OK
Certains CSS peuvent Certains éléments
Aucune adaptation
OK
O365 changer peuvent changer

II.Personnalisation au niveau de toute l’entreprise

 Ou commencer dans l’application Administrateur :

On peut affecter un logo et une image d’arrière-plan qui apparaitra dans la barre de navigation supérieure
de l’organisation :

Prise de notes

158 Stéphane LEENHARDT - SupMicro tous droits 2019 5


5 Personnalisation de site et de pages

Logo : il faut qu’il soit JPG, PNG ou GIF avec une résolution de 200 x 30 pixels, ne pas dépasser 10 Ko.
On peut définir une URL si on clique sur le logo (exemple : le site internet)
Image d’arrière-plan : cette image apparaitra en arrière-plan dans la barre supérieure. Il faut qu’il soit
fichier JPG, PNG ou GIF avec une résolution de 1 366 x 50 pixels et une taille inférieure à 15 Ko.
Empêcher les utilisateurs de remplacer le thème : cochez cette case pour désactiver les thèmes au
niveau de l’utilisateur afin que tous les membres de l’organisation voient le thème que vous créez.
L’exception à cette règle est un thème à contraste élevé utilisé à des fins d’accessibilité.
Couleur d’accentuation : sélectionnez une couleur à utiliser pour l’icône du lanceur d’applications, puis
placez le pointeur sur la couleur et sur d’autres couleurs d’accentuation.
Couleur d’arrière-plan de la barre de navigation : sélectionnez une couleur à utiliser pour l’arrière-plan
de la barre de navigation.
Texte et icônes : sélectionnez une couleur à utiliser pour le texte et les icônes dans la barre de
navigation supérieure.
Icône du lanceur d’applications : sélectionnez une couleur à utiliser pour l’icône du lanceur
d’applications dans la partie supérieure gauche.
Nom d’utilisateur: choisir d’afficher les noms complets et les photos des utilisateurs sur la barre de
navigation supérieure de la barre lorsque qu’ils sont connectés. Par défaut, les utilisateurs verront leur
photo.

On peut également personnaliser l’écran de login Microsoft mais pour cela il faut aller dans Azure
AD puis dans Azure Active Directory :

Et choisir le menu : Marque de société ce qui permet de configurer une image de fond et des logos pour
les différents écrans de connexion :

Prise de notes

6Stéphane LEENHARDT - SupMicro tous droits 2019 Cliquez ici pour taper du texte.
159
5 Personnalisation de site et de pages

Attention à bien respecter les formats sinon le chargement de votre image sera refusé.

Conclusion

On peut personnaliser au niveau du tenant la barre de navigation (Suite Bar en anglais) le « App
Launcher » et les écrans de connexions au niveau de toute l’entreprise de façon très simple : il suffit
d’avoir les images.

Prise de notes

160 Stéphane LEENHARDT - SupMicro tous droits 2019 7


5.1 Personnalisation de l'expérience "Moderne"

Personnalisation de l’expérience « Moderne »


I.Conception de Thème pour l’expérience moderne
La conception de thème pour l’expérience moderne se différencie nettement de celle pour l’expérience
classique.

Note : On peut encore utiliser des thèmes classiques sur une expérience moderne mais toutes les
personnalisations classiques ne seront pas disponibles dans l’expérience moderne.
(il y a donc un risque d’incohérence et il faut tester un thème classique sur un site moderne pour voir s’il
convient)

Fonctionnement pour l’administrateur d’un site

Le propriétaire d’un site peut changer le thème et dispose de paramètres pour appliquer une apparence
sur un site :
Dans le menu de paramètres du site, on trouve le menu :
Modifier l’apparence.

Ce menu permet de modifier l’affichage de l’en-tête du site et de


choisir un thème :

Nouveau menu en mars 2019.

Changer le thème du site


Par défaut on dispose de plusieurs thèmes prédéfinis que l’on peut appliquer :

Bleu, Orange, Rouge, Violet, Vert, Gris, Jaune foncé (thème inversé),
Bleu foncé (thème inversé).
Thème inversé : signifie que le fond de la page passe en noir au lieu
d’être blanc.

La couleur de le 1ere ligne correspond au thème principal que l’on


affichera.
La couleur de la 2e ligne correspond à la couleur du fond de la page.

Stéphane LEENHARDT - SupMicro tous droits 2019 161


5.1 Personnalisation de l'expérience "Moderne"
Le thème change les couleurs et permet au site SharePoint d’avoir une apparence en accord avec la
charte de l’organisation :
On ne change pas la mise en page ou l’expérience mais uniquement l’apparence.

Par défaut on voit 4 couleurs différentes pour chaque thème : A partir de la couleur principale, les autres
couleurs sont des variations.

Changer l’entête du site


L’entête du site correspond à la zone située juste en dessous de la barre de suite Office 365.

On peut changer la disposition de l’en-tête :


Standard : fait apparaitre le titre et la visibilité du groupe associé :

Compact : réduit l’en-tête, affiche le logo et le titre :

On peut définir l’arrière-plan de l’en-tête :


Qui peut prendre différentes couleurs de fond en fonction du choix.

Scénario d’entreprise :
On peut définir une couleur en fonction des métiers de l’entreprise et afficher par exemple les en-têtes de
tous les sites du service comptabilité avec une couleur homogène et une autre couleur pour le Marketing,
Commercial, DSI, etc…

Concevoir et Comprendre le fonctionnement d’un thème


Concevoir un thème est une démarche très simple à partir du moment ou l’on a bien identifié a quoi
correspond les couleurs que l’on peut personnaliser.

Un thème se conçoit en format JSON et chaque zone porte un nom et un code couleur en RGB.

Propriété du fichier JSON de thème

name : nom du thème affiché aux propriétaires de site et a utiliser en PowerShell ou REST.
isInverted : Cette valeur doit être False pour les thèmes clairs et True pour les thèmes foncés. Elle
détermine l’utilisation par SharePoint des couleurs de thème foncées ou claires pour le rendu du texte sur
les arrière-plans colorés.

162 Stéphane LEENHARDT - SupMicro tous droits 2019


5.1 Personnalisation de l'expérience "Moderne"
backgroundImageUri : on peut indiquer l’url d’une image de fond, mais attention à ce que cette image
soit disponible pour tous les utilisateurs qui seront autorisés a se connecter au site.

On voit que le thème possède 2 manières de fonctionner : il peut être clair ou foncé et en fonction de ce
choix les couleurs appliquées ne seront pas les mêmes.

Cela explique les différentes propriétés disponibles (clair et foncé) pour définir les couleurs :
Dominant : on voit l’impact de façon majeure, la couleur est visible et conditionne l’apparence
Perceptible : pour certaines zones le couleur est visible et s’applique à une zone définie par défaut
Subtil : pour certains composants spécifiques la couleur peut être visible et pour d’autres elle n’a pas
d’impact.

Propriété Impact Couleur Cibles


Recommandée
themePrimary Dominant Foncé 1ere couleur dans l’écran de choix d’un thème :
boutons, fond de case a cocher, bordure d’icone,
survol de lien et fond de certaines sections
themeLighterAlt Dominant Clair Fond de certaines sections
themeLighter Perceptible Clair
themeLight Subtil Clair
themeTertiary Subtil Au choix
themeSecondary Subtil Clair
themeDarkAlt Dominant Foncé Plusieurs fonds, bordure d’icone
themeDark Subtil Foncé
themeDarker Subtil Foncé
neutralLighterAlt Perceptible Clair
neutralLighter Dominant Clair Plusieurs fonds, bordure d’icone
neutralLight Dominant Clair Plusieurs fonds, bordure d’icone
neutralQuaternaryAlt Subtil Clair
neutralQuaternary Subtil Clair
neutralTertiaryAlt Subtil Foncé
neutralTertiary Perceptible Foncé
neutralSecondary Dominant Foncé Plusieurs fonds, bordure d’icone
neutralPrimaryAlt Perceptible Foncé
neutralPrimary Dominant Foncé Plusieurs fonds, bordure d’icone
neutralDark Subtil Foncé
black Subtil Foncé
white Dominant Clair Plusieurs fonds, bordure d’icone
primaryBackground Dominant Clair Plusieurs fonds, bordure d’icone
primaryText Subtil Foncé
accent Subtil Foncé Non disponible dans le générateur de thème il
faut l’ajouter manuellement.
Cette couleur correspond a la 4e couleur que
l’utilisateur voit dans l’écran de choix de thème
whiteTranslucent40 Subtil Clair,
transparence
backgroundOverlay Dominant Au choix

Stéphane LEENHARDT - SupMicro tous droits 2019 163


5.1 Personnalisation de l'expérience "Moderne"
error Perceptible Foncé Non disponible dans le générateur de thème il
faut l’ajouter manuellement

Conseil : pour s’approprier les impacts, il faut faire un thème de test avec des couleurs différentes pour
mesurer l’impact des propriétés.

Pour vous aider a générer un fichier theme, Microsoft met votre disposition le générateur de thème
SharePoint :
https://developer.microsoft.com/en-us/fabric#/styles/themegenerator

Exemple de format JSON :


{ name: 'KoolVoyage Marketing', isInverted: true, backgroundImageUri: '',
theme: {
themePrimary: "#00bcf2",themeLighterAlt: "#00090c",themeLighter: "#001318",
themeLight: "#002630",themeTertiary: "#005066",themeSecondary: "#00abda",
themeDarkAlt: "#0ecbff",themeDark: "#44d6ff", themeDarker: "#6cdfff",
neutralLighterAlt:"#2e3340",neutralLighter:"#353a49",neutralLight: "#404759",
neutralQuaternaryAlt: "#474e62",neutralQuaternary: "#4c546a",
neutralTertiaryAlt: "#646e8a",neutralTertiary: "#c8c8c8",
neutralSecondaryAlt: "#d0d0d0",neutralSecondary: "#dadada",
neutralPrimaryAlt: "#eaeaea",neutralPrimary:"#ffffff",neutralDark: "#f4f4f4",
black: "#f8f8f8",white: "#262a35",primaryBackground: "#262a35",
primaryText: "#ffffff",
bodyBackground: "#ffffff";bodyText: "#333333";disabledBackground: "#f4f4f4";
disabledText: "#c8c8c8";error: "#ff5f5f";accent: "#ffb900";
}
}

1ere couleur : Couleur principale themePrimary


2e couleur : themeSecondary
3e couleur : themeTertiary
4e couleur : accent

Déploiement de thème

Pour ajouter un thème on peut déployer le nouveau thème au niveau global sur le tenant dans son
ensemble ou uniquement pour certains sites.

Microsoft fournit les commandes PowerShell pour déployer au niveau global, en revanche pour déployer
sur certaines collections de sites uniquement il faut utiliser des modules de SharePoint PnP.

• Déploiement global
➢ Utiliser le générateur SharePoint pour créer un jeu de couleur, puis allez sur le page Microsoft qui
donne un exemple de fichier PowerShell

https://docs.microsoft.com/en-us/powershell/module/sharepoint-online/add-
spotheme?view=sharepoint-ps

164 Stéphane LEENHARDT - SupMicro tous droits 2019


5.1 Personnalisation de l'expérience "Moderne"
➢ Copiez votre personnalisation a la place du modèle fournit par Microsoft et exécuter ensuite la
commande suivante :

Add-SPOTheme -Identity "Custom Cyan" -Palette $themepalette -IsInverted $false -


Overwrite

• Déploiement sur une collection de sites en particulier

$webUrl = "https://mytenant.sharepoint.com/sites/sitename"
$themeName = "Mon Theme"
$headerLayout = "Compact" # Standard or Compact
$headerEmphasis = "Strong" # None, Neutral, Soft or Strong
Connect-PnPOnline $webUrl #-UserWebLogin # laissez UserWebLogin si MFA
Set-PnPWebTheme -Theme $themeName
$web = Get-PnPWeb
$web.HeaderLayout = $headerLayout
$web.HeaderEmphasis = $headerEmphasis
$web.Update()
Invoke-PnPQuery

Conclusion

On peut charter l’apparence des sites modernes et décider de la portée de disponibilité d’un thème : soit
au niveau global soit pour certaines collections de sites.

Stéphane LEENHARDT - SupMicro tous droits 2019 165


5.1 Personnalisation de l'expérience "Moderne"

II.Personnalisation de site moderne avec la conception de site


Objectifs

• A quoi cela sert ?


• Les limites
• Possibilités de mise en œuvre
• Comment faire ?
• Les méthodes de déploiement dans le tenant.

Introduction : à quoi ça sert ?

Lorsqu’un utilisateur crée un nouveau site ou même sur des sites existant il est important de pouvoir
assurer une cohérence entre les différents sites du tenant.

Par exemple, on peut souhaiter que tous les sites disposent d’un même logo, thème, de composants de
départ, d’une navigation cohérente et même déclencher des flux.
La conception de script introduit en quelque sorte la notion de modèle pour les sites que les utilisateurs
vont créer.

⚠ Ce mécanisme de personnalisation ne fonctionne que pour des sites modernes et


peut s’appliquer aussi bien à la création de nouveaux site ou en rétroactif sur des
sites modernes existants.

Fonctionnement des conceptions de site

Lorsqu’un utilisateur crée un site moderne il utilise des conceptions de script standards qui sont fournis
par Microsoft :
Si on crée un site de communication on dispose Si on crée un site d’équipe moderne, on exécutera
des scripts : un script par défaut nomme Site d’équipe.
Sujet, Présentation et Vierge (sont des conception
de script).

166 Stéphane LEENHARDT - SupMicro tous droits 2019


5.1 Personnalisation de l'expérience "Moderne"
Introduction aux Conception de Script

Le terme Conception de Script a été choisi pour indiquer que la nouvelle méthode pour créer des modèles
de site dans SharePoint se fait désormais avec une forme de programmation de script….

Ce n’est pas tout à fait exact, puisqu’il s’agit d’une définition JSON et non de script a proprement parlé.
Néanmoins par rapport aux méthodes précédentes qui permettaient de créer un modèle de site
directement dans l’interface SharePoint, il faut un effort supplémentaire pour avoir l’équivalent de ce que
l’on faisait avant.

1) L’objectif d’une conception de script

Apporter des modèles de sites que les utilisateur pourront choisir pour créer un nouveau
site.

Le modèle doit apporter toute la configuration que l’on souhaite de façon à harmoniser l’interface,
structurer les composants de départs que l’on souhaite.

Cette nouvelle façon de créer des modèles de Sites concernent uniquement l’expérience moderne et
implique un gouvernance sur les types de sites que l’on souhaitera dans l’entreprise.

La question que l’on peut se poser en termes de gouvernance sur les espaces qui seront ajoutés par les
utilisateurs :

Comment organiser les espaces de travails collaboratifs de façon à les harmoniser avec les critères de
l’entreprise, alors que l’on autorise les utilisateurs finaux à créer directement les espaces de
collaboratifs ?

• Modèle de site pour un projet :


Comment est structuré un projet ? Quels sont les critères de classement des documents dans un projet ?

• Modèle de site pour un service :


Si on pense la collaboration au sein d’un service de l’entreprise on peut factoriser les activités au sein d’un
service de façon indépendante de l’activité.
C’est-à-dire penser l’activité dans un service en termes de collaboration et non de fonction métier.

Par exemple, tous les services ont une équipe, un planning propre, des réunions de service, des
formations, etc… Cela concerne les activités d’un service en particulier mais tous les services ont ces
mêmes activité : on peut donc créer un modèle de site qui sera identique pour tous les services de
l’entreprise !

• Modèle de site pour la communication :


Ce modèle est plus compliqué à identifier car il faut un besoin de communiquer de façon unifié.

Par exemple pour le lancement d’un nouveau produit, on peut imaginer un modèle de site qui permettra
pour chaque produit de communiquer avec des informations tels que :

Stéphane LEENHARDT - SupMicro tous droits 2019 167


5.1 Personnalisation de l'expérience "Moderne"
 Avoir un planning du lancement du produit.
 Avoir une ficher détaillée du produit.
 Avoir un forum de discussion autour du produit.

Différencier le script de la conception de script

Le script de site est un fichier au format JSON qui indique toutes les actions à appliquer sur
un site, mais n’est pas relié à un site en particulier. C’est la conception de site qui va
associer le script de site à un modèle de site, à des groupes de sécurité et plus
généralement rendre disponible le script.

Add-SPOSiteScript -Title "Contoso theme and list"

Fichier.JSON

Https://tenant-admin.sharepoint.com
Add-SPOSiteDesign -Title "KoolVoyage customer tracking" ` Add-SPOSiteDesign -Title "KoolVoyage Produit" `
-WebTemplate "64" -WebTemplate "68"
-SiteScripts "2756067f-d818-4933-a514-2a2b2c50fb06" ` -SiteScripts "2756067f-d818-4933-a514-2a2b2c50fb06" `
-Description "Creates customer list and applies standard -Description "Creates customer list and applies standard theme"
theme"

Site equipe 1 Site communication 2 Site communication 1

Conclusion

Les conceptions de site permettent d’harmoniser la structure des sites qui seront crées par les utilisateurs
et d’appliquer des chartes d’entreprise sur les sites.

Que peut on définir dans une conception de site actuellement :

• Création d’une nouvelle liste ou bibliothèque (ou modification de celle par défaut créée avec le
site)
• Création de colonnes de site, de types de contenu et configuration d’autres paramètres de la liste
• Définir les propriétés de personnalisation du site, telles que la disposition de navigation, d’en-tête
et d’arrière-plan
• Application d’un thème
• Définition d’un logo de site
• Ajout de liens à la fonctionnalité de lancement rapide ou de navigation Hub
• Déclenchement d’un flux Microsoft Flow
• Installation d’une solution déployée à partir du catalogue d’applications (SPFx)

168 Stéphane LEENHARDT - SupMicro tous droits 2019


5.1 Personnalisation de l'expérience "Moderne"
• Définition des paramètres régionaux du site
• Ajout de noms principaux (utilisateurs et groupes) aux rôles SharePoint
• Définition de fonctionnalité de partage externe du site

Les modèles personnalisable

• On peut modifier les modèles par défaut proposés par Microsoft :


Dans ce cas on peut pousser une même configuration sur tous les sites SharePoint.

• Ou proposer des modèles spécifiques que l’utilisateur pourra choisir.


On peut également décider des utilisateurs qui seront autorisés à utiliser une conception de script.

Lorsqu’on cible une conception de site on le fait pour un modèle de site de départ ou pour le site que l’on
souhaite mais dans ce cas il faut appliquer manuellement la conception après la création du site.

Pour automatiser sur un site d’équipe ou de communication les valeurs du WebTemplate doivent être :

Valeur de WebTemplate
64 Site d’équipe pour les utilisateurs autorisé a crée des groupes Office 365
68 Site de communication
1 Site d’équipe pour les utilisateurs qui ne sont pas autorisés à créer des
groupes Office 365
Autre valeur Il faut appliquer manuellement la conception à partir du menu paramètres,
menu : Conception de Script :

2) Limitations sur les conceptions de script

Le nombre de script et de conception de script est limitée sur un tenant à :


100 script (.json) et 100 conception de script.

⚠ On distingue 2 types de conceptions de script en fonction du nombre d’opérations


que vous allez réaliser :

• Une conception standard comporte moins de 30 verbes/actions et pas plus de 20 000 caractères.

Stéphane LEENHARDT - SupMicro tous droits 2019 169


5.1 Personnalisation de l'expérience "Moderne"
• Si on dépasse cette valeur on passe dans le cadre d’un conception de script Volumineuse :

La conception volumineuse est limitée à 300 action ou 100 000 caractères.

Le déploiement d’une conception volumineuse nécessite une commande PowerShell différente (Add-
SPOSiteDesignTask) qui va planifier une tache d’exécution qui sera toujours asynchrone lors de
l’application de la conception.

• Certains artefacts SharePoint ne sont pas encore disponibles dans les conceptions de script.

Colonne prises en charge :


Actuellement on ne peut créer que des colonnes de type : Texte, Note, Nombre, Personne, Choix, Date.

• On ne peut pas ajouter de mise en page, de WebPart,etc….

Pour ajouter des éléments de ce type il faut une autre méthode qui utilise PnP par exemple.

⚠ Une conception de script n’est pas un modèle de site : si on veut changer les sites qui
sont créés, il faut réappliquer la conception de site sur tous les sites !

III. Mise en œuvre des conceptions de script


La démarche de conception est la suivante :

1. On crée un fichier au format JSON en s’aidant du schéma ou par rétro-ingénierie


2. On injecte sur le Tenant le script et on crée la conception de site
3. On teste le fonctionnement

1) Format de définition de script

Le Schémas du fichier évolue en permanence et l’on peut suivre les dernières versions ajoutées à partir du
github où se trouve le projet :

https://github.com/SharePoint/sp-dev-site-scripts

Pour référencer la dernière version du Schéma fournit par Microsoft :

https://developer.microsoft.com/json-schemas/sp/site-design-script-actions.schema.json

Le format d’un script est le suivant :


{
"$schema": "https://developer.microsoft.com/json-schemas/sp/site-design-script-
actions.schema.json",
"actions": [],
"bindata": { },
"version": 1
}

170 Stéphane LEENHARDT - SupMicro tous droits 2019


5.1 Personnalisation de l'expérience "Moderne"

Outils pour la conception de scripts

Sois-vous éditez manuellement le fichier par vous-même et dans ce cas vous pouvez vérifier que vous êtes
conforme par rapport au schéma en allant sur un site de validation :

https://www.jsonschemavalidator.net/

Vous pouvez également vous faire aider par deux sites qui génère automatiquement le script en fonction
de ce que vous souhaitez réaliser sur un site :

Le site : sitedesigner.io
https://www.sitedesigner.io

Ce site permet de générer automatiquement le script et propose toutes les actions les plus courantes.

➢ Outil pratique pour aller vite, mais attention il peut manquer des nouvelles actions que Microsoft
aurait ajoutée.

Le projet Site Design Studio

https://github.com/SharePoint/sp-dev-solutions/tree/master/solutions/SiteDesignsStudio

Il s’agit d’un WebPart qui va permettre aux utilisateurs de créer directement dans SharePoint le script
avec les actions que l’on souhaite sans connaitre le format JSON.

Stéphane LEENHARDT - SupMicro tous droits 2019 171


5.1 Personnalisation de l'expérience "Moderne"
➢ Outil qu’il faut installer dans le tenant, mais qui permet de déployer une conception de site et le
script associé sans avoir à réaliser une commande PowerShell.

Note : Microsoft a annoncé à l’Ignite 2018 qu’il développerait un éditeur de script….


2) Rétro-ingénierie
Export de Liste :
On peut également crée dans l’interface SharePoint une liste et l’exporter en script avec une commande
PowerShell :

$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$listUrl = "https://mytenant.sharepoint.com/sites/sitename/lists/listname"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
Get-SPOSiteScriptFromList -ListUrl $listUrl

⚠ Attention au format généré il ne faut pas de ligne vide, si c’est le cas reformatez le
fichier json :
"formatterJSON": "{\n \"schema\": \"https://developer.microsoft.com/json-
schemas/sp/view-formatting.schema.json\",\n \"additionalRowClass\": \"=if([$Impact]
== 'Low', 'sp-field-severity--good', if([$Impact] == 'Normal','sp-field-severity--
warning', if([$Impact] == 'High','sp-field-severity--severeWarning', if([$Impact] ==
'Critical','sp-field-severity--blocked', ''))))\"\n}"

 Tout le format doit être sur une même ligne sans retour de ligne :

"formatterJSON": { "schema": "https://developer.microsoft.com/json-schemas/sp/view-


formatting.schema.json", "additionalRowClass": "=if([$Impact] == 'Low', 'sp-field-
severity--good', if([$Impact] == 'Normal','sp-field-severity--warning', if([$Impact]
== 'High','sp-field-severity--severeWarning', if([$Impact] == 'Critical','sp-field-
severity--blocked', ''))))" }

Export de Site complet :

$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$siteUrl = "https://mytenant.sharepoint.com/sites/sitename"
$relativeListUrls = "/lists/listname", "/lists/listname-2", "/lists/listname-3"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred

Get-SPOSiteScriptFromWeb –WebUrl $siteUrl -IncludeTheming -IncludeBranding -


IncludeSiteExternalSharingCapability –IncludeRegionalSettings –IncludeLists
$relativeListUrls

Cette commande est récente (mai 2019, et encore en prévisualisation) et n’exporte pas les mises en page
et les configurations des WebPart. (Cette fonctionnalité sera développée plus tard par Microsoft).

3) Déploiement de Script et conception de sites

La gestion des script et des conceptions de site se réalisent au moyen de commandes PowerShell.

 Pour afficher la liste des script et conception de sites :

172 Stéphane LEENHARDT - SupMicro tous droits 2019


5.1 Personnalisation de l'expérience "Moderne"
$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
Get-SPOSiteDesign
Get-SPOSiteScript

 Ajouter un nouveau script et une conception de script :


$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$siteScriptFile = $PSScriptRoot + "\CustomTeamSiteScript.json"
$webTemplate = "64" #64 = Team Site, 68 = Communication Site, 1 = Groupless Team Site
$siteScriptTitle = "Custom Team Site Script"
$siteDesignTitle = "Custom Team Site Design"
$siteDesignDescription = "Custom team site design with multi-colored theme, external
sharing disabled and some cool stuff via Flow."
$previewImageUrl = "/SiteDesignPreviewImages/custom-team-site-design-preview-
image.png" # if left empty, the default preview image will be used.
$designPackageId = "6142d2a0-63a5-4ba0-aede-d9fefca2c767" # The default site design to
use as a base when creating a communication site, more info later.

$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred

$siteScript = (Get-Content $siteScriptFile -Raw | Add-SPOSiteScript -Title


$siteScriptTitle) | Select -First 1 Id

Add-SPOSiteDesign -SiteScripts $siteScript.Id -Title $siteDesignTitle -WebTemplate


$webTemplate -Description $siteDesignDescription -PreviewImageUrl $previewImageUrl -
DesignPackageId $designPackageId

 Modifier une conception de site existante :


$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$siteScriptFile = $PSScriptRoot + "\CommonSiteScript.json"
$siteScriptTitle = "Common Site Script"
$siteDesignId = "eb13d8b6-c835-4b07-80fd-d01bd10de666"
$existingSiteScripts = "4970ebaf-a3c0-461c-9516-0c8bf961b138"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
$newSiteScript = (Get-Content $siteScriptFile -Raw | Add-SPOSiteScript -Title
$siteScriptTitle) | Select -First 1 Id
Set-SPOSiteDesign -Identity $siteDesignId -SiteScripts $existingSiteScripts,
$newSiteScript.Id

 Modifier un script de site :


$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$siteScriptId = "d59210a8-334b-41f1-9562-236562cc9855"
$siteScriptFile = $PSScriptRoot + "\CommonSiteScript.json"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
Set-SPOSiteScript -Identity $siteScriptId -Content (Get-Content $siteScriptFile -Raw)

 Supprimer un script et une conception de script


$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$siteDesignId = "eb13d8b6-c835-4b07-80fd-d01bd10de666"
$siteScriptId = "4970ebaf-a3c0-461c-9516-0c8bf961b138"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
Remove-SPOSiteDesign -Identity $siteDesignId
Remove-SPOSiteScript -Identity $siteScriptId

Stéphane LEENHARDT - SupMicro tous droits 2019 173


5.1 Personnalisation de l'expérience "Moderne"

 Limiter la conception de site à certains groupes ou utilisateurs :


$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$siteDesignId = "eb13d8b6-c835-4b07-80fd-d01bd10de666"
$principals = "Security Group Name", "user@mytenant.onmicrosoft.com"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
Grant-SPOSiteDesignRights -Identity $siteDesignId -Principals $principals -Rights View
Get-SPOSiteDesignRights -Identity $siteDesignId

 Pour supprimer des autorisations :


$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$siteDesignId = "eb13d8b6-c835-4b07-80fd-d01bd10de666"
$principals = "user@mytenant.onmicrosoft.com"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
Revoke-SPOSiteDesignRights -Identity $siteDesignId -Principals $principals
Get-SPOSiteDesignRights -Identity $siteDesignId

 Pour afficher les autorisations :


Get-SPOSiteDesignRights 607aed52-6d61-490a-b692-c0f58a6981a1

Résultat :

Appliquer un script aux site standards SharePoint

Si on applique une conception de site a un site par défaut, on ne le trouvera plus dans la liste des
conception de site, mais il sera automatiquement appliqué lors de la création du site :

C:\> Add-SPOSiteDesign `
-Title "Contoso company theme" `
-WebTemplate "68" `
-SiteScripts "89516c6d-9f4d-4a57-ae79-36b0c95a817b" `
-Description "Applies standard company theme to site" `
-IsDefault

Quelles conceptions de site par défaut seront mises à jour ?


Dans l’exemple précédent, la valeur "68" indiquée à côté de WebTemplate fait référence au modèle de
site de communication SharePoint Online.
Ce modèle contient les conceptions de site par défaut suivantes :
• Rubrique
• Présentation
• Vide
Quand vous appliquez une nouvelle conception de site, elle met à jour les trois conceptions de site par
défaut en même temps.

 Restaurer la conception de site par défaut :

174 Stéphane LEENHARDT - SupMicro tous droits 2019


5.1 Personnalisation de l'expérience "Moderne"
C:\> Remove-SPOSiteDesign db752673-18fd-44db-865a-aa3e0b28698e

Appliquer une conception de script à un Concentrateur (Hub)

Lors de la création initiale d’une conception de site, celle-ci est accessible à tous !
Vous pouvez accorder des autorisations en affichage sur la conception de site.
Une fois les autorisations attribuées, seuls les utilisateurs ou les groupes (principaux) indiqués y ont accès.

Il est recommandé d’accorder l’accès au même groupes/utilisateurs qui sont utilisés pour l’étendue du
site hub : pour avoir une cohérence dans l’utilisation.

Grant-SPOSiteDesignRights -Identity <ID> -Principals ("HR@contoso.sharepoint.com")


-Rights View

 Pour définir une conception de script sur un Hub

Set-SPOHubSite https://contoso.sharepoint.com/sites/Marketing
-Title "Marketing Hub"
-LogoUrl https://contoso.sharepoint.com/sites/Marketing/SiteAssets/hublogo.png
-Description "Hub for the Marketing division”
-SiteDesignId "<ID>”

 Définir sans logo ni description :

$hubSiteUrl = "https://mytenant.sharepoint.com/sites/hub"
$siteDesignId = "8a72217f-8383-4c74-9ff8-7b2c9e43fecb"
$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
Connect-SPOService $adminSiteUrl
Set-SPOHubSite $hubSiteUrl -SiteDesignId $siteDesignId

Définir une conception de script par Programmation

Le CSOM permet d’appliquer une conception de script par programmation ainsi que les appels en mode
REST : ce qui permet par exemple un Flux d’appliquer une conception de script.

 Application depuis C# :
public void ApplySiteDesign(string siteUrl, Guid siteDesignId)
{
try
{
using (var ctx = GetClientContext(GetAdminSiteUrl(siteUrl)))
{
var tenant = new Tenant(ctx);
tenant.ApplySiteDesign(siteUrl, siteDesignId);
ctx.ExecuteQuery();
}
}
catch (Exception e)
{
Console.WriteLine($"Failed to apply site design: {e.Message}");
}
}

Stéphane LEENHARDT - SupMicro tous droits 2019 175


5.1 Personnalisation de l'expérience "Moderne"

• Ou par un appel dans Flux :

Conclusion

La conception de script permet d’harmoniser les composants des espaces collaboratifs qui seront crées
par les utilisateurs.

Cette fonctionnalité est donc très importante car elle permet d’apporter l’unicité des espaces de travail
dans le cadre d’une gouvernance bien construite sur la manière dont les espaces collaboratifs seront
utilisés.

176 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique

Personnalisation de sites « Classiques »


I.Personnalisation d’un thème

Les thèmes permettent de modifier l’apparence et l’ergonomie d’un site SharePoint.


Le moteur de rendu des thèmes SharePoint 2013 a complètement été réécrit pour prendre en charge les
technologies HTML5.
L’utilisation de PowerPoint pour créer des thèmes n’est plus possible, car les thèmes sont devenus plus
souples et permettent une apparence beaucoup plus étoffée qu’auparavant.

1) Conception de thème pour les sites Classiques


Utiliser les thèmes SharePoint

 Chaque thème peut être paramétré et surtout on peut tester sur le site en cours :
L’écran à gauche du thème permet de modifier
les couleurs et les polices utiliser par le thème.

La zone Déposer une image ici : permet


d’appliquer une image de fond

Stéphane LEENHARDT - SupMicro tous droits 2019 177


5.2 Personnalisation de l'expérience Classique
On peut tester l’affichage du thème et décider de l’appliquer ou non :

Développer des nouveaux thèmes

Pour développer des nouveaux thèmes, il a une séparation dans les gammes de présentation possibles.
SharePoint distingue dorénavant :
Les Polices qui se trouvent dans un fichier séparé et donc réutilisable sur plusieurs thèmes.
Les jeux de couleurs : qui se trouvent dans un fichier avec un format XML mais qui n’est plus comme
auparavant un format OpenXML compatible avec PowerPoint.

Concevoir des Jeux de Couleurs

Une palette de couleurs est la combinaison de couleurs qui sont utilisées dans un site SharePoint. La
palette de couleurs pour un site SharePoint est définie dans un fichier de palette de couleurs. Couleur
« slot » sont également utilisés par le fichier de prévisualisation de la page maître afin de générer des
vignettes et prévisualisation d'un site

Les fichiers .spcolor de palette de couleurs

Les Fichiers de palette de couleurs sont utilisés dans le changement de l'assistant, qui permet aux
utilisateurs de changer le look and feel de leur site à l'aide de l'interface utilisateur de SharePoint thèmes.
Par défaut, 32 fichiers de palette de couleur sont installés avec SharePoint 2013.
L'exemple d'un fichier de palette de couleurs.

Les fichiers .spcolor sont stockés dans la bibliothèque :


http://SiteCollectionName/_catalogs/theme/15/
On les affiche par le lien : Paramètres->[Section] Galeries du
concepteur web->Thèmes

<s:colorPalette isInverted="InvertedSetting" previewSlot1="Slot1" previewSlot2="Slot2"


previewSlot3="Slot3" xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="ColorSlot" value="Color" />

178 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique
<!--additional color slots-->
</s:colorPalette>

Dans un fichier de palette de couleurs, les espaces réservés suivants sont remplacés:

InvertedSetting valeur booléenne. vrai si la palette de couleurs est généralement un texte clair sur
fond sombre. false si la palette de couleurs est généralement du texte foncé sur un
fond clair.
Slot1 est le nom d'annotation de la fente de couleur à utiliser en tant que premier bloc de
la palette icône dans le sélecteur de palette de couleurs de l'expérience theming.
Slot2 est le nom de l'annotation de la fente de couleur à utiliser comme deuxième bloc de
l'icône de la palette dans le sélecteur de palette de couleurs de l'expérience
« thématisation ».
Slot3 est le nom de l'annotation de la fente couleur à utiliser comme le troisième bloc de
l'icône de la palette dans le sélecteur de palette de couleurs de l'expérience
« thématisation ».
ColorSlot est le nom de l'annotation de la fente de couleur que vous définissez (par exemple,
SiteTitle).
Couleur La couleur est la valeur hexadécimale de la couleur à utiliser pour le logement de
couleur spécifiée. C'est peut-être à 6 chiffres (RRGGBB) ou 8 chiffres (AARRGGBB).
Si la valeur hexadécimale est de 8 chiffres, les deux premiers chiffres représentent
le niveau d'opacité (00-FF, qui fait correspondre à 0-255). Si la valeur hexadécimale
est de 6 chiffres, l'opacité par défaut est de 100% ou FF.

Exemple de fichier .spcolor :

<?xml version="1.0" encoding="utf-8"?>


<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay"
previewSlot2="BodyText" previewSlot3="AccentText"
xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText" value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
...
</s:colorPalette>

Les fichiers de jeux de Polices .spfont


Les polices sont définies dans le jeu de polices (. Spfont fichier) et l'aperçu de la page maître (fichier de
prévisualisation.) Pour un site SharePoint donné. Le jeu de polices définit les polices qui sont utilisées dans
quatre domaines: le titre, la navigation, le cap et le corps. Sept jeux de polices sont inclus dans SharePoint.
Vous pouvez créer des schémas de polices supplémentaires. Les fichiers de schéma de police sont situés
dans le sous-dossier 15 de la Galerie thématique du site racine de la collection de sites

Stéphane LEENHARDT - SupMicro tous droits 2019 179


5.2 Personnalisation de l'expérience Classique
(http://SiteCollectionName/_catalogs/theme/15/). Pour accéder à la galerie Thème de l'interface
utilisateur de SharePoint, sur la page Paramètres du site, sous Galeries Web Designer, sélectionnez
Thèmes, puis sélectionnez 15.

Exemple de fichier .spfont :


<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="FontSchemeName" previewSlot1="Slot1" previewSlot2="Slot2"
xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="FontSlotName">
<s:latin typeface="LatinScriptFont" />
<s:ea typeface="EAScriptFont"/>
<s:cs typeface="CSFont" />
<s:font script="Language" typeface="ScriptFont" />
<!--Additional fonts-->
</s:fontSlots>
<!--Additional font slots-->
</s:fontScheme>

FontSchemeName nom du jeu de polices


Slot1 nom de la fente de police que vous souhaitez utiliser comme le premier bloc de
l'icône de la police dans le sélecteur de jeu de polices dans le changement de
l'assistant look.
Slot2 nom de la fente de police que vous souhaitez utiliser comme le deuxième bloc de
l'icône de la police dans le sélecteur de jeu de polices dans le changement de
l'assistant look.
FontSlotName nom de la fente de police que vous définissez (par exemple, titre).
LatinScriptFont police à utiliser pour les écritures latines. Cette police est aussi la source de
secours. Autrement dit, c'est la police qui est utilisée pour une langue qui n'a pas
de script qui est explicitement indiqué dans le jeu de polices.
EAScriptFont police à utiliser pour les scripts Asie de l'Est. L'élément <s:ea> n'est pas
actuellement utilisé par SharePoint. Mais, l'élément <s:ea> est toujours nécessaire
dans le jeu de polices.
CSFont police à utiliser pour les scripts complexes. L'élément <s:cs> n'est pas
actuellement utilisé par SharePoint. Mais, l'élément <s:cs> est toujours nécessaire
dans le jeu de polices.
Language langage de script
ScriptFont police à utiliser pour le langage de script spécifiée.

Exemple de fichier .spfont :


<s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body"
xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Georgia"/>
<s:ea typeface=""/>
<s:cs typeface="Segoe UI Light" />
<s:font script="Arab" typeface="Tahoma" />
<s:font script="Deva" typeface="Mangal" />
<s:font script="Grek" typeface="Segoe UI Light" />
<s:font script="Gujr" typeface="Shruti" />
<s:font script="Yiii" typeface="Microsoft Yi Baiti" />
</s:fontSlot>

180 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique

Police compatible Web

Ensemble de polices qui sont largement utilisés et disponibles sur la plupart des périphériques par défaut.
Pour spécifier une police sécurisée pour le Web dans le jeu de polices, inclure le nom de la police dans
l'attribut caractère de la fente de la police. L'exemple suivant montre une police web sécurisée utilisée
dans un jeu de polices.
<s:fontSlot name="title">
<s:latin typeface="Georgia"/>

</s:fontSlot>

Police Web

Les polices Web sont des polices qui sont disponibles sur l'Internet. Lorsqu'un utilisateur consulte un site
qui utilise des polices Web, le navigateur télécharge les fichiers nécessaires ainsi que le reste de la page.
Pour spécifier une police web, vous devez fournir l'URL de vos fichiers de polices Web dans quatre formats
de police (pour le soutien dans les navigateurs), et une image miniature petits et grands à utiliser pour
rendre les noms de polices dans le sélecteur de jeu de polices.

L'exemple suivant décrit l'information qui est nécessaire pour utiliser une police web dans un élément
<s:latin> :
<s:latin typeface="FontName" eotsrc="EotFile"
woffsrc="WoffFile" ttfsrc="TtfFile"
svgsrc="SvgFile" largeimgsrc="LargeImgFile"
smallimgsrc="SmallImgFile" />

FontName nom de la police navigateur.


EotFile l'URL relatif au fichier intégré de type ouvert de la police.
WoffFile l'URL relative à la police de polices Web Ouvrir le fichier Format.
TtfFile l'URL par rapport au fichier de police TrueType.
SvgFile l'URL par rapport au fichier de police Scalable Vector Graphics
LargeImgFile l'URL relative à la vignette grande que vous souhaitez utiliser dans le sélecteur de
jeu de polices
SmallImgFile l'URL par rapport à la petite vignette que vous souhaitez utiliser dans le sélecteur de
jeu de polices.

Prévisualisation de la page Maitre (.preview)

Les fichiers maîtres aperçus de page sont utilisés pour générer des vignettes et des images d'aperçu
lorsque vous utilisez le changement de l'assistant look. Une page maître doit avoir un fichier de
prévisualisation correspondant à être utilisé dans le changement de l'assistant look. Un fichier d'aperçu
est un fichier spécialement formatée qui a des sections pour la palette de couleurs par défaut, le jeu de
polices par défaut, sous forme de jeton CSS et HTML sous forme de jeton. Il utilise des jetons de chaîne
pour obtenir la valeur des créneaux couleur, noms de polices et les chaînes de l'interface utilisateur
localisée. L'exemple suivant montre fentes couleurs utilisées dans le fichier de prévisualisation de la page
maître.

Stéphane LEENHARDT - SupMicro tous droits 2019 181


5.2 Personnalisation de l'expérience Classique

[ID] #dgp-pageContainer
{
background-color: [T_THEME_COLOR_PAGEBACKGROUND];
color: [T_THEME_COLOR_BODYTEXT];
width: 100%;
height:100%;
background-image: url('[T_IMAGE]');
background-size: cover;
font-family: [T_BODY_FONT];
}

Les fichiers maîtres (page preview. Prévisualiser les fichiers) sont spécialement formatés fichiers qui ont
des sections pour la palette de couleurs par défaut, le jeu de polices par défaut, sous forme de jeton CSS
et HTML sous forme de jeton. Le fichier de prévisualisation de la page maître doit utiliser le même nom
(sans l'extension) que la page maître correspondant. Par exemple, si vous avez une page maître nommée
article.master, le fichier maître correspondant page d'aperçu est nommé article.preview. Les pages
maîtres et des aperçus de page maître sont stockés dans la galerie de pages maîtres.

Utilisation de l’outil SharePoint Palette Color

Cet outil développé par Microsoft certainement pour un usage interne à l’origine est disponible
gratuitement en téléchargement depuis le download center Microsoft.

182 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique
On peut choisir une couleur générale et ensuite
Recolorer utilisera cette couleur comme couleur
de départ pour appliquer différentes variations de
couleurs en partant de la couleur de départ.

⚠ La prévisualisation avec la page oslo ne montre pas les changements de couleurs sur
les titres et les menus : privilégier l’affichage avec seattle.

 On peut également choisir le mode UI Preview qui affiche une visualisation unitaire des contrôles :

On peut changer l’affichage des annotations par des groupes de contrôles ou de types :

Enfin l’enregistrement donne un fichier .spcolor qu’il faudra ensuite télécharger dans la bibliothèque des
thèmes dans SharePoint Online.

Définir une présentation composée

Une présentation composée regroupe un fichier de couleur, de police, une page maitre et des images.

Si la page maitre que vous ajoutez utilise des fichiers CSS la regle est de placer les fichiers CSS dans les
dossiers suivants :

/Style Library/Themable/ ou dans /Style Library/{culture}/Themable/

Si ces emplacements n’existent pas on les ajoute manuellement et SharePoint les reconnaitra comme
étant des dossiers de CSS.

Stéphane LEENHARDT - SupMicro tous droits 2019 183


5.2 Personnalisation de l'expérience Classique
Eléments d’une présentation composée
Elément Fichiers Emplacement Obligatoire ?
Color palette .spcolor Theme Gallery\15 folder Yes
Font scheme .spfont Theme Gallery\15 folder No
Site layout .master Master Page Gallery Yes

.preview
Background image .jpg , .bmp ,.png ,.gif Site assets No

Ajout de thème par CSOM


Cet exemple de code utilise OfficeDevPnP.Core qui propose des méthodes toutes prêtes :

string themeRoot = Path.Combine(AppRootPath, String.Format(@"Themes\{0}", themeName));


string spColorFile = Path.Combine(themeRoot, string.Format("{0}.spcolor", themeName));
string spFontFile = Path.Combine(themeRoot, string.Format("{0}.spfont", themeName));
string backgroundFile = Path.Combine(themeRoot, string.Format("{0}bg.jpg", themeName));
string logoFile = Path.Combine(themeRoot, string.Format("{0}logo.png", themeName));

if (IsThisASubSite(cc.Url))
{
// Retrieve the context of the root site of the site collection.
using (ClientContext ccParent = new ClientContext(GetRootSite(cc.Url)))
{
ccParent.Credentials = cc.Credentials;
cc.Web.DeployThemeToSubWeb(ccParent.Web, themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToSubWeb(ccParent.Web, themeName);
}
}
else
{
cc.Web.DeployThemeToWeb(themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToWeb(themeName);
}

II.Personnalisation CSS et JavaScript

Bien souvent la personnalisation des couleurs ne suffit pas et il faut dans ce cas pouvoir personnaliser de
façon beaucoup plus fine les composants.

Scenarios de personnalisation

• Changer l’apparence de la barre de menu supérieur


• Changer l’apparence des titres et bordure des composants WebPart
• Supprimer le lien « Editer les liens »

Lorsque vous créez une nouvelle collection de sites ou un nouveau site avec expérience moderne,
SharePoint stocke la page maitre et les fichiers de styles dans la librairie Page Maitre:

_catalogs/masterpage

Les fichiers CSS sont référencés dans la page maitre SharePoint il convient donc de savoir quelle est la
page maitre utilisée :

 Par défaut les sites d’équipe utilisent seattle.master qui est la page maitre standard d’un site d’équipe.

184 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique
Les sites onedrive utilisent mysite15.master et on peut également changer la page maitre pour
oslo.master qui est une page maitre utilisée pour le contenu en ligne.

Les CSS de départ dans SharePoint Online


Toutes les pages maitres par défaut dans SharePoint utilisent toutes un CSS de départ qui se nomme :
corev15.css
Ce fichier étant lui-même constitué à partir de plusieurs fichiers CSS qui sont combinés en fonction des
composants utilisés et de la région. Ce fichier est stocké chez Microsoft et n’est pas accessible (dans la
ruche SharePoint \TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV15.CSS)

Les styles définis sont préfixés par ms- ou par s4- ce qui permet d’identifier rapidement les styles de
ce fichier.

Pour la page maitre oslo.master il y a un fichier CSS dédié qui est oslo.css lui-même étant une fusion de
différents fichiers CSS.

La bibliothèque qui stockent les « pages maitres », CSS, image et autre peut être affichée en allant
dans :
Paramètres du site -> Section [Galerie du Concepteur] -> Page Maitre et mise en page

Ajouter un CSS Alternatif

• Si on active l’infrastructure de publication (fonctionnalité de la collection de sites) :

⚠ L’activation de l’infrastructure de publication SharePoint est très impactant sur les


possibilités offertes en termes de personnalisations, de menus disponibles et de
comportement des CSS.

Dans les paramètres du site la section Aspect ajout


de plusieurs menus dont le menu Page Maitre :

 On peut dans le menu Page maitre définir directement dans l’interface un CSS de Remplacement :

Stéphane LEENHARDT - SupMicro tous droits 2019 185


5.2 Personnalisation de l'expérience Classique

 Autres avantages : tous les sites peuvent hériter de la page Maitre, du Thème du site racine et du CSS
de remplacement.

On obtient également le Gestionnaire de conception qui va permettre de concevoir des nouvelles pages
maitre et des mises en page.

• Sans l’infrastructure de publication

Soit on personnalise la page maitre avec SharePoint Designer pour changer en conception la balise
CSSRegistration de la page maitre ou on utilise un approvisionnement distant avec les CSOM.

Le projet PnP SharePoint propose une méthode toute prête pour charger à distance un CSS de
Remplacement.

Dans tous les cas ce qui permet d’injecter un CSS de remplacement est la présence de la balise
CSSRegistration sur la page maitre :

<SharePoint:CssRegistration Name="Themable/contoso.css" runat="server" />

<SharePoint:CssRegistration name="/_catalogs/masterpage/contoso/contoso.css"
runat="server">

Par exemple la balise ASP.NET CSSRegistration suivante:


<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style
Library/~language/Core Styles/contoso.css%>" runat="server"/>
Sera rendu dans la sortie HTML par:
<link rel="stylesheet" type="text/css" href="/sites/nopub/Style%20Library/en-
US/Core%20Styles/contoso.css">

186 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique
Ajout de CSS de Remplacement par CSOM

Le code suivant permet de définir un CSS de remplacement et un logo pour un site :

web.AlternateCssUrl = web.ServerRelativeUrl + "/SiteAssets/contoso.css";


web.SiteLogoUrl = web.ServerRelativeUrl + "/SiteAssets/99x.png";
web.Update();
web.Context.ExecuteQuery();

Le code suivant désactive le CSS et le logo :

Web web = clientContext.Web;


// Clear the properties accordingly
web.AlternateCssUrl = "";
web.SiteLogoUrl = "";
web.Update();
web.Context.ExecuteQuery();

Techniques pour identifier les CSS que l’on souhaite modifier

Dans un navigateur afficher la page que vous souhaitez modifier et appuyer sur la touche F12 qui va faire
apparaitre les outils de développements :

 On choisit l’élément que l’on souhaite modifier

 On sélectionne l’onglet Styles pour afficher tous les CSS qui s’appliquent :
On peut faire des changements directement dans le navigateur et tester le rendu en WYSIWYG

Cela permet d’identifier les classe CSS SharePoint qu’il faudra substituer dans son fichier CSS de
remplacement.

Injection de JavaScript

L’injection de code JavaScript dans une page SharePoint permet de changer le comportement de l’un
composant ou d’un menu sans pour autant venir modifier la structure interne de la page : C’est une
surcouche dynamique qui peut complètement modifier l’élément sans que SharePoint ne le sache d’une
certaine façon !
La première question à se poser est celle de la portée que vous souhaitez donner au script :

Stéphane LEENHARDT - SupMicro tous droits 2019 187


5.2 Personnalisation de l'expérience Classique
Le script doit-il être disponible sur toutes les pages ou seulement sur une page ?

Si le script doit être disponible sur toutes les pages il faut privilégier une injection via la CSOM mais on
peut également faire une nouvelle page uniquement pour injecter le code avec le JSOM sur toutes les
pages. (Etant donné que le traitement est ponctuel, il est plus logique de faire de l’approvisionnement
distant)

Si le script est uniquement sur une page on peut tout simplement utiliser la fonction :

Avec l’expérience classique :

on peut ajouter du code incorporé


directement dans la page :
Cela peut être pratique pour des traitements
ponctuels et relativement simples.

 On peut également choisir l’emplacement du script dans la page avec le WebPart : Editeur de Script
Il se trouve dans : Media et Contenu -> Editeur de Script.

⚠ Ce WebPart n’est pas disponible dans SharePoint si l’option d’exécution des scripts
personnalisés n’est pas activée (dans les paramètres d’administration globale de
SharePoint)

 On peut également ajouter un fichier HTML avec le code JavaScript souhaité et référencer le fichier
pour l’inclure dans une page :
Dans Media et Contenu -> Editeur de contenu

Ce WebPart permet de référencer un fichier HTML que l’on


peut mettre dans n’importe quelle bibliothèque SharePoint.

L’avantage est de pouvoir modifier le script dans le fichier


HTML sans avoir à modifier la page.

Avec l’expérience moderne :

188 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique
On sélectionne Incorporation : ce qui permet
d’ajouter un contenu externe ou du code
incorporé :

Ajout de code JavaScript en utilisant le CSOM

 Il existe plusieurs composants « prêts à l’emploi » pour parvenir à injecter du code JavaScript en
utilisant un complément ou un code CSOM distant ou même en utilisant un code JSOM.

Mais dans tous les cas, ce qui permet au final l’ajout de code est la propriété UsercustomJSActions que
l’on trouve sur la collection de sites ou sur un site.

Exemple PowerShell d’ajout de script à distance :

$context.Load($site)

#add custom js injection action


$customJSAction = $site.UsercustomJSActions.Add();
$customJSAction.Location = “ScriptLink”;
#reference to JS file
$customJSAction.ScriptSrc = “~SiteCollection/Style Library/JS Display Templates/test.js”;
#load it last
$customJSAction.Sequence = 1000;
#make the changes
$customJSAction.Update();
$context.ExecuteQuery();

Les méthodes disponibles sont :


https://github.com/OfficeDev/PnP/tree/master/Samples/Core.JavaScriptInjection

https://github.com/johnnliu/UserCustomActionsConfigPage :

Ce projet fourni une page permettant d’ajouter des scripts sur la collection de sites ou sur un site.

Le numéro de séquence permet d’ordonner l’ordre d’exécution des scripts en partant à partir de 10000
car les numéros précédents sont réservés pour Microsoft :

Stéphane LEENHARDT - SupMicro tous droits 2019 189


5.2 Personnalisation de l'expérience Classique

Quelques références :

• SP2013/2016 Responsive-UI and UserCustomActionsConfigPage


• SharePoint 2013/2016 Responsive UI
• http://johnliu.net/blog/2015/12/the-safest-future-proof-way-to-brand-your-sharepoint-
and-sharepoint-online
• https://github.com/OfficeDev/PnP/tree/master/Solutions/Core.CDNManager
• https://github.com/OfficeDev/PnP/tree/master/Samples/Core.ManageUserCustomAction

190 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique

III.Personnalisation avec Office UI Fabric

Introduction à Office UI Fabric

Il s’agit du Framework Officiel proposé par Microsoft (depuis 2015) pour développer des composants et
créer des expériences pour Office ou SharePoint.

La cible de ce Framework est essentiellement focalisée sur la nouvelle expérience dans SharePoint Online
et sur les compléments que l’on peut développer en intégrant une expérience commune avec celle du
standard SharePoint (ou Office).

Il faut noter que ce Framework est open source et maintenu par une dizaine de développeur avec une
roadmap sur les mises à jour :

Le point d’entrée des librairies étant stocké sur github à l’adresse suivante :
https://github.com/OfficeDev (pour tous les développements Office)

https://github.com/OfficeDev/office-ui-fabric-core (pour la librairie de base Office UI Fabric)

Les documentations et autres ressources se trouvant à cette adresse :


https://dev.office.com/fabric

Que trouve-t-on dans Office UI Fabric ?

L’organisation des éléments d’Office UI Fabric est groupée en 2 grandes gammes :


Tout ce qui concerne l’interface utilisateur (UI) et une deuxième gamme pour les composants (qui sont
des contrôles graphique).

 A partir de la page dev.office.com/fabric


Dans les Style on trouve :

Stéphane LEENHARDT - SupMicro tous droits 2019 191


5.2 Personnalisation de l'expérience Classique

• Typographie
Ensemble de classe CSS apportant une
typographie et des polices
• Couleurs et Générateur de Thème
Couleurs : donne les noms des thèmes pour ne pas
spécifier des couleurs en dur et le générateur de
Thème permet de créer un ensemble de codes
couleurs
• Icones et Brand Icons
Propose une liste d’icônes intégrés que l’on peut
utiliser sans droits et les différents logos des
produits Office dans Brand Icons
• Layout (Mise en page)
Permet avec la grille de créer la disposition
souhaitée tout en restant Responsive
• Localisation (Multi-Langue)
Permet de changer le sens de lecture selon la
langue
• Animations
Ce sont des effets CSS que l’on peut appliquer sur
un élément (Fondu, Opacité, Sliding)
• Utilities
Propose quelques classes pour l’alignement du
texte

Dans la rubrique composants on trouve :

Tous les contrôles que l’on peut souhaiter utiliser dans un


développement :
Des contrôles d’entrée (texte, label, checkbox, Toggle, Rating,etc..)
De navigation (BreadCrumb, Menus, Pivot, Panel)
De Contenu (List, Calendrier, Icone, Image)
Des sélecteurs (Date, Personne, Couleur)
Des contrôles de progression et de validation
De Surface (Boite de dialogue, Layer, Panel, ToolTip, Overlay,Modal)
Des utilitaires (pour les thèmes, les selections, Marquee Selection)

Le Framework est riche et propose tous les composants en natif que l’on peut souhaiter disposer. La
question qui vient est le modèle de programmation que l’on peut choisir car il en existe plusieurs…

192 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique
Les modèles de Programmation d’Office UI Fabric

Ce qui peut être un peu déroutant dans Office UI Fabric est le nombre de langages et technologies de
programmation qui sont très variées même si le résultat est le même vis-à-vis de SharePoint.

On trouve ainsi la possibilité de développer en JavaScript , React (nouveau langage que l’on va introduire)
et Angular JS.

On trouve également différents générateurs pour démarrer un nouveau projet :


CDNN, Bower, NPM, NuGet

Office Fabric JS
La page du projet étant : https://github.com/OfficeDev/office-ui-fabric-js

La page sur les futures évolutions (Roadmap) : https://trello.com/b/wq7oIK87/office-ui-fabric-js-requests

La page expliquant les différents composants étant : https://dev.office.com/fabric-js/

Le point de départ est de référencer les librairies soit pas un CDN :


(un Content Delivery Network est un canal en ligne de diffusion de librairies)
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-
ui-fabric-js/1.2.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-
ui-fabric-js/1.2.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-
js/1.2.0/js/fabric.min.js"></script>

 Ou par l’installation d’un package NuGet : Install-Package OfficeUIFabricJS

Et dans ce cas les références viennent du projet qu’il faut ajouter :


<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>

Quelques exemples de mise en applications :

Pour mettre en œuvre ces exemples, le plus simples est de s’appuyer sur le CDN et de concevoir une
page de développement avec SharePoint Designer : c’est la méthode la plus rapide pour le temps du
développement.

La distribution finale se faisant ensuite par un complément SharePoint ou par un approvisionnement


distant.

IV.Personnalisation de Page Maitre / Mise en Page

Par défaut SharePoint Online propose 2 pages maitres : Seattle et Oslo.

La différence entre ces deux pages est sur la manière de naviguer, avec Oslo on a plus de barre de
lancement supérieure qui devient une barre de navigation supérieure de navigation dans le site.

Stéphane LEENHARDT - SupMicro tous droits 2019 193


5.2 Personnalisation de l'expérience Classique

⚠ Le fonctionnement par défaut sur un site d’équipe sans l’infrastructure de publication


activée.

Si on active l’infrastructure de publication SharePoint, un nouveau type de page apparait : La mise en


page :

Mises en page
Une mise en page constitue le modèle d'un type de page spécifique de votre site, comme une page
d'article ou une page de détails de produit. Comme son nom l'indique, la mise en page est synonyme de
structure du corps de la page.

194 Stéphane LEENHARDT - SupMicro tous droits 2019


5.2 Personnalisation de l'expérience Classique

Lorsqu’on active la publication on dispose d’un nouvel outil pour la conception de la page maitre et des
mises en page :

Le Gestionnaire de Conception

Le gestionnaire de conception vous permet de créer une conception visuelle pour votre site web à l’aide
de l’outil de conception web ou de l’éditeur HTML de votre choix, en utilisant uniquement les langages
HTML et CSS, puis de télécharger cette conception dans SharePoint. Le gestionnaire de conception fait
office d’interface et de hub central, à partir duquel vous pouvez gérer tous les aspects d’une conception
personnalisée.

• Avant de commencer
Avant de pouvoir utiliser le gestionnaire de conception, vous devez disposer d’une conception. Vous
pouvez en créer une ou utiliser un modèle de site web prêt à l’emploi. Une « conception » est, tout
simplement, un groupe de fichiers qui définissent l’aspect visuel de votre site, généralement :
o Au moins un fichier HTML qui sera converti en page maître SharePoint
o Un ou plusieurs fichiers CSS
o Des fichiers JavaScript
o Des images
o D’autres fichiers de prise en charge

• Ajout d’extraits de code


Après avoir converti votre page maître et généré un aperçu satisfaisant, vous êtes prêt à ajouter des
extraits de code à la page maître. Un extrait de code est une représentation HTML d’un composant
SharePoint (comme un contrôle de navigation, une zone de recherche ou un composant WebPart) que
vous pouvez ajouter à votre page maître. L’ajout d’extraits de code à votre page maître permet de créer
rapidement la gamme complète des fonctionnalités SharePoint sur votre page maître. L’ajout d’extraits de
code s’effectue essentiellement en trois étapes :
1. Rechercher et configurer des extraits de code dans la galerie d’extraits de code
2. Copier des extraits de code dans votre page maître HTML
3. Générer des aperçus et appliquer des styles aux extraits de code à l’aide de CSS

Stéphane LEENHARDT - SupMicro tous droits 2019 195


5.2 Personnalisation de l'expérience Classique
• Création d’un package de conception
Un package de conception est un moyen simple de rassembler tous les fichiers et éléments utilisés par
votre conception, de les exporter d’un site, de les importer dans un autre site et d’appliquer la conception
à ce nouveau site.

Si vous implémentez et peaufinez votre conception dans une collection de sites de test et que vous
souhaitez la déployer dans une collection de sites actifs, vous pouvez utiliser un package de conception
pour la transférer.

Un package de conception est un fichier .wsp, un fichier solution SharePoint, qui est un type particulier de
fichier .cab.
Lorsque vous créez ou importez un package de conception, le fichier .wsp est stocké dans la galerie de
solutions.
Après importation, le package de conception est automatiquement activé.
Si les pages maîtres et les mises en page ont été publiées avant d’être mises en package, et si les pages
maîtres ont été affectées à des canaux d’appareils avant d’être mises en package, la conception sera
automatiquement appliquée au site lors du déploiement du package de conception.

 Sinon, pour appliquer la conception à ce nouveau site, il vous suffit de publier les fichiers de
conception et d’appliquer les pages maîtres pour chaque canal d’appareil.

Conclusion

Le modèle classique va-t-il continuer d’exister, à cela la réponse de Microsoft est la suivante :

"We will continue to support both of these mitigations until the modern library experience
supports the same level of customization as the classic one and partners have had ample
time to adapt their solutions to the new experience."

https://developer.microsoft.com/en-us/office/blogs/update-on-modern-document-libraries-and-
extensiblity/

196 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint

Dévéloppémént dé Compléménts
➢ Architecture et principes de fonctionnement
➢ Choix de conception
➢ Méthodologie de Développement

I. Architecture et principes de fonctionnement

Il existe 2 types de compléments dans SharePoint :


Les Compléments qui sont hebergés par SharePoint et les Compléments hébergés par un fournisseur.

Il faut donc bien faire la distinction entre ces deux types pour faire le bon choix de conception.

1) Possibilités des Compléments

• Un complément contient un ensemble de fonctionnalités isolées qui étendent les fonctions de


SharePoint pour résoudre un besoin fonctionnel ou métier.
• Un complément n’a jamais de code personnalisé qui s’exécute sur le serveur SharePoint.
Le code personnalisé peut s’exécuter dans un cloud ou sur le poste client ou même sur un
SharePoint distant sur site ou OnLine.

Cela assure les administrateurs de l’infrastructure SharePoint qu’ils peuvent ajouter des compléments
en ayant l’assurance qu’ils ne peuvent pas dégrader les performances ou bloquer les sites SharePoint.

• Le site SharePoint sur lequel un utilisateur installe un Complément, l’appelle le site hôte (host
web) et la plupart du temps, le complément crée un nouveau site enfant appelé le site du
complément.

Avec un complément on peut créer les composants SharePoint :

Un complément peut s’intégrer dans un site SharePoint de 3 façons :

Page complète immersive

Une page complète qui peut avoir la charte graphique du site SharePoint en
cours.
On parle de page immersive car le complément affiche une page comme
point de départ de l’application

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 197


6 Développement de Compléments SharePoint
Partie de page SharePoint : Add-in part

L’add-in part est intégré au moyen d’un iframe dans une zone de composant
WebPart.

Action personnalisée dans l’interface

Le complément peut être un menu qui vient dans les menus de SharePoint ou
dans un Ruban.

2) Présentation des compléments hébergés par SharePoint

Ce type d’application réside intégralement sur le site SharePoint sur lequel il est installé et son dépendant
du l’hôte.

Comme tous les compléments, l’utilisateur lance un complément depuis une tuile dans le contenu du site
sur lequel le complément est installé.
Tout le contenu d’un complément se trouve dans un site dédié (le site du complément) avec une
exception pour les Add-in part et Custom Action qui sont ajoutés sur le site hôte du complément.

Toute la logique métier du complément est exécuté coté client et aucun code serveur n’est possible :
Cela implique des développer la logique en JavaScript et une version JavaScript du modèle client existe
pour simplifier les opérations CRUD dans SharePoint : le JSOM.

Les pages que l’on développe sont généralement des pages ASP.NET (ASPX) et elles peuvent référencer de
façon déclarative uniquement des contrôles existants et standards dans SharePoint :
Elles ne peuvent avoir de code behind ou tout autre code serveur, en revanche on peut personnaliser
l’affichage des contrôles mais en utilisant une technique cote client (DHTML, JQUERY, CSS)

Le code JavaScript du complément hébergé peut manipuler les données et ressources qui sont en dehors
du site du complément en utilisant 2 techniques :
- Une API JavaScript spécifique Cross-domaine

Prise de notes

198 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint
- Une API JavaScript qui permet un WebProxy.

Avec ces techniques le complément peut manipuler les données du site hôte ou sortir sur internet.

3) Présentation du complément hébergé par un fournisseur

Tous les composants qui peuvent être développés en complément hébergé peuvent être aussi dans un
complément du fournisseur.
La différence est que le complément du fournisseur nécessite un environnement propre, distant de
SharePoint (Application Web ou base de données situés en dehors de SharePoint et sans aucun lien) :
Le serveur qui va exécuter le complément peut être dans le réseau d’une entreprise ou sur internet et
utiliser la technologie de son choix (Linux, Apache, MySQL, Php, Java, etc…).
Pour mettre à jour un complément du fournisseur il suffit de le mettre à jour sur un emplacement, celui
qui héberge le complément et il n’est pas nécessaire de le redéployer sur les SharePoint qui l’utilisent.

Dans le cas où vous commercialisez un complément du fournisseur, on ne sait pas quels les clients qui
utiliseront le complément, mais le manifeste qui est déployé dans SharePoint identifie l’instance et l’URL
du site SharePoint sur lequel le complément est installé : Cela permet au complément de s’adapter au
contexte de chaque SharePoint.

Le complément du fournisseur utilise les API SharePoint pour communiquer et modifier SharePoint

Cela inclus les fonctions de recherches, workflow, fonctions sociales, taxonomie, profils utilisateurs, le
BCS, etc…

Il a plusieurs API possibles :

- Si l’application est .NET on peut utiliser le SharePoint Client-Side Object Model (CSOM)
- Si l’application n’est pas .NET les API REST/OData

La librairie JSOM n’est pas utilisable à distance et ne peut être utilisée dans un complément du
fournisseur.

La sécurité

Comme le complément du fournisseur est distant, il se pose la question de la sécurité et de ce que le


complément sera autorisé à faire sur le SharePoint.
Les compléments du fournisseur ont un principal de sécurité (comme les utilisateurs ou les groupes) qui
donne une identité à chaque complément.
Le complément doit donc être identifié et autorisé de la même façon que les utilisateurs.

Dans la plupart des cas, les autorisations d’un complément sont l’intersection entre celles de l’utilisateur
et celles données au complément.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 199


6 Développement de Compléments SharePoint
On peut aussi « impersonaliser » le complément pour qu’il s’exécute dans un contexte de sécurité plus
élevé que celui de l’utilisateur, pour lui permettre de réaliser des opérations dont l’utilisateur en cours ne
serait pas autorisé.

Les compléments du fournisseur peuvent se connecter à n’importe quel site (interne, public) et gérer les
listes et les évènements de liste ce que ne peuvent pas faire les compléments héberges.

4) Comparaison entre Complément hébergé et du fournisseur

Fonctions Complément Hébergé Complément du fournisseur


Modèle d’hébergement Le site SharePoint Une plateforme distante
Installation dans SharePoint Obligatoire Le code n’est pas déployé sur le
serveur SharePoint, mais
s’exécute à distance en utilisant
une méthode de communication
distante
Code Serveur Non disponible Tout langage possible
Cote client JavaScript, JSOM et API REST JavaScript CSOM ou API REST
Compétences SharePoint, JavaScript, HTML SharePoint, JavaScript, HTML et
l’environnement serveur sous-
jacent
Extension SharePoint Centré sur l’ajout de composants Centré sur l’application web
SharePoint (liste, page, WebPart, distante et indépendante de
workflow, type de contenu, SharePoint
module,e tc..)
Identification / Autorisation Automatique, contexte de A la responsabilité du
l’utilisateur développeur et de celui qui
autorise l’application
Stockage des données SharePoint uniquement N’importe quelle source possible
Expérience d’utilisation Intégré dans le contexte du site Peut avoir une ergonomie
SharePoint propre ou intégrée à celle en
cours
Meilleurs cas d’utilisation Composants standards Applications qui demandent une
SharePoint que l’on personnalise logique métier très forte et
complexe

Choix en fonction des tiers d’une architecture

Tiers Options Applicable à :


Utilisateur (UI, IHM, ASP.NET pages, ASP.NET Profite des compétences
Présentation, Front) Forms/MVC application acquises d’une équipe sur
hébergée sur un serveur ASP.NET

HTML5 avec JavaScript Interfaces Riche


Prise de notes

200 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint

PHP ou autres Intègre du non-Microsoft avec


SharePoint
Silverlight dans Windows phone Permet l’accès mobile avec
géolocalisations et notifications

Métier (Middle-Ware) Code JavaScript client Pour des cas simples

MS Azure Worker Pour du traitement intensif

Service Web Distant Pour du traitement intensif


Données (Back-Office) SQL Azure SGBD en ligne
Azure table storage Stocke les paramètres
Azure blob storage Stocke les fichiers volumineux
SGBD N’importe quel SGBD

5) Considération d’ergonomie

Le design des compléments en général utilise le même que celui de l’hôte et cela est possible sur les
propriétés suivantes qui peuvent être adaptée au design :

Page web avec le contrôle Chrome

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 201


6 Développement de Compléments SharePoint

Pour parvenir à ce résultat il faut ajouter au chargement de la page des librairies JavaScript :

<script src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"
type="text/javascript"></script>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
</script>

Et charger SP.UI.Controls.js au chargement de la page.


Une fois la librairie chargée on peut ajouter par programmation ou de façon déclarative le chrome sur la
page.

Ajout par programmation :


function renderChrome() {
// The Help, Account and Contact pages receive the
// same query string parameters as the main page
var options = {
"appIconUrl": "siteicon.png",
"appTitle": "Chrome control add-in",
"appHelpPageUrl": "Help.html?"
+ document.URL.split("?")[1],
// The onCssLoaded event allows you to
// specify a callback to execute when the
// chrome resources have been loaded.
"onCssLoaded": "chromeLoaded()",
"settingsLinks": [
{
"linkUrl": "Account.html?"
+ document.URL.split("?")[1],
"displayName": "Account settings"
},
{
"linkUrl": "Contact.html?"
+ document.URL.split("?")[1],
"displayName": "Contact us"

Prise de notes

202 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint
}
]
};

var nav = new SP.UI.Controls.Navigation("chrome_ctrl_placeholder",options);


nav.setVisible(true);
}

On peut également référencer les styles CSS de l’application web hôte de cette façon :

<SharePoint:CssRegistration runat="server" name="default" />


<SharePoint:CssLink runat="server />

Cela permet d’utiliser les styles en cours, mais impose d’utiliser les bonnes classes CSS dans votre
conception.

Reference: https://dev.office.com/sharepoint/docs/sp-add-ins/sharepoint-add-ins-ux-design-guidelines

Considération de déploiement

Il existe 2 méthodes pour rendre disponible un complément :

• L’ajout dans un catalogue de complément privé et propre à une société

• L’ajout dans le « Office Store » qui est une place de marché public.

Dans tous les cas le complément sera vérifié pour passer des tests de conformité avant d’être validé et
ajouté dans un catalogue d’application.

Pour rendre disponible un complément au sein d’une l’entreprise on trouve :

Un catalogue Global qui contient des compléments qui peuvent être utilisés sur toutes les applications
SharePoint et des catalogues qui peuvent être limités à une application Web (dans ce cas on crée une
collection de sites qui servira de catalogue de compléments pour l’application Web).

On peut également déployer des compléments dans un catalogue public et demander une License et un
prix de vente pour l’utilisation du complément.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 203


6 Développement de Compléments SharePoint

Un administrateur peut ajouter et acheter des compléments et les rendre disponibles soit au niveau du
catalogue global ou alors par application web.

Du point de vue de l’utilisateur pour ajouter un complément, quand on ajoute une application, la liste
fusionne les compléments disponibles :

• Les compléments présents dans le catalogue de la collection ou du global et propre à la société


• Les compléments achetés depuis le « Office Store » et pour lesquels on possède une License
globale ou une License pour l’utilisateur en cours

Processus d’installation d’un complément

Prérequis : l’administrateur de la batterie a correctement configuré un catalogue d’applications.

L’utilisateur qui va ajouter des compléments doit avoir les autorisations Gestion du Site et Création de
Site, pour pouvoir ajouter un complément. Par défaut ceux qui ont le contrôle Total en étant membre du
groupe Propriétaires ont ces autorisations.

L’ajout de fait directement dans le menu Ajouter une application :

On peut également le faire par une commande Power Shell :


$spapp = Import-SPAppPackage -Path Path to app -Site URL -Source Source

et l’installation
Install-SPApp -Web URL -Identity $spapp

Lorsqu’un complément est ajouté, SharePoint crée un Principal d’application et un identifiant à chaque
installation (soit automatiquement pour un complément hébergé, soit par l’utilisateur qui doit créer les
principaux avant d’installer un complément du fournisseur).

Prise de notes

204 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint
Mise à jour de complément

L’installation de mise à jour peut se faire à chaud sans avoir à désinstaller les versions précédentes.
En cas d’erreur durant la mise à jour, la plateforme annule la mise à jour et revient à la version
précédente.

Notez, qu’après l’envoi d’un complément à l’Office Store il faut 24h avant de pouvoir publier une mise à
jour.

Un update ne peut pas changer le type de complément : Hébergé par SharePoint ou Fournisseur.

Attention le compte système ne peut pas ajouter de complément pour des raisons de performances.

Processus de désinstallation d’un complément

La désinstallation se fait pour un utilisateur avec les mêmes droits que pour l’installation.
A la fin de la désinstallation tout ce qui faisait partie de du complément est supprimé.

Mais les éléments externes ajoutés par le complément dans un code spécifique et qui ne font pas partie
du manifeste ne seront pas supprimés : SharePoint ne peut pas suivre les actions spécifiques d’un
complément ou même les actions faites par un utilisateur (par exemple, une page avec un bouton qui va
créer une liste, la liste ne sera pas supprimée à la désinstallation)

Les permissions de l’application sont révoquées avec les règles suivantes :

• Les permissions de portée Web sont toujours révoquées,


• S’il n’y a plus d’autres instances du complément dans la collection de sites, les permissions de
portée collection sont révoquées
• Pareil pour les permissions de portée Tenant qui sont révoquée que s’il n’existe plus aucune
instance du complément dans la portée Tenant.

II.Développement des compléments hébergés

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 205


6 Développement de Compléments SharePoint
Lors du développement des compléments, le développeur déployer et tester directement son
complément dans SharePoint sans avoir à suivre la procédure de déploiement en environnement final.

Pour cela, il faut créer et disposer d’un site avec le modèle : Site du développeur.
Ce modèle de site est prévu pour permettre un déploiement direct dans le site, sans avoir besoin de
passer par un catalogue d’application.

Il est disponible sur un SharePoint on-premise ou dans SharePoint Online, et c’est exactement le même
modèle de site.

On indique l’adresse d’un site du Developpeur On choisit la version souhaitée :

1) Développement dans Visual Studio d’un complément

Les éléments remarquables du projet sont :


Des Modules, un fichier de Manifeste et de configuration.

Prise de notes

206 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint
AppManifeft : permet de paramétrer les valeurs
principales comme le titre, l’icône and la page de
démarrage

Default.aspx : la page de démarrage du


complément

App.js : donne un exemple de fonction JavaScript


JSOM, qui permet d’écrire du code qui sera
associé au complément

App.css : permet d’injecter ses propres styles CSS

JQuery-XXX.js : Librairie JQuery directement


intégrée que l’on peut changer pour une version
plus récente

Une fois le projet de départ constitué on peut ajouter de Nouveaux Eléments :


• Client Web Part : pour créer un add-in part,
• Menu Item Custom Action, Ribbon Custom Action, List, Content Type, Workflow, Site Column et
tous fichiers web (html, css, js, images,etc..)

Dans le projet les composants seront déployés par une fonctionnalité :

Fonctionnement des Features ou fonctionnalité

Définition :
Une fonctionnalité est un ensemble de fonctions que l’on applique grâce à un fichier xml sur un serveur
SharePoint.
La fonctionnalité simplifie la mise en place et la personnalisation de sites SharePoint, en activant ou en
désactivant la fonctionnalité sur les sites que l’on souhaite.
 Une fois qu’une Feature est créé il faut l’activer.

La feature d’un complément ne peut être qu’avec la portée Web et aucune autre.

Une Feature peut être utilisée pour :


 Définir des définitions de listes
 Des définitions de listes ou de champs,
 Déployer des WebPart, des workflows, des types de contenus
 Personnalisation de mise en pages
 Personnalisation des menus d’éléments

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 207


6 Développement de Compléments SharePoint
Exemple :
<Feature xmlns="http://schemas.microsoft.com/sharepoint/" Description="Fonctionnalité
de complément SharePoint" Id="942eef6b-c759-47db-ab81-98a8ada758e9" Scope="Web"
Title="ComplementProjetClient Feature1" Version="1.0.0.0">
<ElementManifests>
<ElementFile Location="Pages\Default.aspx" />
…..
</ElementManifests>
<UpgradeActions>
<VersionRange>
<ApplyElementManifests>
<ElementManifest Location="Pages\Elements.xml" />
<ElementManifest Location="Scripts\Elements.xml" />
<ElementManifest Location="Content\Elements.xml" />
<ElementManifest Location="Images\Elements.xml" />
</ApplyElementManifests>
</VersionRange>
</UpgradeActions>
</Feature>

Structure du fichier feature.xml :


Feature
ActivationDependencies
ActivationDependency
ElementManifests
ElementFile
ElementManifest
Properties
Property

Element Portée Description


Type de contenu Web Schéma de Définition qui peut être
Provisionné/ appliqué sur plusieurs définitions de
déprovisionné listes
Liaison au type de contenu Web Permet d’ajouter des types de contenu
Provisionné uniquement sur une liste définie dans le onet.xml qui
ne permet pas de le faire lui-même
Control Web Permet de remplacer un control par un
Pas Provisionné autre

Custom Action Web Permet de personnaliser :


Pas Provisionné Les liens
Les listes d’actions sur un élément de
liste
Le menu Actions du site
Custom Action Group Web Groupe d’actions personnalisées
Pas Provisionné
Field Web Colonne de site
Prise de notes

208 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint

Provisionné/ dé-
provisionné
List Definition Web Défini un modèle de liste
Pas Provisionné
List Instance Web Ajoute une liste de données a une liste
Provisionné uniquement SharePoint
Module Web Ensemble de fichiers a ajouter a un site
Provisionné uniquement
Workflow Template Web Définition de flux de travail
Pas Provisionné

Le provisionnement est un mécanisme SharePoint qui lit les définitions xml pour placer des fichiers
associés aux bons emplacements dans la ruche de SharePoint.
Certains fichiers peuvent rester en cas de désinstallation si ils ne sont pas dé-provisionnés.

2) Actions Personnalisées dans les compléments

Les actions personnalisées permettent d’ajouter des nouveaux menus dans les éléments de liste et les
rubans.

Cet élément peut être ajouté sur le site hôte ou sur celui de l’application, mais c’est un cas particulier
ou le complément peut directement ajouter sur le site web hôte un élément dans l’interface.

On peut ajouter des menus d’élément ou de Ruban mais avec certaines restrictions :
On ne peut pas masquer les éléments de menu (élément HideCustomAction n’est pas disponible)

Si on souhaite masquer des éléments de menu, il faut une injection JavaScript ou CSS pour masquer le
menu.

Ajout de menu d’élément dans Visual Studio :


Choisir d’ajouter une nouvelle Action personnalisée d’élément de menu

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 209


6 Développement de Compléments SharePoint

Il faut ensuite cibler le composant SharePoint qui va recevoir le nouveau menu :

• On peut cibler un modèle de liste et dans ce cas toutes les listes/bibliothèques basées sur un
modèle recevront le nouveau menu.
(Bibliothèques de documents, formulaires, pages, images, listes personnalisées, annonces, évènement,
taches, etc…) ; On trouve tous les modèles disponibles dans le site SharePoint.

• Cibler une liste en particulier en choisissant Instance de liste


• Cibler un type de contenu et dans ce cas on sélectionne le type souhaité
• Cibler une extension de fichier (docx, xlsx, pptx, etc…)

Definir la page qui sera affichée quand on clique sur le menu ou le code javascript a executer.

Exemples de nouveau menu :


Prise de notes

210 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint

Ajout d’élément dans un Ruban

Le ruban contient au plus haut niveau des onglets. Chaque onglet contient un ensemble de groupes.
Les groupes contiennent des contrôles.

Chaque groupe contient plusieurs contrôles qui possèdent une propriété qui identifie le contrôle.
Tabs

Groups

Controls

Onglet Parcourir et Page


Groupe Modifier et Gérer sont des groupes
Contrôles Modifier, Extraire sont des contrôles du groupe Modifier

Contrôles possibles dans un groupe :


Control Type Description
Button Bouton simple
Checkbox Une case a cocher
Color Picker Une grille pour choisir une couleur
Combo Box Une liste qui permet de sélectionner une valeur
Drop Down Une liste a choix unique
Flyout Anchor Un bouton avec une flèche descendante pour ouvrir un menu
Insert Table Une grille 10X10 pour dimensionner un tableau

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 211


6 Développement de Compléments SharePoint
Label Une ligne de texte
Menu Permet d’afficher un menu contextuel
Menu Section Une section pour séparer un menu (contient des controles)
MRU Split Button Un bouton qui conserve la dernière action de l’utilisateur, qui devient celle par
défaut
Spinner Permet de saisir une valeur ou de parcourir des valeurs avec les touches
fléchées
Split Button Un bouton agissant comme un menu
Text Box Une zone de texte
Toggle Button Un bouton poussoir (état on/off)

• Principe de fonctionnement
Le ruban peut être personnalisé au moyen des CustomAction qui seront définies dans un fichier XML.

Définition XML :
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="COB.SharePoint.Ribbon.CustomTab"
Location="CommandUI.Ribbon" RegistrationType="List" RegistrationId="101">
<CommandUIExtension>
…..

</CommandUIExtension>
</CustomAction>

Le ruban est personnalisé au moyen d’une CustomAction :


RegistrationType :
List : si la valeur du RegistrationId cible l’id d’une liste ou un modèle de liste
ContentType : si la valeur du RegistrationId cible un type de contenu
ProgID : si on cible un ProgID
FileType : si on cible une extension de fichier.

Valeurs possibles RegistrationType = List :


Les valeurs de RegistrationID peuvent être soit l’id d’une liste ou un modèle de liste
• 100 Generic list • 130 Data Connection library
• 101 Document library • 140 Workflow History
• 102 Survey • 150 Gantt Tasks list
• 103 Links list • 200 Meeting Series list
• 104 Announcements list • 201 Meeting Agenda list
• 105 Contacts list • 202 Meeting Attendees list
• 106 Events list • 204 Meeting Decisions list
• 107 Tasks list • 207 Meeting Objectives list
• 108 Discussion board • 210 Meeting text box
• 109 Picture library • 211 Meeting Things To Bring list
• 110 Data sources • 212 Meeting Workspace Pages list
• 111 Site template gallery • 301 Blog Posts list
• 112 User Information list • 302 Blog Comments list
• 113 Web Part gallery • 303 Blog Categories list

Prise de notes

212 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint
• 114 List template gallery • 1100 Issue tracking
• 115 XML Form library • 1200 Administrator tasks list
• 116 Master pages gallery
• 117 No-Code Workflows
• 118 Custom Workflow Process
• 119 Wiki Page library
• 120 Custom grid for a list
Cf : BaseType (dans le SDK)

Personnalisation d’onglets
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location="Ribbon.Tabs._children">
<Tab
Id="Ribbon.CustomTabExample"
Sequence="501"
Description="My New Tab"
Title="My New Tab">

Location : indique ou le contrôle sera affiché. Dans cet exemple _children représente les onglets car on
utilise Tabs._children. Cette instruction ajoute un nouvel onglet
Ribbon.[Tab].[Group].Controls._children

Sequence : indique ou l’onglet sera affiché par rapport aux autres. Par défaut les onglets utilisent des
multiples de 100. Il ne faut donc pas utiliser un multiple de 100 pour éviter les conflits.

Ajout dans Visual Studio

On ajoute un nouvel élément de type : Action personnalisée de Ruban :

On peut choisir la cible du menu :

Soit un modèle de liste ou une instance de liste.

Ce qui est déterminant est le choix du groupe dans lequel vous allez ajouter un nouveau menu :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 213


6 Développement de Compléments SharePoint
On choisit si on cible une bibliothèque ou une liste
et ensuite on sélectionne le groupe qui sera ciblé :

Visual Studio ajoute un fichier Element.xml qui


peut être modifié pour mieux personnaliser le
menu.
CustomAction : changer le titre et la séquence.
CommandUIDefinition : changer le type de
contrôle
CommandUIHandler : changer le comportement
du contrôle en ajoutant du JavaScript par
exemple.

Ajout de modules
Un module est une instruction déclarative permettant d’injecter des fichiers dans un site SharePoint.

On parle de provisionnement car les fichiers vont être injectés dans la base de contenu SharePoint.

Par exemple pour provisionner des fichiers JQuery dans le site SharePoint :
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="Scripts">
<File Path="Scripts\App.js" Url="Scripts/App.js" ReplaceContent="TRUE" />
<File Path="Scripts\jquery-1.9.1.min.map" Url="Scripts/jquery-1.9.1.min.map"
ReplaceContent="TRUE" />
<File Path="Scripts\jquery-1.9.1.min.js" Url="Scripts/jquery-1.9.1.min.js"
ReplaceContent="TRUE" />
<File Path="Scripts\jquery-1.9.1.js" Url="Scripts/jquery-1.9.1.js" ReplaceContent="TRUE" />
<File Path="Scripts\jquery-1.9.1.intellisense.js" Url="Scripts/jquery-1.9.1.intellisense.js"
ReplaceContent="TRUE" />
</Module>
</Elements>

Si un fichier doit être ajouté dans une bibliothèque il faut ajouter Type="GhostableInLibrary" sur l’élément
File :
<File Path="Doc\aide.pdf" Url="Documents/aide.pdf" ReplaceContent="TRUE"
Type="GhostableInLibrary" />

Prise de notes

214 Stéphane LEENHARDT - SupMicro tous droits 2019


6 Développement de Compléments SharePoint
Autres Eléments disponibles

Avec Visual Studio on trouve des concepteurs permettant de définir les éléments suivants :

• Ajouter de nouveaux types de liste

• Ajouter de nouveaux types de contenus

• Ajouter des Workflow ou une activité de Workflow

• éléments pour lesquels on ne dispose pas de concepteur


Colonne de sites : bien que le modèle soit présent dans les nouveaux éléments, il faut le constituer en
mode déclaratif uniquement.

Module : doit être également constitué en mode déclaratif.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 215


6 Développement de Compléments SharePoint
Et toutes instructions CAML ou élément non-présent dans cette liste que vous pourriez ajouter, dans ce
cas il faut choisir un nouvel Elément vide.

• Eléments non disponibles dans une solution SharePoint pure


Récepteur d’évènement : implique d’avoir une application distante de SharePoint qui reçoit les
évènements

3) Conseils de développement

De plus en plus Microsoft recommande d’ajouter des éléments dans SharePoint Online au moyen de
provisionnement à distance et de moins en moins en utilisant des instructions déclaratives dans un
complément.

Et pourtant, pour qu’un complément puisse être autonome et être ajouté à la demande il n’y a pas
d’autres solutions que de créer dans le complément les éléments que l’on souhaite ajouter.

Prise de notes

216 Stéphane LEENHARDT - SupMicro tous droits 2019


7 Développement de compléments du fournisseur

Dévéloppémént dé Compléménts hébérgés


par un fournisséur
Lorsqu’on met en place un complément hébergé par le fournisseur, c'est-à-dire une application distante
qui n’est peut-être même pas dans le réseau de l’entreprise vient la question de la sécurité.

Pour permettre au complément distant de communiquer avec SharePoint de façon sécurisée il existe
différentes méthodes et dans le développement d’un projet c’est bien souvent le premier choix de
conception qu’il faut faire !

1) Les mécanismes d’identifications

Interne ou Cross Domain

L’identification interne est réalisée par SharePoint à chaque fois qu’une page ou une ressource est
demandée.
SharePoint stocke le credential de l’utilisateur et crée un jeton sécurisé au format SAML (Security
Assertion Markup Languae) qui peut être obtenu à partir d’une identification Windows ou par Formulaire.

L’identification interne est utilisée pour les compléments hébergés par SharePoint puisqu’ils sont une
ressource interne.

Les compléments du fournisseur peuvent utiliser l’identification interne mais il faut pour cela utiliser la
librairie JavaScript Cross-Domain, mais cette méthode n’est pas la plus courante.

Externe avec OAuth ou confiance faible

L’identification est réalisée par l’application externe (le serveur web distant par exemple) et dans ce cas
SharePoint doit avoir une relation de confiance avec l’application.

Pour établir la relation de confiance il faut créer une confiance (que l’on appelle confiance minimale)
entre l’application et SharePoint en enregistrant l’application par un formulaire dédié que l’utilisateur doit
renseigner.
Lorsque l’application externe dialogue avec SharePoint, elle transmet une trame OAuth contenant un ID
utilisateur et un ID d’application ce qui donne la main à SharePoint pour l’autorisation de l’application ou
de l’utilisateur.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 217


7 Développement de compléments du fournisseur

Externe en utilisant S2S ou confiance forte

L’identification Serveur-to-Server utilise des certificats X.509 pour assurer un très haut niveau de
confiance entre SharePoint et l’application.
Lorsque l’application communique avec SharePoint, elle inclue un jeton signé avec une clé privée. Si
SharePoint peut vérifier la requête a l’aide de la clé public, cela prouve que le serveur distant est de
confiance.

Dans certains cas on peut uniquement donner un ID d’application sans donner celui de l’utilisateur
lorsqu’on veut s’identifier uniquement au travers d’une application dans SharePoint.

2) Configuration d’un complément hébergé par un fournisseur

SharePoint demande une identification de l’application et de l’utilisateur pour autoriser une connexion.
C’est une amélioration par rapport aux SandBox ou Solutions de Batterie qui apporte une sécurité propre
aux applications.

Prise de notes

218 Stéphane LEENHARDT - SupMicro tous droits 2019


7 Développement de compléments du fournisseur
Configuration confiance minimale

Les paramètres à définir dans le « AppManifest » sont les suivants :

Client ID C’est un GUID, qui identifie de manière unique une application. On l’appelle aussi le
« app ID »
Client Secret Chaine permettant un cryptage symétrique qui sera utilisé pour crypter les échanges
Title Le nom affiché de l’application
App Host Nom DNS ou l’application se trouve
Domain

Ces valeurs doivent être connues de SharePoint pour permettre une relation de confiance !

L’utilisateur peut demander à SharePoint via une page dédiée : AppRegNew.aspx d’obtenir des valeurs
auxquels il fera confiance. (/_layouts/16/AppRegNew.aspx)

Cette page enregistre l’App ID, App Secret le Title, le App Domain et éventuellement une page de
redirection qui permet à l’application de demander des autorisations.

On peut également définir les paramètres en Power Shell :

$appDisplayName = "Gestion des Employés"


$clientID = "66142967-91BB-4C50-9B70-06375D5240BC"
$targetWeb = Get-SPSite "http://intranet.koolvoyage.com"
$authRealm = Get-SPAuthenticationRealm -ServiceContext $targetWeb
$AppIdentifier = $clientID + "@" + $authRealm
Write-Host "Ajout d’un principal d’application en cours..."
Register-SPAppPrincipal -NameIdentifier $AppIdentifier -Site $targetWeb.RootWeb
-DisplayName $appDisplayName

Configuration d’une confiance forte

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 219


7 Développement de compléments du fournisseur
• Obtenir un certificat X.509 contenant une clé privée et public et signée par une autorité de confiance
ou signée par soi-même si on est en B2B. (Demande de distribuer un certificat intermédiaire aux
partenaires)
• Installer le certificat X.509 dans SharePoint, il faut enregistrer le certificat pour créer un jeton
sécurisé : Le cmd let New-SPTrustedSecurityTokenIssuer permet d’enregistrer le certificat.
• Intégrer la clé privée dans l’application distante en exportant la clé privée du certificat pour l’installer
sur le serveur distant.

Dans le cas d’un complément du fournisseur développé en ASP.NET il faut ajouter dans le Web.config les
paramètres suivants :

<configuration>
<appSettings>
<add key="ClientId" value="12345678-1234-1234-1234-123456789012" />
<add key="ClientSigningCertificatePath"
value="C:\Certificates\appwebserver.contoso.com.pfx" />
<add key="ClientSigningCertificatePassword" value="Pa$$w0rd" />
<add key="IssuerId" value="12345678-1234-1234-1234-123456789012" />
</appSettings>
</configuration>

Une fois que l’application est identifiée une seconde étape est requise, celle de l’autorisation.

3) Autorisations des compléments du fournisseur

Pour permettre aux administrateurs de mieux contrôler les compléments, le complément demande des
autorisations lors de l’installation que l’on peut refuser ou accepter.

Un complément hébergé par SharePoint a le contrôle total sur le site du complément, mais dans le cadre
d’un complément distant il faut définir les autorisations que le complément souhaite obtenir.

Pour demander quelles sont les permissions dont le complément a besoin, il faut ajouter une section
AppPermissionRequest dans le Manifest :

• Scope. La portée détermine l’étendue sur laquelle l’autorisation est demandée.

On trouve par ordre de grandeur : Tenant, Collection de sites, Site, List, et l’on peut demander l’accès a
certaines fonctions (Recherche, flux d’actualité, Profil utilisateur)

Droit : peut-être Read, Write, FullControl.

Exemples :
<AppPermissionRequests>
<!-- This element request read access to the properties of the host web -->
<AppPermissionRequest
Right="Read" Scope="http://sharepoint/content/sitecollection/web" />
<!-- This element requests write access to all lists in the host web -->
<AppPermissionRequest
Right="Write" Scope="http://sharepoint/content/sitecollection/web/lists" />
Prise de notes

220 Stéphane LEENHARDT - SupMicro tous droits 2019


7 Développement de compléments du fournisseur
<!-- This element request read access to the properties of the tenancy -->
<AppPermissionRequest
Right="Read"
Scope="http://sharepoint/content/tenant" />
<!-- This element request search access without authenticating as the app -->
<AppPermissionRequest
Right="QueryAsUserIgnoreAppPrincipal" Scope="http://sharepoint/search" />
<!-- This element request write access to a user's social networking microfeed -->
<AppPermissionRequest
Right="Write" Scope="http://sharepoint/social/microfeed" />
</AppPermissionRequests>

Si l’utilisateur qui installe le complément ne dispose pas de l’autorisation demandée l’installation echoue.
Par exemple, il n’y a qu’un administrateur qui peut installer une application qui demande un contrôle
total.

Les permissions donné à un complément associe l’app ID et le tenant ID ce qui fait que les autorisations
sont pour une instance données du complément.
(Les permissions d’un complément sont isolées sur une instance et n’ont pas d’impact sur les autres
installations du complément dans d’autres collections ou web app)

4) Développement de compléments du fournisseur

Choix de la technologie

Techniquement n’importe quelle technologie est possible : page HTML, PHP, JSP, ASP.NET, Ruby, Python,
etc…

Etant en environnement Microsoft, il est probable que le choix se portera vers une technologie cohérente
avec SharePoint.

Les choix peuvent être :

Pages Web : avec du code serveur sous forme de blocs serveur, on parle de code mixte. Ces pages sont
développées avec un Framework comme Razor pour aider à la productivité.
Néanmoins ce choix n’est pas pertinent pour des logiques « métiers » très fortes.

Web Form : page ASP.NET séparant la présentation du code métier, compilé en code machine et
permettant de mettre en œuvre des projets complexes et performants.

MVC : par-dessus ASP.NET, il existe ASP.NET MVC ou l’on utilise 3 objets : Model, View, Controller.
Le Controller est l’objet central qui obtient les données du Model pour les transmettre à la Vue.

• Le choix du code Serveur permet :


D’utiliser le Managed CSOM
Les API REST

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 221


7 Développement de compléments du fournisseur
• Le choix du code client s’exécutant dans un navigateur permet :
Le JavaScript CSOM
Les API REST

Le dialogue entre l’application distante et SharePoint se fait par des trame XML et http sur le port 80 ou
443 qui sont standards et ne devraient pas être bloquées par les pare-feu.

Programmer les exigences de sécurité

Pour pouvoir dialoguer avec SharePoint il faut un jeton de sécurité qui sera toujours signé (ou crypté)
pour éviter toute interception.

Il existe différents type de jetons qu’il faut connaitre car c’est au code du complément de programmer le
mode :

Context tokens : utilisée uniquement pour une identification au travers de Oauth et pas S2S. Le jeton de
contexte est transmis par l’ACS (Acces Control Service) et contient l’identité de l’utilisateur, l’identité du
tenant et l’URL du site hôte SharePoint.

Access tokens : un jeton d’accès est transmis par SharePoint quand l’application est identifiée, ce qui
empêche les tentatives de piratage, car le jeton d’accès est donné à partir d’un Refresh Token.

Refresh tokens : un jeton d’accès expire apres 12 heures et pour obtenir un nouveau jeton d’accès il faut
se ré-identifié et cela peut prendre du temps. Pour aller plus vite, on peut stocker le Refresh Token qui
expire apres 6 mois, pour l’utiliser dans la demande d’un nouveau jeton d’accès.
Le Refresh Token peut etre stoké en SGBD ou dans l’application distante.

Méthodes d’identification d’un complément distant

Il existe deux classes qui peuvent être utilisées pour établir la connexion :

SharePointContext et TokenHelper qui permettent d’obtenir un jeton d’accès dans SharePoint.

• Pour utiliser SharePointContext il faut définir les paramètres suivants :


spHostUrl, spAppWebUrl, spLanguage, spClientTag, spProductNumber, userAccessTokenForSPHost,
userAccessTokenForSPAppWeb, appOnlyAccessTokenForSPHost and appOnlyAccessTokenForSPAppWeb

Prise de notes

222 Stéphane LEENHARDT - SupMicro tous droits 2019


7 Développement de compléments du fournisseur

On peut éviter de toujours demander le Realm quand on utilise le SharePointContext (alors que le
TokenHelper le demande toujours) car il est unique pour une batterie SharePoint donnée.

Dans le cas d’Office 365, chaque Tenant à un Realm qui identifie une plateforme de façon unique.

• Obtenir le contexte :
var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);

• Connexion avec les droits de l’utilisateur en cours sur l’hôte SharePoint :


using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
if (clientContext != null)
{ //code pour SharePoint}
}

• Connexion avec les droits de l’utilisateur en cours sur un complément hébergé par SharePoint
using (var clientContext = spContext.CreateUserClientContextForSPAppWeb())
{
if (clientContext != null)
{//code pour SharePoint }
}

• Connexion avec les droits de l’application sur l’hôte SharePoint :


using (var clientContext = spContext.CreateAppOnlyClientContextForSPHost())
{
if (clientContext != null)
{//code pour SharePoint }
}

• Connexion avec les droits de l’application sur un complément hébergé par SharePoint
using (var clientContext = spContext.CreateAppOnlyClientContextForSPAppWeb())
{
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 223


7 Développement de compléments du fournisseur
if (clientContext != null)
{//code pour SharePoint }
}

• Connexion avec une URL sur un site hôte SharePoint avec les droits du complément
var uri = new Uri(webUrl);
var accessToken = TokenHelper.GetAppOnlyAccessToken(
TokenHelper.SharePointPrincipal,uri.Authority,
TokenHelper.GetRealmFromTargetUrl(uri));

using (var clientContext = TokenHelper.GetClientContextWithAccessToken(


uri.ToString(), accessToken.AccessToken))
{
if (clientContext != null)
{ //code }
}

• Connexion avec un Refresh Token existant


var accessToken = TokenHelper.GetAccessToken(“app refresh token”,
TokenHelper.SharePointPrincipal, uri.Authority,
TokenHelper.GetRealmFromTargetUrl(uri));

using (var clientContext = TokenHelper.GetClientContextWithAccessToken(


uri.ToString(), accessToken.AccessToken))
{
if (clientContext != null)
{//code}
}

• Connexion avec un context Token et un access Token


// Store the context token. This is possible because authentication used OAuth.
var contextToken = TokenHelper.GetContextTokenFromRequest(Page.Request);
// Store the host web URL, which is in the SPHostUrl request parameter.
var hostURL = Page.Request["SPHostUrl"];
// Get the client context object by passing the context token.
// Queries through this client context object automatically include the access token.
using (var context = TokenHelper.GetClientContextWithContextToken(hostURL,
contextToken, Request.Url.Authority)) {
// utilisation du CSOM
context.Load(context.Web);
context.ExecuteQuery;
}

• Connexion en mode S2S


string appOnlyAccessToken =
TokenHelper.GetS2SAccessTokenWithWindowsIdentity(_hostWeb, null);

using (ClientContext clientContext =


TokenHelper.GetClientContextWithAccessToken(_hostWeb.ToString(),appOnlyAccessToken))
{ //code pour SharePoint }

Prise de notes

224 Stéphane LEENHARDT - SupMicro tous droits 2019


8 Déploiement et Installation de Compléments

Déploiémént ét installation dé compléménts


Pour qu’un utilisateur puisse ajouter vos compléments il faut le déployer dans un catalogue
d’applications.

Que ce soit un complément SharePoint ou un complément du fournisseur la méthode de déploiement


reste la même : En réalité ce qu’un utilisateur ajoute est toujours un complement SharePoint qu’il soit
SharePoint ou du Fournisseur.

I.Publier le complément

Il existe 2 catalogues d’applications possibles :


Celui de votre entreprise et le SharePoint Store (anciennement Office Store)

1) Pour publier dans le SharePoint Store

• Pour publier un complément dans SharePoint Store, il faut un compte de développeur Microsoft.

Lorsque vous chargez un complément dans SharePoint Store pour le publier, Microsoft effectue un
processus d’approbation : Microsoft vérifie qu’il ne contient pas de virus, que le manifeste est valide et
qu’il contient des éléments dont la portée est limitée au Web.
Le package est également inspecté pour vérifier qu’il ne contient pas de contenu « choquant ».

Une fois la validation réussie, le complément peut être disponible dans la Store.

• Choisir le mode de licence de votre complément


Si le complément est proposé gratuitement, sous forme de version d’évaluation ou s’il doit être acheté ;
Si le complément peut être acquis par utilisateur ou par site.

SharePoint n’applique pas les termes de la licence à l’utilisation des compléments.

Il propose une structure de licence qui permet d’inclure une logique de code dans votre complément pour
appliquer les restrictions de licence de votre choix.

Par exemple, vous pouvez inclure une logique de code dans votre complément qui permet aux utilisateurs
d’accéder à certaines fonctionnalités s’ils disposent d’une licence payante (fonctionnalités auxquelles ils
n’ont pas accès avec une licence d’évaluation).

 Le catalogue d’applications doit être configuré au niveau de votre organisation : l’administrateur


SharePoint peut désactiver le SharePoint Store pour interdire les applications externes à l’organisation.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 225


8 Déploiement et Installation de Compléments

II.Pour publier dans le catalogue de l’entreprise

• Si vous créez des Compléments SharePoint pour votre propre société ou pour un client spécifique
(et non pour un public général), vous souhaiterez les publier dans un catalogue de compléments
interne hébergé sur SharePoint.

Un catalogue de compléments privé correspond à une collection de sites dédiée dans une application
web SharePoint (ou une location SharePoint Online) qui héberge des bibliothèques de documents pour les
Compléments SharePoint et les Compléments Office.

Placer le catalogue dans sa propre collection de sites permet à l'administrateur des applications web ou
à l'administrateur de limiter facilement les autorisations sur le catalogue.

Télécharger un complément SharePoint dans un catalogue de compléments d’entreprise est aussi simple
que de télécharger n’importe quel fichier dans une bibliothèque de documents SharePoint :

Vous devez remplir un formulaire contextuel dans lequel vous indiquez l’URL locale du package du
complément et d’autres informations comme le nom du complément.
Lorsque vous téléchargez le complément dans un catalogue de compléments, il est également vérifié.
S’il ne réussit pas les tests, il est marqué comme non valide ou désactivé dans le catalogue.

Le catalogue d’entreprise doit être configuré dans l’administration SharePoint du tenant Office 365 :
Dans l’Administration SharePoint -> applications (dans le volet de gauche).

1) Créer un catalogue d’application interne

Prise de notes

226 Stéphane LEENHARDT - SupMicro tous droits 2019


8 Déploiement et Installation de Compléments
Le catalogue d’applications est en réalité une nouvelle collection de sites qui va avoir une adresse et qui
sera reliée aux différentes collections de sites du Tenant pour afficher les compléments disponibles.

Lors de la création d’un catalogue d’applications on définit les paramètres suivants :

 Pour obtenir plus d’informations sur le Quota de ressources du serveur :


https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-
2010/gg615462(v%3Doffice.14)
https://blogs.msdn.microsoft.com/johnwpowell/2010/02/28/a-lap-around-sharepoint-2010-
sandboxed-solutions-resource-quotas/

La création de la collection de sites catalogue d’applications

On trouve la page d’accueil suivante sur une collection de sites de type catalogue d’applications :

Cliquez sur Distribuez les applications pour SharePoint, qui est en réalité une bibliothèque de documents
permettant de charger des fichiers *.app :

Télécharger le fichier *.app dans le catalogue d’applications pour SharePoint :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 227


8 Déploiement et Installation de Compléments

Pour ajouter une image, une description et les différentes images d’aperçu il suffit de modifier
l’élément correspondant à votre fichier app dans la bibliothèque Applications pour SharePoint :

En fonction du partage que vous autorisez sur le fichier app, tous les utilisateurs autorisés pourront
ajouter l’application en fonction du partage du fichier app.

Dans la bibliothèque d’application et la collection de sites d’applications vous disposez d’une


bibliothèque Pièces Jointes pour stocker par exemple les images de votre complément.

Le résultat est le suivant pour un utilisateur autorisé à ajouter une application :

Prise de notes

228 Stéphane LEENHARDT - SupMicro tous droits 2019


8 Déploiement et Installation de Compléments

2) Catalogue d’applications de collection de site

Dans Office 365 (uniquement) il est désormais possible de créer un catalogue d’applications limité à une
collection de sites :

Cela permet un contrôle encore plus affiné des applications disponibles sans être obligé de rendre une
application disponible pour toute l’organisation comme c’était le cas avant.

Cette fonction n’est activable qu’a l’aide de commandes PowerShell :


Connect-SPOService ….
$site = Get-SPOSite https://contoso.sharepoint.com/sites/marketing

# create site collection app catalog


Add-SPOSiteCollectionAppCatalog -Site $site
 Ajoute un catalogue d’application pour la collection de sites indiquée

On peut supprimer un catalogue d’application de collection de sites (mais on ne peut pas encore avoir de
liste de tous les catalogues d’applications de collection de site)

$site = Get-SPOSite https://contoso.sharepoint.com/sites/marketing

# disable the site collection app catalog


Remove-SPOSiteCollectionAppCatalog -Site $site

Gouvernance
À l’heure actuelle, il n’est pas possible de répertorier les collections de sites du client dans lesquelles le
catalogue d’applications de collection de sites est activé.

III.Mise à jour de compléments

Vous pouvez mettre à jour votre complément SharePoint en utilisant le support de mise à jour intégré à
SharePoint.

Dans les 24 heures suivant le téléchargement d’une version mise à jour du complément dans le catalogue
de compléments de l’organisation ou l’acceptation du complément dans l’Office Store, une notification
indiquant qu’une mise à jour est disponible apparaît à côté du complément sur la page Contenu du site de
chaque site web où il est installé.

Le diagramme ci-dessous montre le processus de mise à jour, un lien est accessible pour que les
utilisateurs installent immédiatement la mise à jour :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 229


8 Déploiement et Installation de Compléments

Vous ne pouvez pas modifier le type de complément à l’aide du système de mise à jour. Par exemple,
vous ne pouvez pas profiter d’une mise à jour pour transformer un complément hébergé par SharePoint
en complément hébergé par un fournisseur. Pour changer de type, vous devez migrer d’un ancien
complément vers un nouveau complément.

Comment mettre à jour un complément ?

Il suffit de mettre un nouveau numéro de version dans le manifeste de l’application.


Incrémentez le numéro de version dans l’élément App du fichier appmanifest.xml.
Mais ne modifiez pas le numéro ProductID.

Migration d’un ancien complément vers un nouveau

Dans certains cas, vous pouvez créer un tout nouveau complément pour remplacer un ancien
complément, au lieu de mettre à jour le complément d’origine.

Le nouveau complément peut avoir le même nom convivial que l’ancien, mais un nouvel ID de produit
doit lui être attribué dans le manifeste de complément. De plus, il apparaîtra dans l’Office Store public et
sur la page Ajouter un complément des sites web SharePoint en tant qu’élément distinct de la version
d’origine.

Meilleures pratiques pour les mises à jour de complément

• Déterminer si la mise à jour est réellement nécessaire


Pour un complément SharePoint hébergé par un fournisseur, les améliorations apportées au complément
ne nécessitent pas forcément la mise à jour du complément. Si toutes les modifications sont apportées à
des composants distants et qu’elles n’ont pas à être reflétées dans les composants SharePoint, vous
pouvez modifier les composants distants sans mettre à jour le complément. Tant que les URL et les

Prise de notes

230 Stéphane LEENHARDT - SupMicro tous droits 2019


8 Déploiement et Installation de Compléments
chaînes de connexion utilisées par les composants SharePoint pour accéder aux composants distants ne
changent pas, le complément SharePoint continue de fonctionner.

• Penser que la mise à jour est facultative pour les utilisateurs


Lorsqu’une nouvelle version de votre complément SharePoint devient disponible dans l’Office Store ou le
catalogue de compléments de l’organisation, un message apparaît sur la vignette du complément sur la
page Contenu du site et informe les utilisateurs qu’une mise à jour est disponible.
Ce message s’affiche en moins de 24 heures.
Cependant, rien dans l’infrastructure SharePoint n’oblige les utilisateurs à procéder aux mises à jour. Les
modifications que vous apportez aux composants distants ne doivent donc pas « casser » les versions
antérieures du complément.
En règle générale, mais pas de manière universelle, vous pouvez ajouter des éléments aux
composants distants, mais évitez de supprimer, renommer, déplacer ou modifier le schéma, la chaîne
de connexion ou l’URL d’un composant existant.

• Créer et déboguer la nouvelle version comme s’il s’agissait d’un nouveau complément
• Tester la mise à jour avec chaque version antérieure du complément

Mettre à jour un complément sans attendre 24 heures


Il suffit de charger une nouvelle version et d’aller sur un site ou le complément est installé et de faire :

1. Une fois la dernière mise à jour téléchargée sur le catalogue de compléments, ouvrez la page Contenu
du site sur le site web où le complément est installé et cliquez sur le bouton ... sur la vignette du
complément.
2. Dans la légende qui s’affiche, choisissez l’onglet À propos de. Sur la page À propos de qui s’affiche, une
notification indique qu’une nouvelle version est disponible.
3. Choisissez le bouton Obtenir. La page Contenu du site se rouvre et une notification sur la vignette du
complément indique que le complément est en cours de mise à jour.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 231


8 Déploiement et Installation de Compléments

IV. Définition de déploiement spécifiques

Il existe la possibilité de déployer un complément uniquement pour certains sites ou certains modèles de
sites.

Si on utilise cette fonctionnalité, chaque mise à jour du complément sera automatiquement poussée sur
tous les sites qui sont ciblées.

 Pour parvenir à obtenir cette fonctionnalité il faut tout d’abord installer le complément sur le
catalogue d’application :

C’est ce qui va permettre ensuite de contrôler le niveau de diffusion que l’on souhaite.

Prise de notes

232 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

Dévéloppémént dé composants WébPart


I.Introduction aux WebPart

Un WebPart est une application que les utilisateurs autorisés peuvent ajouter sur des pages.

Ces applications fournissent une interface visuelle et une logique de fonctionnement qui permettent
d’enrichir la page avec du contenu dynamique.

• Historiquement dans SharePoint les WebPart ont souvent été le moyen de répondre à une
solution dans le cadre d’un développement.

• Aujourd’hui on trouve 2 grandes catégories de WebPart en fonction de l’expérience d’utilisation :

Les WebPart pour l’expérience classique et ceux pour l’expérience moderne qui sont développés avec
SPFx :

Il y a une exception dans SPFx avec les WebPart puisqu’actuellement c’est le seul type d’application dans
SPFx qui peut être aussi bien utilisé dans l’expérience classique que moderne.

1) Fonctionnement des WebPart Microsoft Serveur

Il existe plusieurs WebPart disponibles dans SharePoint Online et ces WebPart sont gérés et installés par
Microsoft sur leur batterie de serveurs.

Tous les WebPart serveur sont connus par SharePoint grâce à un fichier *.webpart qui doit être ajouté
dans la bibliothèque de document : « Galerie de composants WebPart » qui se trouvent dans le dossier
wp sur le site racine d’une collection de sites.

On accède à cette bibliothèque également par le menu Paramètres du site -> Galerie du concepteur ->
Composants WebPart.

Le WebPart est composé d’un assemblage contenant le code et un fichier .webpart permet de décrire le
composant WebPart pour SharePoint :

<?xml version="1.0" encoding="utf-8" ?>


<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<type name="TypeName, Version=VersionNumber, Culture=neutral,
PublicKeyToken=PublicKeyToken" />
<importErrorMessage>Cannot import this Web
Part.</importErrorMessage>
</metaData>
<data>
<properties>

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 233


9 Développement de WebPart SharePoint Online
<property name="Title" type="string">WebPartTitle</property>
<property name="Description" type="string">WebPartDescription</property>
</properties>
</data>
</webPart>
</webParts>
Le fichier WebPart permet de télécharger un WebPart dans SharePoint, puis de l’ajouter sur la page de
composant WebPart.

 Si vous souhaitez enlever un WebPart aux utilisateurs pour qu’ils ne puissent pas l’ajouter sur une page
il suffit de supprimer les fichiers *.webpart.

Quelques exemples de WebPart standards :

Affiche le contenu d’une liste ou d’une bibliothèque, Affiche l’organigramme de l’organisation,


Permet aux utilisateurs de laisser des notes courtes visibles par tous, Affiche les tâches de l’utilisateur
actuellement connecté, Présente les documents récents de l’utilisateur actuellement connecté,
Affiche le contenu d’un classeur Excel, Visualise une image, ou une page d’un site,
Permet aux utilisateurs autorisés d’entrer du texte libre, Affiche la boîte de réception Outlook de
l’utilisateur actuellement connecté, Affiche un flux RSS.

Mais dans SharePoint Online on n’a plus accès aux traitements serveurs qui sont réservés pour Microsoft.

Essayer d’une façon générale de trouver le WebPart standard et d’essayer de le personnaliser avant
de passer à de la programmation : vous devez être sûr qu’un WebPart standard ne convient pas !

En réalité on peut encore utiliser des solutions SandBox mais elles ne doivent contenir aucun
assemblages : tout doit être déclaratif et uniquement déclaratifs !

Ce que l’on peut encore déployer en solution SandBox sont :


Web parts qui utilise uniquement du JavaScript, Definition de site, Lists, Types de Contenus, Custom
Actions, Eléments de charte graphique (page maitre, fichiers CSS)

SharePoint Online SharePoint 2016 SharePoint 2013 SharePoint 2010

Solution SandBox avec code X non pris en charge X non pris en charge Déprécié X non pris en charge

Solution SandBox sans code Pris en charge Pris en charge Pris en charge Pris en charge

APPS / ADD-INs Pris en charge Pris en charge Pris en charge X non pris en charge

SPFx Pris en charge Pris en charge X non pris en charge X non pris en charge

Solution de Batterie à X non pris en charge Pris en charge Pris en charge Pris en charge
confiance totale

Prise de notes

234 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
Il faut donc dorénavant privilégier dans tous les nouveaux projets de développement du code cote client
uniquement et l’utilisation des nouveaux Framework mis à disposition par Microsoft et les communautés.

2) Avant de développer un WebPart SPFx

La première démarche est de s’assurer qu’il n’existe aucun WebPart qui puisse répondre au besoin dans
ceux proposés par SharePoint en standard :

Parfois il est possible en combinant des WebPart d’arriver au résultat attendu mais ce n’est pas toujours
possible : Tout dépend de l’exigence d’expérience d’utilisation.

Ensuite, il se peut que le WebPart que vous souhaitez existe sur un market store mais le choix dépendra
du cout : bien souvent les WebPart que vous trouverez apporteront plus de fonctionnalités que celles que
vous souhaitez ce qui justifie un cout qui peut être parfois assez élevé.

Pour un développeur il est primordial de connaitre tous les WebPart disponibles, ce qui permet de
justifier un développement spécifique.

II.Les WebPart disponibles

On peut grouper les WebPart selon leur type ou leurs fonctionnalités, ainsi on trouvera des WebPart de
Média et de Contenus, des WebPart d’applications, des WebPart connectés à des fournisseurs.

1) WebPart de Média et de Contenus

Le WebPart de Texte
Il permet d’ajouter du texte et des liens à l’emplacement de votre choix et donne tous les outils pour
formater le texte.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 235


9 Développement de WebPart SharePoint Online

 En cliquant sur … on fait apparaitre le volet de propriétés de ce WebPart qui donne plus de fonctions
de formatage sur le texte ou sur l’ajout de tableau pour la disposition du texte.

Cas d’usage :
Pour afficher un message d’accueil sur la page d’accueil.

Le WebPart Image
Ce WebPart permet d’afficher une image que l’on peut changer en proportion rogner ou ajouter un lien
cliquable.

Pour changer les proportions, Pour Rogner l’image

Le Volet de propriétés de l’image permet :

D’ajouter un lien cliquable si on clique sur l’image.

D’ajouter du texte en superposition de l’image :

Le Texte de remplacement : est utilisé par les appareils de lectures


destinés aux personnes avec handicapes pour informer sur le contenu.

Prise de notes

236 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
Cas d’usage :
Pour afficher un plan, une capture d’écran d’un site avec un lien cliquable.

Le WebPart Espacement
Il permet d’ajouter un espace vertical supplémentaire entre des WebPart.
Cet espace peut être masquée lorsque la page est affichée sur un téléphone pour permettre un affichage
plus lisible sur les grands écrans.

On ajuste la hauteur en déplaçant le barre verticalement, ce qui affiche la hauteur en pixels.

Cas d’usage :
Sur une page d’accueil, permet de séparer les éléments et de mieux mettre en valeur les éléments.

Le WebPart de Lien

 On indique le lien souhaité dans la zone de texte suivante :

Lorsqu’une adresse est indiquée, le WebPart charge un aperçu du contenu :

 Le résultat final étant le suivant :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 237


9 Développement de WebPart SharePoint Online

Exemple d’un lien qui pointe vers une vidéo :


 Si on clique un nouvel onglet affiche la vidéo en plein écran.

Cas d’usage :
Pour afficher un lien vers une vidéo YouTube ou vers un site important.

Le WebPart Séparateur
Il permet d’ajouter une ligne horizontale permettant de séparer 2 WebPart qui ne seraient pas distingués
correctement à l’affichage.

Exemple : Pour séparer le texte d’accueil du contenu suivant :

Cas d’usage :

Prise de notes

238 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
Pour séparer des éléments qui seraient mal distingués par l’affichage.

Le WebPart Sites
Il permet d’afficher des vignettes vers les sites que vous souhaitez.
Les vignettes donnent un aperçu de chaque site et peuvent être disposées horizontalement ou replacer
verticalement en fonction de l’espace disponible sur la page (et de la taille de l’écran)

Le volet de propriétés de ce WebPart affiche les paramètres


suivants :

On peut chercher un site par son Titre, attention à ne pas


mettre l’adresse d’un site mais il faut mettre son titre tel
qu’il est affiché sur la page d’accueil du site en question.
On peut choisir les sites fréquents ou récents.

La disposition permet de changer la façon dont le WebPart


se réduira ou sera redisposé en fonction de la taille de
l’écran.
Exemple en mode pellicule avec un petit écran :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 239


9 Développement de WebPart SharePoint Online
On défile horizontalement en cliquent sur points.

Les avantages de ce WebPart sont d’afficher le logo du site, son titre et les dernières activités sur le site.

Cas d’usage :
Pour permettre aux utilisateurs d’avoir une meilleure idée d’un lien vers un site avant de cliquer sur le
lien.

Le WebPart Liens Rapides

Ce WebPart permet d’afficher une liste de lien, et d’associer une image à chaque lien si on le souhaite.

Il propose 2 types d’affichages qui peut être Compact ou Pellicule.

L’exemple suivant affiche le mode Compact :

Le même WebPart affiché en mode pellicule donnera le résultat suivant :

On passe d’un lien à l’autre en cliquant sur les flèches ou les points : On affiche 1 lien uniquement mais
cela permet d’afficher l’image en taille plus grande.

L’affichage en mode pellicule dépend de l’espace disponible en largeur, ce qui implique que si l’écran
est petit, la section sera déplacée et peut être de largeur plus grande sur un petit écran par rapport à un
grand écran. Le résultat peut très bien être le suivant sur un petit écran :

Cas d’usage :
Lorsqu’on souhaite afficher un nombre important de liens sur une page d’accueil par exemple.
Prise de notes

240 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

Le WebPart Graphique Rapide


Ce WebPart permet d’afficher un graphique soit de type Colonne ou Secteur avec un maximum de 12
valeurs.

Ce WebPart n’obtient pas les données dynamiquement, il faut les saisir manuellement. Il est donc
d’un usage limité aux cas ou les données peuvent/doivent être saisies et mise à jour manuellement.
Pour afficher des graphiques dynamiques, il faut utiliser Power BI.

 Pour définir les propriétés de ce WebPart, dans le volet de propriétés on trouve :

Pour définir le titre des axes Pour définir les valeurs :

 Le résultat étant le suivant à l’affichage :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 241


9 Développement de WebPart SharePoint Online
Avantages :
Il est très simple à utiliser, et produit un graphe
de données plus visuel pour un utilisateur

Inconvénients :
Il faut saisir les valeurs manuellement.

Cas d’usage :
Lorsqu’on souhaite donner une information synthétique sur des données brutes qui ne proviennent pas
de sources de données existantes.

Le WebPart Visionneuse de Fichier


Ce WebPart permet d’afficher le contenu d’un fichier en visualisation directement dans la page.

Cela est rendu possible par l’utilisation des services web d’Office ce qui permet d’afficher directement en
ligne différents types de documents Office : Word, Excel, PowerPoint, Viso, PDF,3D, etc…

Selon le type de document que vous allez charger, les options du volet de propriétés ne seront pas les
memes !
• Pour un document Word
On indique quel page afficher en premier.

Exemple d’affichage d’un document Word :

Prise de notes

242 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

• Pour un fichier Excel


On peut choisir d’afficher un classeur, un
graphique uniquement, un tableau ou une plage
de cellule.

L’option Graphique permet d’afficher un


graphique dont les données proviennent du
fichier Excel chargé dans SharePoint. Cela permet
d’avoir un graphique plus dynamique finalement
qu’avez le WebPart Graphique Simple.
Il faut néanmoins modifier manuellement les
valeurs dans le fichier Excel, mais on n’a pas
besoin de modifier le WebPart pour changer les
valeurs du graphique.

 Exemple de Graphique affiché à partir d’un fichier Excel :

• Pour une présentation PowerPoint


On peut choisir la 1ere diapositive à afficher en
premier à l’écran.

 Exemple d’affichage de PowerPoint :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 243


9 Développement de WebPart SharePoint Online

• Pour un fichier PDF


On peut choisir le numéro de page a afficher en
premier.

L’utilisateur peut afficher toute la page ou un


facteur de zoom qui ne sera pas conservé pour
l’affichage par défaut aux utilisateurs.

Cas d’usage :
Pour afficher en ligne le contenu d’un document Word (Note de Service, Règles ou Procédures de
sécurité), PowerPoint, Excel ou un graphique Excel sans passer par le WebPart Graphique Rapide.

Le WebPart Bannière Principale

Ce WebPart permet de placer le focus et un intérêt visuel à sur la page.


Il permet d’afficher une image avec un lien vers un document, une page ou une image.

Prise de notes

244 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
Les propriétés de ce WebPart permettent de
changer la disposition en vignettes ou en couches
et de choisir une mise en page parmi 5
dispositions.

Exemple de disposition possible :

 Lorsque vous avez ajouté un lien dans une case, vous pouvez ensuite éditer les propriétés de la case :

Il faut cliquer sur le crayon qui se trouve en bas à


droite de la case :

Et le volet de propriétés correspondant à la case


apparait, toujours a droite de l’écran :

Lien : On peut changer le lien ou faire apparaitre


un texte en bas de la case.

Image : Permet de laisser la prévisualisation si elle


est disponible ou de définir l’image que l’on
souhaite afficher.

Options : on peut afficher le lien d’appel d’action,


en réalité c’est juste un message pour informer
l’utilisateur que s’il clique il va ouvrir le contenu
du lien.

Cas d’usage :
Ce composant est parfaitement approprié pour garnir la page d’accueil de votre site !

Le WebPart Propriétés de la page


Il permet d’afficher des propriétés de la page : C’est-à-dire des valeurs qui existent et qui sont définies
pour une page.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 245


9 Développement de WebPart SharePoint Online
En réalité ces propriétés proviennent des colonnes qui seraient ajoutées à la bibliothèque qui contient les
pages ou au type de contenu associée à la page.
Les usages sont donc assez spécifiques, car il convient d’avoir organisé au préalable un classement sur les
pages en définissant des nouvelles propriétés.

Par défaut, toutes les pages possèdent une propriété qui est le titre de la page :

Cas d’usage :
Vous avez un grand nombre de pages et vous avez défini des propriétés pour les organiser/classifier. Vous
pouvez afficher sur chaque page les valeurs de ces propriétés.

Prise de notes

246 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
2) WebPart de Listes et de Bibliothèques
Ce sont des WebPart qui affichent plusieurs éléments selon différents modes d’affichages en fonction du
type de WebPart que vous ajoutez.

Le WebPart Contenu mis en évidence

Ce WebPart permet d’afficher des éléments de différentes sources et d’appliquer des filtres pour
n’afficher que ce que l’on souhaite mettre en évidence justement.

Il permet d’affiner les résultats en proposant plusieurs options de paramétrages qui sont les suivantes :
• Contenu
Source :
Ce site, une bibliothèque sur ce site, cette
collection de sites, La bibliothèque de pages sur
ce site, Sélectionnez des sites, Tous les sites.

On peut obtenir des contenus internes aussi


bien que sur les autres sites.

Bibliothèque de documents :
On peut sélectionner une bibliothèque si on a
choisi en source une bibliothèque de documents.

Type de document :
Permet de choisir n’importe quel type de contenu
que l’on souhaite afficher.

• Filtrer et trier
Filtre :
Le titre inclut des mots -> on indique les mots à
chercher.
Récemment ajouté, Récemment modifié -> on peut
choisir une plage (aujourd’hui, hier, cette semaine,
ce mois, le mois dernier, cette année, l’année
dernière)
Cree par, Modifié par -> utilisateur actuel ou on
choisit un ou plusieurs utilisateurs
Nom de colonne -> permet de faire une condition
Egal à, Différent de, Commence par et Contient.

Trier par :
Les plus récentes, Auteur, Nom, Titre

Les filtres s’ajoutent en inclusion, c’est-à-dire


sous la forme de ET

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 247


9 Développement de WebPart SharePoint Online
• Disposition
Carte :
Affiche une prévisualisation des éléments sous
forme de carrés.

Liste :
Affiche les éléments en liste, comme un tableau

Carrousel :
Affiche un élément à la fois que l’on défile
horizontalement

Pellicule :
Affiche plusieurs éléments que l’on défile
horizontalement

• Exemples d’affichages pour une bibliothèque de documents

Disposition Carte :

L’affichage est par défaut sur 3 colonnes sur un grand écran mais se réduit en fonction de la taille de
l’écran.

Disposition Liste :

Prise de notes

248 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

Affiche un tableau que l’on ne défile pas verticalement puisqu’il affiche le nombre exact d’éléments qui
sont indiqués.

Disposition Carrousel :

Un élément à la fois et on défile en cliquant sur les flèches a droite ou à gauche : Cela permet d’afficher
une prévisualisation plus grande de chaque contenu.

Disposition Pellicule :

Affiche une série d’éléments avec prévisualisation que l’on défile à droite ou à gauche.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 249


9 Développement de WebPart SharePoint Online
Le WebPart Bibliothèque d’image
Il permet d’afficher des images qui peuvent provenir d’une bibliothèque d’images ou d’autres sources.

On peut définir le mode d’affichage entre


Vignettes et Carrousel dans le volet de propriétés.

On peut également définir des proportions


d’affichage.

Ce WebPart est utile lorsque vous avez des images


que vous souhaitez afficher directement sur une
page.

Sur chaque image que vous avez ajoutée dans la liste on peut éditer les informations de chaque image :

En cliquant sur le Crayon de chaque image on affiche le volet de propriétés de l’image en question :

Pour chaque image on peut définir un Titre, une


légende et un texte de remplacement.

Le titre et la légende ne sont affichées que si


vous êtes en mode d’affichage Carrousel.

Le texte de remplacement n’est utilisé que pour


les appareils destinés aux personnes mal-
voyantes et qui disposent d’un appareil de lecture
du contenu.

Cas d’usage :
Afficher les photos d’un évènement, des plans, des logos autorisés par le marketing.

Le WebPart de Bibliothèque de documents

Prise de notes

250 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
Ce WebPart permet d’afficher une bibliothèque de documents de votre site sur la page et permet aux
utilisateurs d’atteindre les documents directement depuis une page sans avoir à naviguer vers la
bibliothèque.

Dans le volet de propriétés de ce WebPart on peut définir :

La bibliothèque que l’on souhaite afficher.

L’affichage que l’on souhaite sélectionner, ce qui permet de créer


en amont un affichage spécial pour afficher les fichiers de la
bibliothèque sur une page avec un mode synthétique.

On peut afficher le contenu d’un dossier et choisir la taille


souhaitée :
Soit un dimensionnement automatique ou alors une taille fixée
pour afficher 5 ou 15 ou 30 éléments.

Cas d’usage :
Pour mettre en évidence sur une page d’accueil les documents importants que vous souhaitez mettre en
avant.

Le WebPart de Liste

Le WebPart de liste permet d’afficher une liste Personnalisée uniquement.


Vous ne trouverez que les listes personnalisées lorsque vous ajouterez ce type de WebPart sur une page.

Le volet de propriétés du WebPart permet de :

Changer la liste (personnalisée) que l’on affiche.

Choisir l’affichage que l’on souhaite utiliser.

Filtrer sur un dossier (s’il existe)

Choisir une taille d’affichage : Automatique,


5,15,30

Exemple d’affichage :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 251


9 Développement de WebPart SharePoint Online

Cas d’usage :
La liste personnalisée est une façon de créer des formulaires de saisies de données :
Ce WebPart est lié à une liste personnalisée qui est utilisée pour les listes de données métier : il sera donc
ajouté dès lors qu’on a besoin d’une liste particulière avec un traitement métier propre.

Le WebPart Evènements

Ce WebPart permet d’afficher un Calendrier en choisissant un calendrier préalablement crée.

Le volet de propriétés affiche les paramètres suivants :

Liste d’évènements : Permet de choisir le calendrier existant.

Catégorie : Filtre les éléments du calendrier en fonction de la


catégorie affectée.

Pour choisir une catégorie autre que « Toutes » il faut des


éléments enregistrés avec une valeur pour la catégorie.

Plages de dates : Permet de filtrer les évènements à afficher.

• Exemple d’affichage d’un calendrier

Prise de notes

252 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

Si on clique sur « Afficher tout », on navigue vers une page permettant de définir la plage que l’on
souhaite afficher :

Le WebPart Actualités
Ce WebPart affiche les pages de Publication d’actualités qui sont des nouvelles pages que vous pouvez
ajouter sur un site pour informer de ce qu’il se passe.

Pour ajouter une page de Publication d’actualités


il suffit d’aller sur le menu Nouveau :

La page de Publication d’actualités est une page


comme une autre, mais elle est prévue pour être
affichée par le WebPart Actualité.

Pensez à ajouter une image dans l’entête de la


page d’actualités car c’est elle qui sera utilisée
pour afficher une image à votre actualité.

Ce WebPart s’affiche avec différents modes et utilise un mode d’affichage par défaut qui change en
fonction du type de site sur lequel vous vous trouvez :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 253


9 Développement de WebPart SharePoint Online
Sur un site d’équipe l’affichage par défaut est le « Articles à la une » alors que sur un site de
Communication il sera « Cote-à-côte ».

Source des actualités :

Cela peut venir de votre site ou un ou plusieurs sites externes,


mais attention il faut que ces sites publient des pages
d’actualités !

Disposition :
Article à la une : affiche le dernier article en plus grand que les
autres.
Liste, cote-a-cote et actualité du hub seront présentés ci-dessous.

Filtrer :
Le titre inclut des mots -> on indique les mots à chercher.
Récemment ajouté, Récemment modifié -> on peut choisir une
plage (aujourd’hui, hier, cette semaine, ce mois, le mois dernier,
cette année, l’année dernière)
Cree par, Modifié par -> utilisateur actuel ou on choisit un ou
plusieurs utilisateurs
Propriétés de la page -> permet de faire une condition Egal à,
Différent de, Commence par et Contient sur la propriete que l’on
souhaite de la page.

Exemples d’affichages
• Articles à la une

Affiche le dernier article en principal et les 3 précédents articles en liste à droite.

• Liste
Permet de choisir le nombre d’éléments à afficher de 1 à 8

Prise de notes

254 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

La liste affiche le nombre d’éléments qui sont définis sans ascenseur.

• Cote-a-cote :
Lorsqu’on sélectionne ce mode sur une page d’accueil, l’espace disponible n’est pas suffisant pour
qu’il affiche le mode Cote-a-cote : il affichera les éléments sous forme de liste. En revanche si on crée
une nouvelle page et qu’on place le WebPart sur une section lui donnant de l’espace, alors le mode
fonctionnera correctement.

Sur une page ou l’espace est réduit (Page Sur une page avec suffisamment d’espace
d’accueil)

Le mode cote-a-cote s’affiche comme une Le mode cote-a-cote affiche 2 colonnes et 4 actualités
liste

• Actualités du Hub
En fonction de l’espace disponible affiche sous forme de vignette de 1 a 4 actualités et les autres sous
forme de liste réduites à droite :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 255


9 Développement de WebPart SharePoint Online

Sur une page qui donne plus d’espace au WebPart l’affichage est le suivant :

3) WebPart prédéfinis pour un usage précis


Le WebPart Incorporation
Ce WebPart permet d’inclure des morceaux de contenus provenant d’autres sites et en particulier de sites
Internent comme YouTube, google, sway, bing, etc…
Pour connaitre la liste des sites autorisés sur votre espace allez dans :
Paramètres du site -> [Section] Administration de la collection de sites -> Sécurité des champs HTML.
Vous trouverez la liste de tous les domaines autorisés à permettre des inclusions de contenus.

• Par exemple pour intégrer une vidéo YouTube procéder de la façon suivante :

 Cliquez sur PARTAGER

Prise de notes

256 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
 Choisir Intégrer et copiez tout le bloc
de texte qui commence par :
<iframe>….. et se termine par </iframe>

 Coller le texte dans la propriete


« Adresse du site web ou code
incorporé » du WebPart Incorporation

Exemple de résultat pour une vidéo YouTube :

Le WebPart Documents Récents


Ce WebPart affiche les derniers documents que l’utilisateur actuel a utilisés.
On peut fixer le nombre de documents à afficher, avec l’affichage suivant :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 257


9 Développement de WebPart SharePoint Online

Cas d’usage :
Cela évite à l’utilisateur de se souvenir ou se trouve les derniers documents qu’il a modifiés ou crées.

Le WebPart Activité du site


Ce WebPart affiche des cartes qui informent sur les dernières actions faites sur le site :

Chaque carte correspond à un ensemble d’actions réalisées sur le site, ce qui offre une synthese des
dernières activités.

Le WebPart Météo
Il permet d’indiquer la ville et affiche la météo à partir du service de météo de MSN :

Prise de notes

258 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

Le WebPart Bing Cartes


On indique une adresse et le WebPart affiche la carte à partir du service de cartographie Bing
l’emplacement indiqué :

4) WebPart Connectés à des fournisseurs

Il existe un certain nombre grandissant de WebPart qui se connectent à des fournisseurs qui peuvent être
Microsoft ou externes.
Chaque fournisseur est un environnement avec ses propres règles d’utilisations et dépasse le cadre de la
formation SharePoint au sens propre.
On notera que si le besoin d’obtenir des données dans un site SharePoint d’un fournisseur autres que
SharePoint cela est possible pour les sources suivantes :

Sources appartenant à Microsoft : GitHub et GitHub Enterprise (stockage de code source) , Power BI,
Power App, WunderList, etc…
Sources autres : Facebook, Kindle (livre électronique Amazon) , Asana (suivi de projet), BitBucket et
BitBucket Server (suivi de projet) , Google Analytics, JIRA (gestion de projet en méthode AGILE)
SalesForce (outil de CRM), Stack Overflow (base de questions/réponses) , Trello (gestion de projet) ,
Twitter, etc…

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 259


9 Développement de WebPart SharePoint Online
5) Développement de WebPart sans SPFx
Injection JavaScript
L’un des composants WebPart les plus populaires de SharePoint Online est l’éditeur de script.
Vous pouvez l’utiliser pour coller du code JavaScript dans le composant WebPart de l’éditeur de script et
exécuter ce code lorsque la page est rendue. Une méthode simple et élémentaire, mais efficace. Le code
s’exécute dans le même contexte de navigateur que la page et se trouve dans le même DOM, ce qui lui
permet d’interagir avec d’autres contrôles sur la page. Il est également relativement performant et facile
à utiliser.

Cette approche comporte cependant quelques inconvénients :


Tout d’abord, bien que vous puissiez mettre votre solution en package pour que les utilisateurs finals
puissent déposer le contrôle sur la page, il n’existe pas de moyen simple de fournir des options de
configuration.

En outre, l’utilisateur final peut modifier la page et modifier le script, ce qui peut endommager le
composant WebPart.

Un autre problème est que le composant WebPart Éditeur de script n’est pas marqué comme « Sûr pour
l’écriture de scripts ».
Sur la plupart des collections de sites en libre-service (Mes sites, sites d’équipe, sites de groupe), une
fonctionnalité appelée « NoScript » est activée. Techniquement, il s’agit de la suppression de
l’autorisation Ajouter/Personnaliser des pages dans SharePoint.
Cela signifie que l’exécution du composant WebPart Éditeur de script est bloquée sur ces sites.

Modèle de complément ou d’Add-In SharePoint


L’option actuelle pour les solutions exécutées dans des sites de type NoScript est le modèle de
compléments/composants d’application. Cette implémentation crée un iFrame qui abrite et exécute
l’expérience elle-même. L’avantage est que, étant donné qu’elle externe au système et n’a pas accès à la
connexion/au DOM actuel, elle est plus fiable et plus facile à déployer pour les informaticiens.
Les utilisateurs finaux peuvent installer des compléments sur les sites NoScript.

Cette approche comporte cependant des inconvénients :


Tout d’abord, les compléments s’exécutent dans un iFrame.
Les iFrames sont plus lents que le composant WebPart Éditeur de script, car ils requièrent une nouvelle
demande vers une autre page. Cette page doit passer par le processus d’authentification et
d’autorisation, effectuer ses propres appels pour obtenir les données de SharePoint, charger différentes
bibliothèques JavaScript, et plus encore.

Un composant WebPart Éditeur de script mettra généralement autour de 100 millisecondes pour charger
et rendre le contenu, tandis qu’un composant d’application peut mettre 2 secondes ou plus.

En outre, la limite de l’iFrame complique la création de conceptions réactives, ainsi que l’héritage du CSS
et des informations de thème. En revanche, les iFrames offrent une meilleure sécurité, ce qui peut être
utile pour vous (votre page n’est pas accessible par les autres contrôles sur la page) et pour l’utilisateur
final (le contrôle n’a pas accès à leur connexion à Office 365).
Prise de notes

260 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

6) Rôle et importance des WebPart

Le WebPart est un composant que l’on ajoute à la demande sur une page :
L’utilisateur final peut décider d’ajouter plusieurs WebPart sur une page, plusieurs fois le même type de
WebPart et dans les zones de son choix.

Pour un développeur un WebPart est un développement qui doit répondre à un besoin générique et qui
puisse être reproductible :
• Il n’y a pas d’intérêt à développer un WebPart pour une utilisation unique sur une page et qui
répondrait à un besoin métier bien précis et ponctuel.

Cependant, sur des projets il arrive qu’on développe des WebPart pour un besoin précis car c’est une
solution de facilité :

On trouve de nombreux exemples et documentations autour du développement de WebPart car c’est la


méthode la plus simple pour apporter aux utilisateurs des nouvelles fonctionnalités dans SharePoint.

• La plupart des éditeurs tiers développent des WebPart pour SharePoint :


Il existe un Market place ou l’on peut acheter des WebPart et si vous identifiez un besoin que vous
souhaitez couvrir par un développement il est fort probable que vous choisirez de développer un
WebPart.
Market place d’applications Microsoft :
https://appsource.microsoft.com/en-us/marketplace/apps?product=sharepoint
Et le SharePoint Store :
Que l’on trouve s’il est activé lors de l’ajout de nouvelles
applications :
Attention la plupart des projets disponibles ciblent
l’expérience classique.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 261


9 Développement de WebPart SharePoint Online

III.Méthodes de développement de WebPart

Etant donné l’importance de ce type de projet, il est important de bien comprendre comment développer
un WebPart et comment l’enrichir pour apporter l’expérience d’utilisation que l’on peut attendre.

1) Démarche de développement d’un WebPart

Mise en place du squelette et du projet

 On choisit un dossier pour stocker le projet et on se positionne dessus


md helloworld-webpart
cd helloworld-webpart

 On lance ensuite le générateur Yeoman pour créer le squelette


yo @microsoft/sharepoint

Dans les options on décide :

À ce stade, Yeoman installe les dépendances requises et établit la structure des fichiers de la solution avec
le composant WebPart HelloWorld. Cette opération peut prendre quelques minutes.

 Une fois le projet généré on peut directement le tester dans un environnement local ou distant :

(Approuver le certificat du développeur si ce n’est pas déjà fait)

Pour tester des WebPart, nous avons un environnement qui s’appelle le WorkBench qui peut être local ou
distant :

• SharePoint Workbench est un espace de conception pour développeurs qui vous permet de pré
visualiser et de tester rapidement des composants WebPart sans les déployer dans SharePoint.

Prise de notes

262 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
• SharePoint Workbench inclut la page côté client et la zone d’affichage côté client dans lesquelles
vous pouvez ajouter, supprimer et tester vos composants WebPart en cours de développement.

Le Workbench distant se trouve dans */_layouts/15/workbench.aspx :

2) Structure du projet

HelloWorldWebPart.ts dans le dossier src\webparts\helloworld définit le point d’entrée principal du


composant WebPart.
La classe de composant WebPart HelloWorldWebPart étend la classe BaseClientSideWebPart.
Un composant WebPart côté client doit étendre la classe BaseClientSideWebPart afin d’être défini
comme un composant WebPart valide.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 263


9 Développement de WebPart SharePoint Online
BaseClientSideWebPart implémente les fonctionnalités minimales requises pour générer un composant
WebPart : Cette classe fournit également de nombreux paramètres pour valider des propriétés en lecture
seule et y accéder, telles que displayMode, les propriétés de composant WebPart, le contexte du
composant WebPart, la valeur instanceId du composant WebPart, la valeur domElement du composant
WebPart et bien plus encore.

On remarque que la classe de composant WebPart est définie pour accepter un type de propriété
IHelloWorldWebPartProps : Le type de propriété est défini comme une interface avant la classe
HelloWorldWebPart dans le fichier HelloWorldWebPart.ts.

export interface IHelloWorldWebPartProps {


description: string;
}
Cette définition de propriété est utilisée pour définir des types de propriétés personnalisés pour votre
composant WebPart.

Méthode de rendu du composant WebPart

L’élément DOM dans lequel le composant WebPart doit être affiché est disponible dans la méthode
render. Cette méthode est utilisée pour créer le rendu du composant WebPart à l’intérieur de cet
élément DOM. Dans le composant WebPart HelloWorld, l’élément DOM est défini sur un DIV. Les
paramètres de la méthode incluent le mode d’affichage (lecture ou modification) et les propriétés du
composant WebPart configuré, le cas échéant :

public render(): void {


this.domElement.innerHTML = `
<div class="${ styles.helloWorld }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Welcome to SharePoint!</span>
<p class="${ styles.subTitle }">Customize …Web Parts.</p>
<p class="${ styles.description }">
${escape(this.properties.description)}</p>
<a href="https://aka.ms/spfx" class="${ styles.button }">
<span class="${ styles.label }">Learn more</span>
</a>
</div>
</div>
</div>
</div>`;
}

Configuration du volet de propriétés du composant WebPart


Le volet de propriétés est défini dans la classe HelloWorldWebPart.
La propriété getPropertyPaneConfiguration permet de définir le volet de propriétés.

Lorsque les propriétés sont définies, vous pouvez y accéder dans votre composant WebPart à l’aide de
this.properties.<property-value> , comme indiqué dans la méthode render :

Prise de notes

264 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
<p class="${styles.description}">${escape(this.properties.description)}</p>

3) Liaison d’un WebPart avec des données SharePoint

Lorsque Workbench est hébergé localement, vous ne disposez pas du contexte de la page SharePoint.
Vous pouvez toujours tester votre composant WebPart de différentes façons. Par exemple, vous pouvez
vous concentrer sur la création de l’expérience utilisateur du composant WebPart et utiliser des données
fictives pour simuler l’interaction avec SharePoint lorsque vous n’avez pas le contexte SharePoint.

En revanche, lorsque Workbench est hébergé dans SharePoint, vous avez accès au contexte de la page,
qui fournit plusieurs propriétés clés, telles que :
• Le titre du site web
• L’URL absolue du site web
• L’URL relative au serveur du site web
• Le nom de connexion de l’utilisateur

Pour obtenir le contexte de page :


this.context.pageContext

Comment tester des données localement que nous n’avons pas ?


Pour tester l’instance Workbench local, il vous faut une banque de données fictive qui renvoie des
données fictives.

Dans le dossier webparts/nomduwebpart ajoutez un fichier Type Script qui va servir à générer des
données fictives :

import { ISPList } from './HelloWorldWebPart';

export default class MockHttpClient {

private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },


{ Title: 'Mock List 2', Id: '2' },
{ Title: 'Mock List 3', Id: '3' }];

public static get(): Promise<ISPList[]> {


return new Promise<ISPList[]>((resolve) => {
resolve(MockHttpClient._items);
});
}
}

Éléments à noter concernant le code :


• HelloWorldWebPart.ts contient plusieurs instructions export ; pour spécifier celle que vous devez
importer, utilisez { } . Dans ce cas, seul le modèle de données ISPList est obligatoire.
• Vous n’avez pas besoin d’entrer l’extension de fichier lors de l’importation à partir du module par
défaut, ici : HelloWorldWebPart.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 265


9 Développement de WebPart SharePoint Online
• Il exporte la classe MockHttpClient comme module par défaut afin qu’il puisse être importé dans
d’autres fichiers.
• Il crée le tableau fictif ISPList initial et renvoie une valeur.

Dans le code du WebPart ajoutez les instructions suivantes :

import MockHttpClient from './MockHttpClient';

Une fonction qui va appeler la méthode fictive :

private _getMockListData(): Promise<ISPLists> {


return MockHttpClient.get()
.then((data: ISPList[]) => {
var listData: ISPLists = { value: data };
return listData;
}) as Promise<ISPLists>;
}

Appeler des données SharePoint réelles

Dans le code du WebPart on ajoute les import suivant :

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

Et une fonction qui va obtenir les données en appel REST :


private _getListData(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl +
`/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}

Pour faire la distinction entre l’environnement locale ou distant on importe la classe Environnement

import { Environment, EnvironmentType} from '@microsoft/sp-core-library';

On ajoute une méthode de rendu des éléments de la liste :

private _renderList(items: ISPList[]): void {


let html: string = '';
items.forEach((item: ISPList) => {
html += `
<ul >
<li >
<span class="ms-font-l">${item.Title}</span>
</li>
</ul>`;
});

Prise de notes

266 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}

Enfin on ajoute une fonction qui va adapter le rendu en fonction de l’environnement :

private _renderListAsync(): void {


// Local environment
if (Environment.type === EnvironmentType.Local) {
this._getMockListData().then((response) => {
this._renderList(response.value);
});
}
else if (Environment.type == EnvironmentType.SharePoint ||
Environment.type == EnvironmentType.ClassicSharePoint) {
this._getListData()
.then((response) => {
this._renderList(response.value);
});
}
}

Dans le rendu du WebPart il ne reste plus qu’à appeler la fonction :


this._renderListAsync();

IV. Ajout de propriétés personnalisées

Les WebPart ont toujours eu un volet de propriétés qui permet aux utilisateurs de définir des propriétés
spécifiques au WebPart sur lequel on se trouve :

Que ce soit en expérience classique ou en expérience moderne, un volet de propriétés permet de


configurer un WebPart.

1) Implémenter un volet de propriétés

Un volet de propriétés est composé de 3 éléments principaux :

• 1) Pages: une page séparée qui représente le volet


Vous offrent la souplesse nécessaire pour séparer des interactions complexes et les placer dans une ou
plusieurs pages. Les pages contiennent un en-tête et des groupes.
• 2) Headers, le titre du WebPart
• 3) Groups, qui sont les sections du volet de propriétés
Permet de définir les différentes sections ou différents champs du volet de propriétés, au
moyen desquels vous voulez regrouper vos ensembles de champs.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 267


9 Développement de WebPart SharePoint Online

Les champs que l’on peut ajouter dans les groupes sont typés et actuellement est disponible :

• Label, pour afficher du texte dans une étiquette


• Textbox, saisie de texte simple
• Multi-line textbox, saisie de texte sur plusieurs lignes
• Checkbox, case à cocher simple
• Dropdown, Liste de choix
• Link, pour une URL cliquable
• Slider, variateur pour sélectionner ne valeur
• Toggle, bouton On/Off
• Règle horizontale
• Custom, pour un type personnalisé

Les types de champs sont disponibles sous forme de modules dans sp-client-platform. Ils nécessitent une
instruction import pour que vous puissiez les utiliser dans votre code :
import {
PropertyPaneTextField,
PropertyPaneCheckbox,
PropertyPaneLabel,
PropertyPaneLink,
PropertyPaneSlider,
PropertyPaneToggle,
PropertyPaneDropdown
} from '@microsoft/sp-webpart-base';

Les types PropertyPane+FieldType se trouvent dans sp-webpart-base dans le dossier


node_module/@microsoft/sp-webpart-base

Le volet de propriétés comporte deux modes d’interaction :


• Réactif
Prise de notes

268 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
• Non réactif
En mode réactif, chaque modification déclenche un événement de modification. Le comportement réactif
met automatiquement à jour le composant WebPart avec les nouvelles valeurs.

Bien que le mode réactif soit suffisant dans de nombreux cas de figure, vous devez parfois utiliser le
comportement non réactif.

Le mode non réactif n’actualise pas le composant WebPart automatiquement à moins que l’utilisateur
confirme les modifications.

Pour activer le mode non réactif, ajoutez le code suivant dans votre composant WebPart :
protected get disableReactivePropertyChanges(): boolean {
return true;
}

2) Ajouter de nouvelles propriétés dans le volet

On localise la méthode: getPropertyPaneConfiguration

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {


return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}]}]};}

La valeur dans PropertyPaneTextField(‘targetProperty‘) est l’identifiant que vous donnez à une propriété :
targetProperty définit l’objet associé pour ce type de champ et est également défini dans l’interface de
propriétés de votre composant WebPart.

{
groupName: "Custom group",
groupFields: [
PropertyPaneTextField('textboxFieldMessage', {
label: "Message de bienvenue"
})
]
}

groups: [

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 269


9 Développement de WebPart SharePoint Online
{groupName: strings.BasicGroupName,
groupFields: [PropertyPaneTextField('description', {label:
strings.DescriptionFieldLabel})]},
{groupName: "Custom group",groupFields: [PropertyPaneTextField('textboxFieldMessage',
{label: "Message de bienvenue"})]}
]

On définit une interface pour déclarer la propriété :

export interface IHelloWorldWebPartProps {


targetProperty: string
}

Elle est ainsi disponible :


Dans le composant WebPart à l’aide de this.properties.targetProperty.

<p class="ms-font-l ms-fontColor-white">${this.properties.targetProperty }</p>

On peut également ajouter plusieurs pages dans le volet de propriétés :

Il suffit d’ajouter un nouveau bloc dans pages et de définir l’entête et les propriétés.

Dans ce cas le WebPart affichera une flèche de défilement pour les différentes pages :

La liste des types prédéfinis ne conviendra pas toujours et dans ce cas il faut créer un nouveau type de
propriétés que l’on peut définir selon un besoin spécifique.

3) Ajout de contrôles personnalisés dans le volet de propriétés

Pour pouvoir définir un champ personnalisé il faut utiliser des classes qui sont en prévisualisation :

En visionnant la documentation technique on remarque une note :


https://docs.microsoft.com/fr-fr/javascript/api/sp-webpart-base?view=sp-typescript-
latest#propertypanecustomfield-properties-

Note

Prise de notes

270 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online
Cet API est fourni en tant qu’aperçu pour les développeurs et peut être modifié en
fonction des commentaires que nous avons reçus. N’utilisez pas cet API dans un
environnement de production.

Cela indique que si vous utilisez le générateur des API disponibles pour une production vous ne trouverez
pas cette classe.

Pour l’obtenir il faut générer le squelette avec le paramètre : --plusbeta

yo @microsoft/sharepoint --plusbeta

Nous souhaitons par exemple permettre à l’utilisateur d’afficher un champ pour saisir un mot de passe :
Ce type de champ n’existe pas, mais nous allons l’ajouter.

Il faut éviter tant bien que possible de créer des nouveaux types de champs : Microsoft prévoit
d’ajouter des nouveaux types et il se peut qu’un type non présent le devienne dans le futur et vous oblige
à supprimer votre définition….

 On commence par déclarer le nom du champ dans l’interface des proprietes


export interface IHelloWorldWebPartProps {
description: string;
password : string
}

 Ensuite on importe la définition d’une propriété personnalisée dans les imports du WebPart :

Note : si vous ne trouvez pas la classe PropertyPaneCustomField : vous n’avez pas utilisé la version
–plusbeta du générateur.

Visual Studio Code vous aide avec l’auto-complétion :


import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField,
PropertyPaneCustomField } from '@microsoft/sp-webpart-base';

 Il est important de développer par étapes ce type de projet :


Définir des étapes de test permet de ne pas passer du temps sur un développement pour se rendre
compte à la fin que les premières étapes ne sont pas bonnes.
Dans ce sens, nous allons ajouter une première méthode de rendu très simple :

private _customFieldRender(elem: HTMLElement): void {


elem.innerHTML = '<div><h1>Champ Personnalisé.</h1></div>';
}

Que l’on peut ajouter apres la méthode getPropertyPaneConfiguration().

On déclare le champ de la méthode getPropertyPaneConfiguration :

groupFields: [

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 271


9 Développement de WebPart SharePoint Online
PropertyPaneTextField('description', {label: strings.DescriptionFieldLabel})
,
PropertyPaneCustomField({key: 'password',onRender: this._customFieldRender.bind(this)})
]

On peut tester le fonctionnement directement dans le WorkBench local :

A présent que l’intégration fonctionne, que les paramètres sont tous branchés on peut améliorer le rendu
du contrôle :
private _customFieldRender(elem: HTMLElement): void {
if (elem.childElementCount == 0) {
let label: HTMLLabelElement = document.createElement("label");
label.className = "ms-Label";
label.innerText = "Mot de Passe";
elem.appendChild(label);
let br: HTMLBRElement = document.createElement("br");
elem.appendChild(br);
let inputElement: HTMLInputElement = document.createElement("input");
inputElement.type = "password";
this._customPasswordFieldChanged = this._customPasswordFieldChanged.bind(this);
inputElement.addEventListener("keyup", this._customPasswordFieldChanged);
inputElement.className = "ms-TextField-field";
elem.appendChild(inputElement);
}
// elem.innerHTML = '<div><h1>Champ Personnalisé.</h1></div>';
}

Et la méthode qui va mettre à jour la saisie :


private _customPasswordFieldChanged(event: Event): void {
let srcElement: HTMLInputElement = event.srcElement as HTMLInputElement;
this.properties.password = srcElement.value;
this.render();
}
On met finalement a jour l’affichage pour afficher le mot de passe :
<p class="${ styles.description}">${escape(this.properties.description)}</p>
<p>Mot de passe saisi : ${escape(this.properties.password)}</p>
<a href="https://aka.ms/spfx" class="${ styles.button}">
<span class="${ styles.label}">Learn more</span>
</a>
….

Le résultat final étant le suivant :

Prise de notes

272 Stéphane LEENHARDT - SupMicro tous droits 2019


9 Développement de WebPart SharePoint Online

V.Conseils de développement

1) Etude du besoin

Avant de développer un WebPart il se poser la question de l’expérience utilisateur et la façon dont on va


fournir des paramètres pour rendre le WebPart le plus réutilisable possible :

Avant de lancer un développement il est utile de vérifier auprès du projet PnP qu’un WebPart similaire
n’existe pas sur les dizaines qui existent.

• Quelles seront les propriétés du WebPart ?

• Le WebPart sera-t-il disponible pour l’expérience classique et moderne ?

• Comment profiter de librairies existantes pour generer le rendu de votre WebPart ?

• Sera-t-il disponible sur le tenant ou seulement sur certains sites ?

2) Références disponibles pour le développement de WebPart

Développement Office
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

Blog de Waldek Mastykarz MVP


https://blog.mastykarz.nl/

Blog de Andrew Connell


http://www.andrewconnell.com/

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 273


9 Développement de WebPart SharePoint Online

Exemples de WebPart SPFx


https://github.com/SharePoint/sp-dev-fx-webparts

Prise de notes

274 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows

Conception de Workflows
Objectifs

 Introduction aux Workflows


 Méthodes de Conception de Workflow pour SharePoint
 Conception de Workflow SharePoint Designer
 Conception avec Flow

I.Introduction aux Workflows


Concepts et Principes

L’origine des Workflows vient des traitements sur les documents ou les documents étaient approuvés
d’un service à un autre avec des révisions. La prise de décisions dans un programme est une tache
hautement courante dans un logiciel qui est toujours constitué de tests multiples dans les structures de
contrôle.

1) Conception de Workflows
Il existe 4 méthodes pour mettre en œuvre des Workflows :

 S’appuyer sur un Workflow prédéfini de SharePoint et le paramétrer : c’est la méthode la plus simple.

Dans SharePoint les Workflow dépendent des fonctionnalités activées.

Au niveau d’un Site on trouve : Planifier les alertes web Analytics, Planifier les rapports web Analytics
Au niveau d’une Liste/Bibliothèque : Approbation de destruction, Trois états, Recueillir les commentaires
– SharePoint 2010, Collecte des signatures – SharePoint 2010, Approbation – SharePoint 2010

 Concevoir la logique d’un Workflow dans Visio et l’exporter dans SharePoint

Cette méthode peut paraître intéressante mais elle demande un niveau de connaissance dans la mise en
œuvre des Workflow qui sont élevées et concevoir le Workflow avec les outils de conception peut paraître
plus sûr.

 Concevoir un Workflow personnalisé en utilisant les outils de conceptions


SharePoint Designer et InfoPath permettent de concevoir dans tous les cas des solutions adaptées au
contexte fonctionnel.

Dans tous les cas, les Workflows sont déployés au niveau d’une collection de sites.
Un même Workflow est donc partagé pour les sites d’une collection, mais doit être déployé autant de fois
que l’on de collections.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 275


10 Conception de Workflows
2) Méthodes de Conception de Workflow pour SharePoint

SharePoint apporte de nombreuses améliorations aux développeurs de Workflow qui peuvent être
différentes selon la catégorie d’utilisateurs :
Utilisateur final Concepteur Développeur
Nouvelle cible de Workflow Amélioration SharePoint Intégration Studio
Conception VISIO Designer Nouveaux événements
Workflow réutilisable
Nouvelles formes
Workflow OOB personnalisable

Visio
Permet de concevoir
des Workflow qui seront
exportés dans
SharePoint

Même si cette technique semble conviviale, on l’utilisera plutôt pour faire de la retro ingénierie par
exemple.

Prise de notes

276 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
SharePoint Designer

Evolution du l’architecture des Workflow

Depuis la version 2013 repose sur la version 4.5 du Framework


.NET et sur une plateforme nouvelle d’exécution des Workflows
SharePoint 2013 -2016:

• Un modèle d’exécution externe a SharePoint et qui


dialogue avec la plateforme.

Cela ajoute plus d’isolation et de performances aux Workflows


et permet également de nouvelles possibilités.

Une nouvelle option est disponible lorsque vous créez un flux de travail pour SharePoint Server.
La figure illustre l’option Type de plateforme lorsque vous créez un flux de travail à l’aide de SharePoint
Designer 2013 :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 277


10 Conception de Workflows

On peut Choisir 2013 ou 2010 dans les types de


Workflows.

 SharePoint Designer 2013 est le produit qu’il faut utiliser avec SharePoint Online.

SharePoint Designer 2013 inclut de nouvelles fonctionnalités conçues particulièrement pour le


Gestionnaire de Workflow. Dans SharePoint Designer 2013, cette nouvelle plateforme s’appelle la
plateforme de flux de travail SharePoint 2013. Ces nouvelles fonctionnalités comprennent :

 une expérience de développement de flux de travail visuelle qui utilise un complément Visio 2013 ;
 une nouvelle action qui permet des appels de service web sans code depuis un flux de travail ;
 de nouvelles actions pour créer une tâche et démarrer un processus de tâche ;
 de nouvelles actions de coordination qui vous permettent de démarrer un flux de travail créé sur la
plateforme de flux de travail SharePoint 2010 depuis un flux de travail créé sur la plateforme de flux
de travail SharePoint 2013
 un nouveau type de dictionnaire
 de nouveaux blocs de construction de flux de travail tels qu’Étape, Boucle et Ajouter une étape.

Bonne pratique de conception


Etudier si la logique fonctionnelle peut être fournie par un Workflow existant dans SharePoint, si ce n’est
pas le cas concevoir le Workflow avec SharePoint Designer.

3) Les différents types de Workflow


Workflow de Liste
 Sont associés à une liste existante.
 Ressemblent aux Workflow de SharePoint 2007/2010
 Peuvent être exportés vers Visio

Workflow Réutilisable
 Peuvent cibler un type de contenu
 Peuvent être exportés en .wsp pour être utilisé dans d’autres sites
 Peuvent être exportés/importés dans Visio
 Peuvent être crées soit avec Designer ou avec Visual Studio

Prise de notes

278 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
Workflow de Site
 Ne sont pas associés à une liste et doivent être lancé manuellement.
 Peuvent être crées soit avec Designer ou avec Visual Studio

4) Les menus pour la gestion des Workflows dans SharePoint

Paramètres du flux de travail dans


Administration du site :
Permet d’ajouter des Workflows pour le site.
On trouve dans l’écran que les Workflow de
site, c'est-à-dire ceux qui peuvent s’appliquer
selon des conditions qu’il faudra définir.

Pour une association sur une


liste/bibliothèque :
Le Workflow s’appliquera uniquement sur les
éléments de liste/ bibliothèque ciblée :
Dans ce cas il faut correctement définir les
valeurs de déclenchement et ne pas faire des
bouclages infinis :

En activant le Workflow automatiquement


à la création et sur modification, si le
Workflow change l’élément qui est créé on se
place dans les conditions d’un bouclage infini.
Ou directement depuis le ruban de liste/bibliothèque
(affichage classique)
Si on définit « mettre à jour le statut
d’approbation » attention il faut activer
l’approbation dans les paramètres de la
liste/bibliothèque.

 Lors du paramétrage d’un Workflow le nom du Workflow devient une nouvelle colonne de l’élément et
indique sur l’état du Workflow sur un élément :

La colonne Validation Contrat


porte le nom du Workflow et
indique que celui-ci est en cours
d’exécution.

II. Utilisation de Workflow Standard dans SharePoint

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 279


10 Conception de Workflows
Usage : Vous souhaitez mettre en place pour des documents importants une approbation par un
responsable.

Le responsable devra recevoir un email à chaque fois qu’un utilisateur décidera qu’il a terminé un
document et que ce document doit être approuvé.

1) Activation du Workflow d’approbation

 Par défaut le workflow d’approbation de publication n’est pas activé, il faut commencer par l’activer :

Dans les fonctionnalités de la collection de sites on trouve par défaut les workflow suivant :

Le Flux de travail d’approbation de publication doit être activé au niveau de la collection de site pour
pouvoir être visible et ajouté sur les composants SharePoint.

2) Mise en place du Workflow d’approbation de publication

Usage :

Prise de notes

280 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows

Pour que ce workflow fonctionne correctement il faut tout d’abord Demander une approbation du
contenu et activer les versions principales et secondaires (brouillons) sur la bibliothèque ou la liste sur
laquelle vous mettre en place le workflow, en allant dans les Paramètres -> PARAMÈTRES DE CONTRÔLE
DE VERSION :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 281


10 Conception de Workflows

 Une fois que le composant est paramétré avec


des brouillons on peut aller dans les
Paramètres du flux de travail :

Puis on ajoute un
nouveau flux de travail :

 On trouve 3 flux de travail mais celui qui permet de réaliser une approbation est le Workflow
d’approbation de publication :

Prise de notes

282 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
Le flux de travail Approbation de publication va permettre à l’utilisateur de commencer par travailler
sur un document en mode brouillon.
Tant que le document est un brouillon, l’utilisateur travailler sur le document et aucune approbation n’est
nécessaire.
Quand l’utilisateur considère que son travail est terminé il va publier une version Principale de son
document, c’est-à-dire une version terminée :

C’est à ce moment que le workflow va se déclencher pour envoyer un email à un approbateur qui pourra
ensuite approuver le document ou le refuser.

• Si le document est approuvé il sera visible par tous les autres utilisateurs qui ont accès à la liste.
• Si le document est refusé, il ne sera visible que par l’auteur et par l’approbateur.

 Donnez un nom explicite à votre flux de travail :

 Choisissez le mode de démarrage du flux de travail

Comme on ne peut savoir quand l’utilisateur va terminer son document et le faire passer d’un brouillon à
une version principale, on coche le démarrage du flux sur : Pour approuver la publication d’une version
principale de cet élément, vous devez démarrer ce flux de travail.

il faut laisser cocher Autoriser le démarrage manuel si on coche pour approuver la publication, car
c’est un démarrage manuel déclenché au moment de la publication d’un élément.

3) Les paramètres du flux d’approbation

Ce flux permet de définir plusieurs façons d’approuver le document :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 283


10 Conception de Workflows
On peut avoir un approbateur unique ou une séquence d’approbateur.

Si on choisit le mode Un à la fois :

Si on choisit le mode Simultanément :

Si on choisit en Un à la fois, l’ordre des utilisateurs est a une importance mais si on sélectionne
Simultanément l’ordre n’a aucun impact.

Quelques paramètres importants que l’on peut définir :

Si vous affectez un flux a un groupe d’utilisateurs, on peut choisir d’affecter une tache à chaque membre
du groupe ou si on décoche la tâche est affectée uniquement à un groupe.

On peut également définir le comportement en cas de refus ou de modification et de mettre a jour le


statut d’approbation :

Prise de notes

284 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
Si vous avez demandé une approbation, il faut cocher Mettre à jour le statut d’approbation sinon le
document restera en état d’approbation En cours quelle que soit les décisions des approbateurs.

4) Utilisation vue de l’utilisateur final

L’utilisateur ajout un nouveau document dans la bibliothèque.

Lorsque le document est terminé il doit l’archiver en version principale soit directement dans l’interface
SharePoint ou depuis Word.

Depuis l’interface :
Sur le document, cliquez sur le menu du document.

Et aller dans Plus -> Archiver

 Choisir d’archiver une version Principale :

Lorsque vous validez le formulaire suivant apparait et permet de démarrer le flux d’approbation :

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 285


10 Conception de Workflows

Depuis Word

 Allez dans le Volet Informations :

 Cliquez sur Archiver et choisir une version Principale :

Prise de notes

286 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows

L’écran de démarrage du workflow apparait directement dans Word.

III.Conception de Workflow avec SharePoint Designer

1) Choisir le type de Workflow

SharePoint Designer permet de concevoir 3 types de Workflows :


Workflow de liste, de site et réutilisable : il convient de savoir lequel choisir avant de se lancer dans un
projet de Workflow !

Workflow de Liste

Si on souhaite cibler une liste existante et connue. L’inconvénient de cette approche est de devoir faire le
Workflow sur une liste en production ! On ne peut le développer sur un autre serveur et le déployer
ensuite.

Workflow de site

A les mêmes inconvénients que le précèdent, c’est la portée qui change car il permet de cibler plusieurs
listes ou un type de contenu.

Workflow réutilisable
Ce type de Workflow doit cibler un type de contenu exclusivement.
En effet au moment de la conception on ne cible pas une liste puisque sur le serveur de destination elle
n’existe sans doute pas. On cible un type de contenu qui doit être déployé sur le serveur cible.
En utilisant astucieusement les types de contenus on peut toujours arriver à une solution :
Soit créer un type de contenu pour un document en particulier ou utiliser un type de contenu très
générique si on souhaite cibler plusieurs types de documents.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 287


10 Conception de Workflows
2) Concevoir le Workflow
Après avoir ouvert un site, Designer permet la conception de Workflows :

Le ruban de conception de Workflow permet la création et le paramétrage du Workflow.


Ce ruban change en conception de Workflow pour celui-ci :

Enregistrer un Workflow ne suffit pas !! Dans SharePoint Designer il faut publier le Workflow pour qu’il
soit installé et activé. L’enregistrement ne fait que sauvegarder la définition du Workflow.

L’écran de conception dans designer permet de définir la logique du Workflow.


En général on commence par une condition de déclenchement :

La condition la plus utilisée est : Si le champ de


l’élément actif qui permet de tester directement
une valeur de colonne (dépend de la liste ciblée)
Alors que « si une valeur est égale à la valeur »
permettra plutôt de tester d’autres éléments qui
peuvent être dans d’autres listes.
Ou selon le type de contenu, la condition sera le
type de fichier est un type spécifique.

L’écran de conception de Workflow présente les différentes étapes d’un processus :

Prise de notes

288 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
Le menu Action
permet ensuite
de définir les
actions du
Workflow

Les actions possibles définissent les possibilités qu’un Workflow peut réaliser.
Actions de l’ensemble de documents S’appliquent à tous les documents d’une
Capturer une version de l’ensemble de documents bibliothèque
Définir le statut d’approbation du contenu pour
l’ensemble de documents
Envoyer l’ensemble de documents au référentiel

Actions de liste S’applique à l’élément en cours de traitement par


Annuler l’extraction de l’élément le Workflow
Archiver l’élément
Copier un élément de la liste
Créer un élément dans la liste
Extraire l’élément
Mettre à jour l’élément de la liste
Supprimer l’élément

Actions de taches Permet d’assigner des taches et de concevoir des


Assigner quelque chose à faire nouveaux écrans avec Collecter les données
Assigner un formulaire à un groupe
Collecter les données d’un utilisateur
Démarrer le processus d’approbation
Démarrer le processus de commentaires
Démarrer le processus de taches personnalisées

Actions principales Actions variées, Définir la variable de flux de


Ajouter l’heure à la date travail permet de récupérer dans un formulaire de
Ajouter un commentaire collecte le choix de l’utilisateur.
Arrêter le flux de travail
Consigner dans l’historique
Définir l’état du Workflow
Définir la partie heure du champ Date/heure
Définir la variable de flux de travail
Effectuer un calcul
Envoyer un message électronique
Pause jusqu’à une date donnée
Pause pour une certaine durée
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 289


10 Conception de Workflows

Actions relationnelles Permet d’obtenir une variable identifiant un


Gestionnaire de recherche d’un utilisateur groupe d’utilisateur

Actions utilitaires Fonctions pour le découpage de chaîne et les


Extraire la sous-chaîne de l’index de chaîne calculs de durée
Extraire la sous-chaîne de la chaîne depuis l’index
avec la longueur
Extraire la sous-chaîne de la fin de la chaîne
Extraire la sous-chaîne depuis le début de la
chaîne
Rechercher l’intervalle entre les dates

3) Définition des étapes et des conditions d’un processus

Selon le cas, on peut exécuter en parallèle plusieurs actions, mais surtout plusieurs étapes :
Définir plusieurs étapes est utilisée lorsqu’un processus possède plusieurs groupes d’actions séparées les
unes des autres.
Paramètres de formulaire d’initiation Permet de demander des données lorsque le Workflow est
démarré manuellement par un utilisateur
Variables locales (de flux de travail) Variables internes au Workflow, qui peuvent être utilisées pour
faire des tests.
Colonnes d’associations Colonnes qui seront ajoutées à la liste par le Workflow

Attention à ne pas déclencher un workflow sur l’ajout d’un élément et sur la modification, si le
workflow lors de l’ajout modifie l’élément : vous serez dans un bouclage infini et le workflow ne se
terminera jamais.

Prise de notes

290 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows

IV.Mise en place de Flow

Les services Flow permettent d’automatiser des procédures qui peuvent


s’appliquer et utiliser toutes les fonctionnalités de la plateforme Office 365.
Par rapport aux Workflow SharePoint qui ne s’exécutent qu’à l’intérieur de
SharePoint, Flow permet la mise en place de traitements globaux et transverse.

Les Workflows SharePoint étant limité au site sur lequel ils sont publiés, ce qui peut également avoir des
avantages si on souhaite qu’un workflow soit limité à un composant spécifique.

1) Les Grandes fonctionnalités et caractéristiques de Flow


Que peut-on faire avec Flow ?

Etre notifié Copier des fichiers Organiser les Automatiser l’approbation


données

Etre notifié : en recevant des emails en fonction d’évènements qui peuvent être déclenchés
manuellement, selon une planification ou sur des évènements dans le cloud.
Organiser les données : permet de synchroniser des fichiers ou de déplacer des fichiers
Obtenir des données : Obtenir et organiser les données automatiquement
Automatiser l’approbation : Pour la mise en place des procédures de validation de l’entreprise

Il existe plus de 170 connecteurs permettant de se connecter aux sources de données que l’on souhaite :

Qui peut utiliser Flow dans l’organisation ?

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 291


10 Conception de Workflows
Dans le cadre de la plateforme Office 365, Flow est une application qui peut être activée au même titre
que les autres applications (Outlook, SharePoint, Word, Excel, etc…)

L’administrateur Office 365 peut désactiver le service Flow mais uniquement pour certains utilisateurs
et par utilisateur :
L’administrateur ayant la gestion des utilisateurs
Office 365, peut aller dans :
Administrateur -> Utilisateurs -> on sélectionne les
utilisateurs et on clique sur Licences de produits.

On peut désactiver les services Flow fournis par


l’entreprise dans le cadre de l’abonnement Office
365.

Mais on ne peut pas empêcher un utilisateur


d’utiliser Flow pour autant s’il le souhaite !

Comment un utilisateur peut utiliser Flow même s’il est désactivé dans l’entreprise ?

Microsoft Flow est un service cloud public : flow.microsoft.com, auquel tout le monde peut s’inscrire et
que tout le monde peut utiliser pour automatiser les tâches quotidiennes.
Pour utiliser Microsoft Flow, les utilisateurs n’ont pas besoin de posséder ou d’utiliser un compte Office
365. Pour cette raison, il n’existe actuellement aucun mécanisme pour empêcher une autre personne
d’utiliser Flow (puisque n’importe qui dans le monde peut le faire, quelle que soit son adresse de
messagerie).
Toutefois, si une personne s’inscrit à Microsoft Flow et que vous choisissez de ne pas la prendre en charge
à l’intérieur de votre organisation, elle ne peut en aucun cas faire encourir des frais à votre entreprise.
Lorsqu’une personne s’inscrit à Microsoft Flow, la relation est établie entre cette personne et Microsoft
directement, comme avec les nombreux autres services cloud de Microsoft, tels que Bing, Wunderlist,
OneDrive ou Outlook.com.
Lorsqu’une personne utilise Microsoft Flow, cela n’implique en aucune façon que le service est fourni
par votre organisation.
Enfin, si votre entreprise souhaite limiter l’utilisation de données propres à l’organisation à l’intérieur de
Microsoft Flow, c’est possible grâce à des stratégies de protection contre la perte de données (DLP).

L’environnement d’exécution des Flux


Les Flux s’exécutent dans un environnement qui héberge les ressources utilisées par le flux.

L’administrateur de Flow à la capacité de créer différents environnements et chaque environnement à les


caractéristiques suivantes :

Prise de notes

292 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
• Localité des données : un environnement est localisé dans une région géographique. Tous les flux
seront acheminés vers tous les centres de données situés à cet emplacement géographique.
• Isolation : Les flux qui se trouvent dans un environnement donné son complètement isolés de
ceux qui se trouvent dans d’autres environnements.
• Protection contre la perte de données : un environnement peut être configuré pour ne pas
permettre à un flux de publier des informations depuis un emplacement interne (OneDrive par
exemple) vers un emplacement public (Twitter, FaceBook par exemple)

Par défaut il existe l’environnement par défaut qui est partagé par tous les utilisateurs et n’importe
quel utilisateur pour créer des flux dans l’environnement par défaut.
Si un Flux est dans un environnement on peut toujours l’exporter pour l’importer dans un autre
environnement.

Gérer un Flux à plusieurs avec les flux d’équipe


Au départ lorsque vous créez un flux vous en devenez logiquement le propriétaire et il n’y a que vous qui
pouvez le gérer.

Si vous ajoutez d’autres utilisateurs en tant que propriétaires de votre Flux, vous allez permettre à une
équipe de gérer le flux avec vous :

Pour ajouter un flux aux flux d’équipe il suffit de partager votre flux avec d’autres membres :

Il passe ensuite dans les Flux d’équipe :

En allant dans Flux d’équipes on trouve tous les flux pour lesquels on est le créateur ou propriétaire :
Tous les propriétaires d’un flux peuvent :

• Afficher l’historique du flux (chaque exécution)


• Gérer les propriétés du flux : démarrez, arrêtez, ajouter d’autres propriétaires
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 293


10 Conception de Workflows
• Modifier la définition du flux
• Ajouter et supprimer d’autres propriétaires mais pas le créateur du flux
• Supprimer le flux

Connaitre les taches d’approbation

En allant dans la barre de suite dans le menu Approbation :


On trouve toutes les demandes en cours d’approbation reçues, envoyées et un historique.

Limites par défaut


Un utilisateur peut avoir un maximum de 50 flux (mais il peut en avoir plus sur demande)

• Les requêtes que le flux transmettra ont des limites d’exécution


Délai maximal pour une requête synchrone 120 secondes
Délai maximal pour une requête asynchrone Maximum de 30 jours

• Taille des messages envoyés


Taille d’un message maximale 100 MO
Taille d’une expression 131 072 caractères

• Stratégie de réexécution en cas d’erreur


Nombre de tentatives 4

• Délais d’exécution et de rétention


Durée d’exécution 30 jours (si on n’approuve pas avant 30 jours,
l’approbation est supprimée)
Durée de stockage 30 jours depuis le départ du flux
Intervalle minimal de récurrence 1 minute
Intervalle maximal de récurrence 500 jours
Historique d’exécution des flux 28 jours

• Limites sur les boucles


ForEach 5 000
Until 5 000

• Limite dans l’infrastructure


Actions dans un flux 250

Prise de notes

294 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
Niveaux d’imbrication des actions 5
Limite sur le nom d’une action 80
Limite sur la description d’un flux 256

2) Démarche de conception de Flux

La 1ere étape qui est souvent négligée est de définir l’objectif métier à atteindre : Cela implique d’avoir
une procédure métier établie que l’on souhaite mettre en œuvre.

Bien souvent le besoin vient des utilisateurs (un responsable par exemple) qui demande à pouvoir
approuver certains documents ou éléments. Le besoin vient également des règles au sein de l’entreprise
ou du service et dans ce cas le Flux servira à mettre en œuvre ces règles dans Office 365.

Créer un nouveau flux

Il existe deux façons de débuter un nouveau flux :


• En choisissant un modèle de départ. (il en existe des centaines)
• En choisissant un modèle vierge.

Utiliser un modèle de départ


On commence donc pour un besoin donné par rechercher si un modèle correspond :
Ils sont classé par domaine : Approbation, Bouton, Collecte de données, E-mail, Evènements et calendrier,
Mobile, Notifications, Productivité, Medias et sociaux, Synchroniser.

Chaque modèle peut être trié par popularité, nom ou date de publication.
 Choisir de préférence un modèle qui est couramment utilisé et qui n’est pas tout nouveau et déjà
éprouvé.

Créer un nouveau Flux en partant de zéro

La démarche de conception et les différentes étapes sont les suivantes :

1. Choix de l’évènement qui déclenche et lance le flux


2. Choix d’un connecteur pour obtenir une source (SharePoint, OneDrive, etc…)
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 295


10 Conception de Workflows
3. Spécifier les actions du Flux, les différentes étapes et conditions de traitement
4. Publier, puis Gérer et vérifier le flux

3) Création de Flux

Création d’étapes et définition d’un processus

Le point de départ étant le déclencheur on peut concevoir différentes étapes et organiser l’interface de
conception.

Dans l’interface lorsque vous ajoutez un nouvel élément vous avez le choix entre :
• Ajouter une action : Les actions du flux
• Ajouter une condition : Les tests et l’aiguillage du traitement
• Ajoute une casse de commutateur : Permet de faire diffèrent Cas de traitement
• Ajouter un appliquer à chaque : Pour faire des traitements sur plusieurs éléments
• Ajouter une étendue : pour regrouper les actions
• Ajouter une exécution jusqu’à : pour mettre en pause jusqu’à ce qu’une condition soit remplie
• Ajouter une branche parallèle : pour faire plusieurs traitements en parallèle

Choix du déclencheur
Cette étape est très importante puisqu’elle entraine le démarrage du Flux et va donner le comportement
de départ du flux.

Prise de notes

296 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows

On trouve différents types de déclencheur en particulier pour SharePoint (9 à ce jour) :

Et 29 actions sont disponibles uniquement pour SharePoint.

• On peut utiliser un déclencheur particulier : Planification – Récurrence


Ce déclencheur peut déclencher le flux selon l’intervalle de temps souhaité.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 297


10 Conception de Workflows

Ajouter une Etendue :


Regrouper visuellement plusieurs actions et conditions qui peuvent être réduites en même temps.

L’étendue est utile pour avoir un confort visuel dans la conception de flux complexes.

Casse de commutateur
(En anglais Siwtch case) Cette carte permet de faire l’équivalent d’un Switch permettant pour une même
condition de faire différents cas de traitements. (Comme un switch case en programmation)

Avec cette carte si on doit faire 5 conditions sur les différentes valeurs d’une même variable ou réponse,
on est pas obligé de faire 5 conditions qui s’enchainent mais une ligne avec tous les differents cas que l’on
souhaite.

Prise de notes

298 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows
Ajouter une exécution jusqu’à

Nombre : correspond au nombre maximal de tentatives qui seront exécutés.

Délai : PT1H correspond a 1 heure avant que l’action s’arrête.


PT720H : pour 30 jours.
On peut ajouter PT1M et 5000 qui correspondent au maximum possible : 1 mois et 5000 tentatives

 Une alternative est d’ajouter l’action Délai :

Ajout d’actions

En règle générale les actions s’appliquent sur un élément, un fichier un email ou plus globalement sur un
élément à l’origine du déclencheur.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 299


10 Conception de Workflows

A partir du déclencheur on ajout des actions et des conditions ce qui va permettre de construire la logique
du flux.

Il est possible de traiter une liste d’éléments dans les actions du Flux :

En choisissant : Ajouter un appliquer à chaque

Pour que le Appliquer à chaque fonctionne il faut auparavant sélectionner une action qui sélectionne
plusieurs valeurs dans une source de données.

Par exemple on peut juste avant ajouter l’action Obtenir les éléments qui servira de source pour appliquer
à chaque valeur retournée les actions souhaitées :

Prise de notes

300 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows

Utiliser des expressions

Selon le traitement que vous ferez les instructions ne seront pas écrites de la même façon :
Il existe des expressions pour les conditions et d’autres pour filtrer les éléments que l’on souhaite
obtenir.

Cela s’explique par le fait que dans les conditions vous êtes dans le langage prévu dans Flow alors que
lorsque vous faites des requêtes sur des sources de données le langage utilisé est OData.

• Carte Obtenir des éléments

Les expressions s’appuient sur le langage OData pour obtenir des données, il faut donc utiliser les
opérations prévues dans ce langage.

Dans les actions qui récupèrent des éléments il faut utiliser les opérateurs suivant pour faire des filtres de
sélection :

Définition OData URI


ET and
OU or
Plus petit que lt
Plus grand que gt
Plus grand ou égal ge
Plus petit ou égal le
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 301


10 Conception de Workflows
Diffèrent ne
Commence par Startswith

Utiliser les noms internes des colonnes qui ne sont pas forcément ceux que vous voyez à l’écran.

Pour identifier le nom interne, on peut aller sur la liste SharePoint, on fait un tri sur une colonne et on voit
le nom interne tel que défini dans SharePoint :

Dans cet exemple, la colonne que l’on a renommée en Prix s’appelle en réalité PPI_x0020_TTC :
&sortField=PPI_x0020_TTC&isAscending=true

Exemple : On obtient dans une liste SharePoint toutes les lignes dont le PPI TTC est > a 100

Si votre Requête ne fonctionne pas, testez la directement dans SharePoint en appelant directement
le module REST : cela vous permettra d’identifier plus rapidement l’erreur que de devoir relancer a
chaque changement un flux.

Par exemple, l’instruction REST associé à l’exemple ci-dessus est :


[URL DU SITE SHAREPOINT]
/_api/web/Lists/getbytitle('Liste%20des%20Parfums')/items?$filter=PPI_x0020_TTC gt 100

• Expressions dans les conditions et les tests


Les expressions que l’on doit utiliser dans les conditions pour tester des valeurs répondent à des règles de
syntaxe qui sont intégrées dans le générateur d’expression Flow.

Expression Description Exemple


and Accepte deux arguments et retourne la valeur Cette expression retourne la valeur false :
true si les deux valeurs sont true. and(greater(1,10),equals(0,0))
Remarque : les deux arguments doivent être des
valeurs booléennes.
or Accepte deux arguments et retourne la valeur Cette expression retourne la valeur true :
true si un des arguments a la valeur true. or(greater(1,10),equals(0,0))
Remarque : les deux arguments doivent être des
valeurs booléennes.

Prise de notes

302 Stéphane LEENHARDT - SupMicro tous droits 2019


10 Conception de Workflows

equals Retourne true si les deux valeurs sont égales. Par exemple, si parameter1 est someValue,
cette expression retourne true :
equals(parameters('parameter1'),
'someValue')
less Accepte deux arguments et retourne la valeur Cette expression retourne la valeur true :
true si le premier argument est inférieur au less(10,100)
deuxième argument.
Remarque : les types pris en charge sont integer,
float et string.
lessOrEquals Accepte deux arguments et retourne la valeur Cette expression retourne la valeur true :
true si le premier argument est inférieur ou égal lessOrEquals(10,10)
au deuxième argument.
Remarque : les types pris en charge sont integer,
float et string.
greater Accepte deux arguments et retourne la valeur Cette expression retourne la valeur false :
true si le premier argument est supérieur au greater(10,10)
deuxième argument.
Remarque : les types pris en charge sont integer,
float et string.
greaterOrEquals Accepte deux arguments et retourne la valeur Cette expression retourne la valeur false :
true si le premier argument est supérieur ou égal greaterOrEquals(10,100)
au deuxième argument.
Remarque : les types pris en charge sont integer,
float et string.
empty Retourne la valeur true si l’objet, le tableau ou la Cette expression retourne la valeur true :
chaîne est vide. empty('')
not Accepte deux arguments et retourne la valeur Cette expression retourne la valeur true :
true si les arguments ont la valeur false. not(contains('200 Success','Fail'))
Remarque : les deux arguments doivent être des
valeurs booléennes.
if Retourne une valeur spécifique si l’expression Cette expression retourne la valeur yes :
retourne la valeur true ou false. if(equals(1, 1), 'yes', 'no')

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 303


11 Le PowerShell dans Office 365

Le PowerShell dans Office 365


I.Introduction a PowerShell

En introduction on peut signaler qu’il existe des modules PowerShell pour tous les services de la
plateforme Office 365 :

Que ce soit pour SharePoint, Outlook, Yammer, Teams ou d’autres services Microsoft propose une
solution d’administration à base de script PowerShell.

1) Quel est l’intérêt de PowerShell dans SharePoint Online ?

• Certains paramétrages ne sont tout simplement pas disponible dans les interfaces
d’administration Office 365 et nécessitent l’utilisation de PowerShell.

• Etant donné que la plateforme SharePoint est distante, tout n’est pas possible et le passage
régulier de script PowerShell peut donner l’impression à l’utilisateur d’avoir certaines
fonctionnalités qui n’existent pas en réalité.

• PowerShell peut révéler des informations supplémentaires qui ne sont pas visibles avec le Centre
d'administration Office 365

• PowerShell est idéal pour effectuer des opérations en bloc

• PowerShell est idéal pour filtrer des données

• PowerShell facilite l’impression ou l’enregistrement des données

• PowerShell vous permet de gérer tous les produits serveur

2) Sélection des modules en fonction des besoins

Il faut être attentif à la sélection des modules PowerShell car ils existent pour différentes plateformes
d’un même produit :

Ainsi pour SharePoint on trouve des modules PowerShell SharePoint qui ne fonctionneront qu’avec une
version SharePoint sur site et d’autres qui sont spécifiques à SharePoint Online !

Un autre piège vient des exemples que l’on peut trouver sur internet et qui la plupart du temps
présentent des scripts pour un SharePoint sur site et non pour SharePoint Online.

Prise de notes

304 Stéphane LEENHARDT - SupMicro tous droits 2019


11 Le PowerShell dans Office 365

Configuration minimale requise sur le poste client

• Système d'exploitation: Windows 7 service pack 1 et supérieur, Windows Server 2008 R2 service
pack 1 et supérieur.
• PowerShell version 3.0 minimale
(Pour vérifier la version de PowerShell lancer la commande $PSVersionTable.PSVersion)
• Microsoft .NET Framework 3.51
• Microsoft Online Services Sign-in Assistant (7.0) 32 ou 64 bits
• Office 365 PowerShell cmdlets (32 ou 64 bits)

Installation des modules nécessaires à l’exécution et la connexion à Office 365

1. Installer la version 64 bits de l’Assistant de connexion Microsoft Online Services


2. Installer le Microsoft Azure Active Directory Module pour Windows PowerShell

Quelle est la différence entre les commandes SharePoint Online PowerShell et Office 365
PowerShell ?

La différence principale est les noms qu’ils utilisent :


• Chaque applet de commande SharePoint Online commence par l’SPO comme son nom.
• À l’inverse, Office 365 démarrera avec MSO en préfixe.

Les commandes Office 365 s’appliquent à la configuration des services Office 365, aux utilisateurs Office
365, Groupe Office 365 et d’une manière générale permettent la gestion des paramètres d’administration
d’Office 365.

Les commande SharePoint Online PowerShell sont spécifiques à l’environnement SharePoint et


permettent différentes actions dans SharePoint OnLine uniquement.

On doit donc télécharger plusieurs modules avant de pouvoir se connecter avec SharePoint OnLine :

On peut également installer directement la dernière version avec la commande suivante :

Install-Module MSOnline

Demarrage avec SharePoint OnLine PowerShell

Installer SharePoint Online Management Shell. La dernière version est disponible sur :
https://www.microsoft.com/fr-fr/download/confirmation.aspx?id=35588

Lancer Windows PowerShell ou PowerShell ISE (avec interface graphique)


1. On Importe les modules SharePoint Online

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 305


11 Le PowerShell dans Office 365
Import-Module SPOnline

2. On récupère les autorisations en entrant l'adresse mail et le mot de passe d'un administrateur
$365Logon = get-credential

3. On se connecte à SharePoint Online


Connect-SPOService -Url https://<Nom du tenant>-admin.sharepoint.com/ -Credential
$usercredential
*Nom du tenant = votre domaine

4. On liste les collections de site SharePoint


Get-SPOSite

5. Exemple de commande : Afficher les licences du domaine


Get-MsolAccountSku

Vous pouvez enregistrer ce script dans un fichier ps1 afin de le lancer lorsque vous aurez à intervenir sur
SharePoint on Line
Import-Module SPonline
$usercredential = get-credential
Connect-SPOService -Url https://<Nom du tenant>-admin.sharepoint.com/ -Credential
$usercredential
Get-SPOSite

Voir TechNet: SharePoint Online cmdlets : https://technet.microsoft.com/fr-fr/library/fp161362.aspx

Voir TechNet: Exchange Online cmdlets :


http://technet.microsoft.com/en-us/library/jj200780%28v=exchg.150%29.aspx

Voir également : https://gallery.technet.microsoft.com/office365/

Reference des cmdlet Microsoft pour SharePoint Online :


https://docs.microsoft.com/en-us/powershell/module/sharepoint-online/?view=sharepoint-ps

Connexion avec SharePoint Online Management Shell

$adminUPN="<the full email address of a SharePoint administrator account, example:


jdoe@contosotoycompany.onmicrosoft.com>"
$orgName="<name of your Office 365 organization, example: contosotoycompany>"
$userCredential = Get-Credential -UserName $adminUPN -Message "Type the password."
Connect-SPOService -Url https://$orgName-admin.sharepoint.com -Credential
$userCredential

Exemple d’ajout de collection de sites

Prise de notes

306 Stéphane LEENHARDT - SupMicro tous droits 2019


11 Le PowerShell dans Office 365
New-SPOSite -Url http://tenant.sharepoint.com/sites/mynewsite -Owner
joe.healy@contoso.com -StorageQuota 1000 -Title "My new site collection"

Ajoute une collection de sites avec un quota de 1000 Mo

New-SPOSite -Url http://tenant.sharepoint.com/sites/mynewsite -Owner


joe.healy@contoso.com -StorageQuota 1000 -LocaleID 1036 -ResourceQuota 300 -Template
"STS#0" -TimeZoneId 3 -Title "My new site collection"

Ajoute une collection sur le fuseau horaire de Paris (valeur=3)

New-SPOSite -Url https://tenant.sharepoint.com/sites/accounting -Owner


admin@contoso.com -StorageQuota 100 -NoWait -ResourceQuota 50 -Template STS#0

 D’autres exemples de scripts se trouvent en annexe.

Quelle est la différence entre PNP SharePoint et SharePoint OnLine ?

SharePoint modèles et pratiques (Patterns aNd Practices) contient une bibliothèque de commandes
PowerShell qui permet d’effectuer des actions complexes gestion de mise en service et d’artefact vers
SharePoint.
Les commandes utilisent CSOM et fonctionnent aussi bien avec SharePoint Online ou SharePoint sur site.

La libraire se trouve sur le github : https://github.com/SharePoint/PnP-PowerShell

Le PnP SharePoint permet une gamme beaucoup plus variées de traitements dans les catégories
suivantes :

• Gestion des Compléments


• De Base (gestion de l’identification, certificats, connexion, Query)
• De Chartage graphique (ajout de thème, page maitre, css)
• De gestion des Pages
• De gestion des types de contenus
• Des utilitaires de diagnostics
• De gestion des ensembles de documents
• De gestion des récepteurs d’évènements
• De gestion des fonctionnalités
• De gestion des champs
• De gestion des fichiers et des dossiers
• De gestion de l’information (stratégie d’information)
• De gestion des listes
• De dialogues avec Microsoft Graph
• De Provisionnement à distance
• De publications
• De gestion des enregistrements
• De gestion de la recherche

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 307


11 Le PowerShell dans Office 365
• De gestion de la corbeille
• De gestion de collection de sites
• De gestion de la Taxonomie
• D’administration du Tenant
• De gestion des utilisateurs et des groupes
• De gestion des profils utilisateurs
• De gestion des WebPart
• De gestion d’un site
• De gestion des Workflows

Démarrage avec Pnp SharePoint


Il existe 3 manières d’installer les applets de commande.
Nous vous recommandons, si possible, de les installer à partir de la Galerie de PowerShell.

Vous pouvez également télécharger les fichiers d’installation ou exécuter un script PowerShell pour
télécharger le module PowerShellGet et installer les applets de commande par la suite.

Version de SharePoint Commande pour installer


SharePoint Online Install-Module SharePointPnPPowerShellOnline

Tous les mois une nouvelle version est disponibles des applets de commande PowerShell Plug and Play.
Si vous avez installé les applets de commande à l’aide du fichier d’installation, simplement télécharger la
version la plus récente et exécuter le programme d’installation.
 Il met à jour votre installation existante.

Si vous avez installé les applets de commande à l’aide de PowerShell-Get avec Install-Module de la galerie
de PowerShell puis vous serez en mesure d’utiliser la commande suivante pour installer la version la plus
récente mise à jour :

Update-Module SharePointPnPPowerShell*

Vous pouvez vérifier les versions de PowerShell PnP installés avec la commande suivante :
Get-Module SharePointPnPPowerShell* -ListAvailable | Select-Object Name,Version |
Sort-Object Version -Descending

PNP propose plusieurs commandes qui ne sont pas disponibles dans SharePoint OnLine PowerShell, en
particulier pour créer un site dans une collection de site et plusieurs autres commandes.

Avant d’être toujours certain qu’une action n’est pas disponible il faut donc vérifier les cmdlet de ces
deux librairies.

Connexion avec les Pnp SharePoint

Connect-PnPOnline –Url https://yoursite.sharepoint.com –Credentials (Get-Credential)

Prise de notes

308 Stéphane LEENHARDT - SupMicro tous droits 2019


11 Le PowerShell dans Office 365

Pour une identification MFA (Multi Factor Authentication) :


Connect-PnPOnline -Url https://yoursite.sharepoint.com –UseWebLogin

Pour voir la liste de toutes les cmdlet :


Get-Command -Module *PnP*

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 309


AN1 TypeScript

Introduction au langage Type Script


I.Introduction et mise en place de l’environnement

TypeScript est un langage compilé fortement typé, orienté objet. Il a été conçu par Anders Hejlsberg
(concepteur de C #) chez Microsoft.
TypeScript est à la fois un langage et un ensemble d'outils. Il est un sur-ensemble typé de JavaScript
compilé en JavaScript. En d'autres termes, TypeScript est JavaScript plus quelques fonctionnalités
supplémentaires.

Caractéristiques de TypeScript
• TypeScript est juste JavaScript : - vous avez besoin de connaître JavaScript pour utiliser TypeScript.
Tout le code de TypeScript est converti en son équivalent JavaScript pour l'exécution.
• TypeScript prend en charge d'autres bibliothèques JS.
• TypeScript est portable : Il est portable sur les navigateurs, les périphériques et les systèmes
d'exploitation. Il peut fonctionner sur n'importe quel environnement sur lequel JavaScript est
exécuté. Contrairement à ses homologues, TypeScript n'a pas besoin d'une machine virtuelle
dédiée ou d'un environnement d'exécution spécifique pour s'exécuter.

Avantages TypeScript
• Les erreurs sont détectées plus tôt.
• Moins de bugs.
• Économise beaucoup de temps.
• Fort Typage Statique
• Prend en charge les concepts de programmation orientée objet.
• Langage Compiler.

Composants de TypeScript

TypeScript a trois composants :


• Langage : - Elle comprend la syntaxe, les mots-clés et les annotations de type.
• Le compilateur TypeScript : - Le compilateur TypeScript (tsc) convertit les instructions écrites en
TypeScript en son équivalent JavaScript.
• Le service de langage TypeScript : - Le "service de langue" expose une couche supplémentaire autour
du pipeline de compilateur de base qui sont des applications de type éditeur. Le service de langage
Prise de notes

310 Stéphane LEENHARDT - SupMicro tous droits 2019


AN1 TypeScript
prend en charge l'ensemble commun d'opérations d'éditeur typiques telles que les complétions
d'instructions, l'aide à la signature, le formatage et la mise en forme de code, la colorisation, etc.

Installation de la prise en charge Type Script

Visual Studio Code prend en charge le langage Type Script mais ne comprend pas le compilateur par
défaut, il faut l’installer :

npm install -g typescript

 On peut tester l’installation :

tsc --version
tsc –help

Lorsqu’on developpe un projet il faut indiquer à VS Code l’environnement et donner les parametres pour
Type Script :

C’est le fichier tsconfig.json qui permet de donner les paramètres :

{ "compilerOptions":
{ "target": "es5", "module": "commonjs", "sourceMap": true }
}

Pour compiler un fichier ts :

tsc demo1.ts

crée un fichier JavaScript contenant le code équivalent depuis Type Script.

Pour exécuter le code :

node demo1.js

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 311


AN1 TypeScript
On peut configurer l’environnement VS Code pour exécuter le code TS :
Menu Terminal -> configure Task :

 On change la configuration du debug pour lancer un programme :

Ce qui permet de déboguer directement le code TS.

II.Declaration de type primitif

1) Le booleen :

let isDone: boolean = false;

2) Les Nombres

let decimal: number = 6;


let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

3) Les chaines de caractères


let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;


let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

Equivalent à :
let sentence: string = "Hello, my name is " + fullName + ".\n\n" + "I'll be " +
(age + 1) + " years old next month.";

4) Les Tableaux

Prise de notes

312 Stéphane LEENHARDT - SupMicro tous droits 2019


AN1 TypeScript
let list: number[] = [1, 2, 3];

Les couples:

// Declare a tuple type


let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

5) Enum

enum Color {Red, Green, Blue}


let c: Color = Color.Green;

enum Color {Red = 1, Green, Blue}


let c: Color = Color.Green;

enum Color {Red = 1, Green = 2, Blue = 4}


let c: Color = Color.Green;

enum Color {Red = 1, Green, Blue}


let colorName: string = Color[2];
console.log(colorName); // Displays 'Green' as its value is 2 above

6) Any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a Boolean

let notSure: any = 4;


notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)
let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

let list: any[] = [1, true, "free"];

list[1] = 100;

III.Quelques Sites pour apprendre TypeScript

http://www.typescriptlang.org/

https://www.valentinog.com/blog/typescript/
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 313


AN1 TypeScript

https://learnxinyminutes.com/docs/fr-fr/typescript-fr/

https://riptutorial.com/fr/typescript

Prise de notes

314 Stéphane LEENHARDT - SupMicro tous droits 2019


AN2 PowerShell et SharePoint

PowerShell
Powershell est un langage de script orienté objet développé par Microsoft. Il s’appuie sur le framework
Microsoft .NET et est désormais directement intégré aux nouveaux systèmes d’exploitation Windows 7
et Windows Server 2008. Powershell est compatible avec toutes les versions de Windows supportant .NET
2.0.
Tous les prochains développements de script se feront en PowerShell.

Les nouveautés de PowerShell


 PowerShell n’interprète pas le texte, mais traite des objets basés sur le Framework .NET
 PowerShell fournit une large gamme d’objets en ligne de commande avec des interfaces communes
de manipulations.
 Toutes les commandes PowerShell utilisent le même interpréteur au lieu d’outils différents selon ce
que l’on souhaite réaliser. Cela rend plus facile l’apprentissage des commandes.

PowerShell utilise des « cmdlet » (prononcé command-let) qui ont une convention de nom pour les
reconnaitre :
Les cmdlet commencent par un verbe puis un tiret suivi du nom de l’action.
Selon le verbe utilisé on peut connaitre l’action du cmdlet
 Get : indique un retour de données uniquement
 Set : indique une modification des données
 Out : sort le résultat vers la destination spécifiée
 New : pour ajouter un nouvel élément

 Exemples d’appels de commandes


Get-Help ou Get-Process ou Start-Service

 Chaque cmdlet peut avoir une aide que l’on obtient de la façon suivante :
get-help <nom cmdlet> -detailed
detailed indique que l’on souhaite obtenir la description du cmdlets et des paramètres possibles.

 Ou peut aussi utiliser une syntaxe abrégée :


get-help <nom cmdlet> / ?

Manipuler les objets dans PowerShell


Les scripts PowerShell manipulent des objets du Framework .NET. Ces objets ont des méthodes (les
actions) et de propriétés (les valeurs) que l’on peut obtenir ou appeler.
 Pour connaitre les caractéristiques d’un objet on peut utiliser la syntaxe suivante :
Get-service | get-member
Le pipe permet d’envoyer le résultat de gauche vers la commande qui se trouve à droite.

Pour obtenir les valeurs en cours, on peut utiliser la syntaxe suivante :


 Retourne les valeurs en cours sur le service de planification des taches.
get-service schedule | format-list -property *

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 315


AN2 PowerShell et SharePoint
 ou pour ne retourner que les propriétés name et CanPauseAndContinue
get-service alerter | format-list -property name, CanPauseAndContinue

 Pour appeler des méthodes d’un objet


(get-service <service-name>).<method-name>()

 Exemple :
(get-service schedule).stop()

Exécuter un Script PowerShell


Un script Powershell peut être lancé à partir d’un fichier .BAT, d’une invite de commande, depuis
l’interpréteur Powershell, d’un service, d’une tâche planifiée ou simplement en double cliquant sur le
script.

Exemple de Script qui affiche l’adresse IP puis fait une pause avant de se terminer
Fichier : adresseIP.ps1
((ipconfig | findstr [0-9].\.)[0]).Split()[-1]
function Pause ($Message=”Appuyez sur une touche pour quitter…”)
{
Write-Host -NoNewLine $Message
$null = $Host.UI.RawUI.ReadKey(“NoEcho,IncludeKeyDown”)
Write-Host “”}
Pause

Attention aux paramètres de sécurité pour l’exécution des scripts PowerShell

Appeler l’interpréteur PowerShell

Dans une ligne de commande MS-DOS exécuté la commande :


powershell

SharePoint et PowerShell
SharePoint 2010 est la première version à supporter PowerShell et nécessite la version 2.0 de PowerShell.
c’est pourquoi il faut désinstaller la version 1.0 de Windows 2008

PowerShell utilise des fonctions intégrées qui sont les commandes que l’on peut exécuter. Ces
commandes sont appelées des « cmdlets ».
SharePoint 2010 propose plus de 500 cmdlets et tout ce qui peut être réalisé en administration peut être
lancé depuis PowerShell.

Pour executer des scripts PowerShell SharePoint:


Prise de notes

316 Stéphane LEENHARDT - SupMicro tous droits 2019


AN2 PowerShell et SharePoint
➢ Dans le menu “Tous les Programmes” exécuter le menu :
Microsoft SharePoint 2010 Products->SharePoint 2010 Management Shell
Ce raccourci pointe vers l’emplacement :
C:\Windows\System32\WindowsPowerShell\v1.0\PowerShell.exe -NoExit " & ' C:\Program
Files\Common Files\Microsoft Shared\Web Server
Extensions\14\CONFIG\POWERSHELL\Registration\\sharepoint.ps1 ' "

 Obtenir la liste de tous les cmdlets SharePoint


Get-command –Module Microsoft.SharePoint.PowerShell

 Obtenir les commandes pour un objet : SPWebApplication


Get-command –Module Microsoft.SharePoint.PowerShell –noun SPWebApplication

Travailler avec les objets SharePoint dans PowerShell


La ferme : SPFarm
La ferme est l’objet de plus haut niveau dans SharePoint, même si l’on a qu’un seul serveur, l’objet
SPFarm permet d’interroger la base de données de configuration de SharePoint et d’obtenir les
paramètres globaux de SharePoint.

 Connaitre la version de SharePoint


(Get-SPFarm).BuildVersion

 Obtenir les paramètres de configuration de la ferme


Get-SPFarmConfig

 Modifier les paramètres de configuration de la ferme


$config = Get-SPFarmConfig
$config.WorkflowBatchSize=105
$config : Set-SPFarmConfig
Get-SPFarmConfig
On utilise une variable locale pour stocker les valeurs, les modifier puis impacter la ferme.

L’application Web SharePoint


L’application Web correspond à une racine dans IIS et dans SharePoint une application Web peut contenir
plusieurs collections de sites.
On liste les applications Web dans l’administration centrale (Gestion des Applications->Gérer les
applications Web)

 Afficher les applications Web


Get-SPWebApplication

 Inclure l’application Web de l’administration centrale :


Get-SPWebApplication -IncludeCentralAdministration

 Afficher une application en particulier


Get-SPWebApplication http://url_de_application_web

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 317


AN2 PowerShell et SharePoint
 Obtenir les membres de l’application Web
Get-SPWebApplication http://url_de_application_web | Get-Member

Manipulation de collections de sites


 Lister les collections de site
Get-SPSite http://srv1/sites/*

 En filtrant sur un template se site d’équipe :


Get-SPSite | Get-SPWeb –Filter {$_.Template –eq “STS#1”}

 En filtrant sur le propriétaire :


Get-SPSite -Filter {$_.Owner -eq "koolvoyage\sleenhardt"}

 Création de nouvelle collection de sites


New-SPSite -Url http://srv1/sites/test -OwnerAlias KoolVoyage\johan -Name "Test
Site" -Template STS#0

 Suppression de collection de sites


Remove-SPSite http://srv1/sites/test -Confi rm:$false

Manipulation de sites SharePoint


 Obtenir tous les sites d’un template particulier
Get-SPSite | Get-SPWeb –Filter {$_.Template –eq “STS#1”}

 Obtenir tous les sites, en affichant le titre et l’url


Get-SPWebApplication –IncludeCentralAdministration | Get-SPSite |Get-SPWeb |
Sort-Object Url | Format-Table Title, Url

 Création d’un site dans une collection


New-SPSWeb –Url http://site.contoso.com/teams/IT/SP2010,
-Template “STS#1” –Name “SP 2010 Implementation”

Manipulation des composants d’un site


 Obtenir les listes d’un site SharePoint
(Get-SPWeb http://sharepoint/team/blog).Lists

 Affichage avec des critères et un format de tableau


(Get-SPWeb http://sharepoint/team/blog).lists | Sort-Object Title | Format-Table
Title, Id, ItemCount, hasUniqueRoleAssignments, EnabledAttachments, EnableThrottling

 Obtenir une liste en particulier par son index


(Get-SPWeb http://sharepoint/team/blog).lists[2] | Format-Table Title, Id,
ItemCount, hasUniqueRoleAssignments, EnabledAttachments, EnableThrottling

 Obtenir une liste en particulier par son titre


(Get-SPWeb http://sharepoint/team/blog).lists[“Links”] | Format-Table Title, Id,
ItemCount, hasUniqueRoleAssignments, EnabledAttachments, EnableThrottling

Prise de notes

318 Stéphane LEENHARDT - SupMicro tous droits 2019


AN2 PowerShell et SharePoint
 Obtenir le nom d’un template de liste
(Get-SPWeb http://sharepoint/team/blog).ListTemplates | Where-Object {$_.Name –eq
“Links”}

 Ajouter une nouvelle liste de liens (template 103)


(Get-SPWeb http://sharepoint/team/blog).Lists.Add(“Les Liens”, “les meilleurs liens”,
103)

 Supprimer une liste


$listId = (Get-SPWeb http://sharepoint/team/blog).lists[“Les Liens”].Id
(Get-SPWeb http://sharepoint/team/blog).lists.Delete($listId)

Exemple d’ajout de fichier dans SharePoint depuis un dossier du réseau

$dossierPartage = "\\stationServeur\d$\documents"
$adresseSiteWeb = "http://stationserveur"
$nomBibliotheque ="Documents"

Add-PsSnapin Microsoft.SharePoint.PowerShell
clear
Write-Host "Debut de chargement des fichiers depuis :" $dossierPartage
$spWeb = Get-SPWeb -Identity $adresseSiteWeb
$bibliotheque = $spWeb.GetFolder($nomBibliotheque)
$spFiles = $bibliotheque.Files

ForEach($fichier in Get-ChildItem $dossierPartage)


{
$spFiles.Add("$nomBibliotheque/$fichier",$fichier.OpenRead(),$true)>$null
}
Write-Host "Fin de chargement des fichiers dans :" $adresseSiteWeb/$nomBibliotheque

Exemple de mise à jour des données dans une bibliothèque


Demande : une colonne datePublication contient la date à laquelle un document doit être déplacé d’une
bibliothèque vers une autre. Chaque jour on vérifie si la date du document est égale à celle de la date
dans la colonne datePublication. Si la date est égale on déplace le document vers une autre bibliothèque.

Difficulté : utilisez la meilleure technique pour comparer une colonne de type Date avec la date du jour.
Le meilleur moyen est d’utiliser une requête CAML qui permet d’éviter de transformer les formats de
dates pour qu’ils soient conformes au format de SharePoint.
#DEBUT des parametres a configurer
$adresseSiteWeb = "http://stationserveur" #URL de la racine de la collection de sites
que l'on cible
$nomBibliothequeSource ="Documents"
$nomBibliothequeDestination ="Documents Publis"
#Attention ne pas mettre d'accent sur le nom de la bibliotheque ou sinon supprimer les
#caracteres avec accent dans le nom
$nomColonnePublication = "Date Publication"
#Colonne contenant le champ Date pour lequel on souhaite faire la comparaison
#FIN des parametres d'entrée

Add-PsSnapin Microsoft.SharePoint.PowerShell
clear
Write-Host "Debut"

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 319


AN2 PowerShell et SharePoint
$spWeb = Get-SPWeb -Identity $adresseSiteWeb
$bibliotheque = $spWeb.Lists[$nomBibliothequeSource]
#Creation de la requete CAML de recherche des elements a publier
$requete = "<Query><Where><Eq><FieldRef Name='" + $nomColonnePublication + "' /><Value
Type='DateTime'>[Today+0Day(s)]</Value></Eq></Where></Query>"
$query = New-Object Microsoft.SharePoint.SPQuery
$query.Query = $requete
$items = $bibliotheque.GetItems($query)

ForEach($ligne in $items)
{
Write-Host $ligne.Name
$fichier = $ligne.File
$destination = $nomBibliothequeDestination+"/"+$fichier.Name
$fichier.MoveTo($destination,$true) #on deplace le fichier vers la destination
}
$spWeb.Dispose()
Write-Host "Fin de chargement des fichiers dans :" $nomBibliothequeDestination

Planification de script PowerShell


Pour exécuter périodiquement les scripts PowerShell, l’administrateur du serveur Windows défini la
fréquence et le comportement dans le planificateur des taches du serveur :

Prise de notes

320 Stéphane LEENHARDT - SupMicro tous droits 2019


AN3 Introduction à JQuery

I.Programmation JQuery

JQuery est une librairie qui simplifie la programmation du JavaScript et du DHTML.


L’objectif est de simplifier la navigation dans l’arbre HTML, la gestion des événements, la création
d’animation et les interactions AJAX.
JQuery a pour objectif de changer la manière dont on programme du JavaScript.

➢ JQuery est léger de l’ordre 26 Ko (dans sa version simplifiée)


➢ Compatible CSS 3
➢ Compatible multi-navigateurs : IE 6, FireFox 2, Safari 3, Opera 9, Chrome

Cette librairie a été développée en 2005 et évolue depuis en s’enrichissant de nouvelles fonctionnalités.
1) Principes de développements JQuery
Installer JQuery
Pour installer JQuery il suffit de télécharger le « JQuery Starterkit » qui fournit les librairies et des fichiers
CSS.
L’ajout dans une page est simple :
<script type="text/javascript" src="jquery.js"></script>

Une fois la librairie JQuery intégrée dans la page, la première démarche de développement sera d’utiliser
les sélecteurs JQuery pour obtenir les accès sur les objets de la page.

Avant de pouvoir manipuler le document, il faut s’assurer que celui est entièrement chargé dans le
navigateur. Pour cela on enregistre un événement JQuery « ready » :
$(document).ready(function() {
// Le DOM est pret, on peut travailler dessus
});
L’instruction $(document) est un sélecteur JQuery permettant d’obtenir facilement les objets de la page.
2) La fonction jquery()
jQuery repose sur une seule fonction : jQuery() ou $(). Comme toutes les fonctions JavaScript elle accepte
des paramètres, et retourne un objet, que nous appellerons par la suite “objet jQuery”.

Concernant les paramètres acceptés, nous pouvons passer :


3) Une fonction
Dans ce cas, jQuery va exécuter cette fonction lorsque la page sera chargée par le navigateur. Plus
précisément, lorsque le DOM sera chargé.

C’est pourquoi on encapsule souvent l’ensemble du code écrit en jQuery dans :


$(function(){
// ...
});
On s’assure ainsi que le code sera exécuté une fois la page chargée, et on est sûr de pouvoir manipuler le
DOM sans erreur. Contrairement à l’évènement window.onload, le chargement complet des images de la
page n’est pas nécessaire.
Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 321


AN3 Introduction à JQuery
4) Une chaine de caractères (query)
5) Les sélecteurs CSS
Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Il est alors facile de cibler
facilement les nœuds DOM qui nous intéressent.

Par exemple :
var mon_objet_jQuery = $("#mon_image");
var mon_objet_jQuery = $("#menu a");
Ou encore :
var mon_objet_jQuery = $("#id > .classe, #id td:last-child");
Notez au passage que contrairement au support CSS des navigateurs, la librairie comprends tout à fait les
pseudos-classes et les pseudos-éléments.

Les sélecteurs jQuery


Les sélecteurs dans JQuery sont une combinaison de CSS 1-3 et d’expressions XPath. JQuery utilise le
meilleur de ces deux langages pour les combiner en expressions JQuery.
Les sélecteurs permettent d’obtenir les éléments :
➢ Obtenir des valeurs d’attributs
➢ Filtrer les éléments obtenus
➢ Filtrer les éléments enfants
➢ Filtrer le contenu
➢ Programmer les Formulaires
➢ Programmer la hiérarchie
➢ Filtre de visibilité

Comprendre la différence entre sélection CSS et XPath dans JQuery n’est pas toujours évidente, tant les
deux langages sont confondus !
Syntaxe :
Un sélecteur est déclaré en utilisant la syntaxe : $(‘selecteur’)

Ainsi les expressions suivantes sont conformes à la syntaxe JQuery :


$("div,span,p.myClass")ou $("*") ou $("div") ou $("div,p,span")

Sélecteurs de base
Ils sont basés sur la spécification CSS 1 et donc forcement compatibles avec tous les navigateurs.
Sélecteur Description
* Le sélecteur * retourne tous les éléments, il est extrêmement lent : il faut
l’utiliser avec précaution.
.class JQuery utilise la fonction native JavaScript getElementsByClassName() si le
navigateur le permet. Ce sélecteur retourne les classe CSS d’un ou plusieurs
elements (attribut class)
element JQuery utilise la fonction native JavaScript getElementsByTagName () si le
navigateur le permet. Ce sélecteur retourne les éléments pour un nom de
balise donné
#id Retourne l’élément avec l’id spécifié, cette méthode est une des plus rapide
(utilise getElementById())

Prise de notes

322 Stéphane LEENHARDT - SupMicro tous droits 2019


AN3 Introduction à JQuery
(‘selecteur1,selecteur2, On peut combiner plusieurs sélecteurs (séparés par ,) dans une même
Selecteur3’) instruction. Le résultat est ainsi la combinaison de tous les sélecteurs qui est
placé dans un même résultat.

Il existe des sélecteurs spécifiques à jQuery qui ne trouvent pas d’équivalences en CSS. Ils sont toutefois
très pratiques. Par exemple :
var mon_objet_jQuery = $('tr:odd td');
// les `td` dans les `tr` impairs var mon_objet_jQuery = $("p:eq(4)");
// le quatrième paragraphe var mon_objet_jQuery = $("p:lt(8)");
// les sept premiers paragraphes

6) Méthodes
Maintenant que nous avons un objet jQuery, il va falloir l’utiliser. Et pour cela toute une palette de
méthodes sont disponibles dans la bibliothèque : manipulation du DOM, des CSS, des évènements et
autres effets visuels.

Si on désire par exemple masquer progressivement les paragraphes d’une page, on utilise :
$("p").fadeOut();
Soit sans passer de paramètre comme cela, soit en précisant une durée en mili-secondes ou encore à
l’aide des chaines slow, fast et normal.

Deux autres exemples :


$("li").html("lorem <strong>ipsum</strong> dolor");
$("#menu a").click(function(){
window.open($(this).attr("href"));
return false;
});
Dans le dernier, vous remarquerez qu’on combine des fonctions JavaScript “classiques” au code jQuery,
mais aussi qu’on transforme l’objet courant this en objet jQuery avec $(this).
7) Callback
Certaines fonctions (comme la fonction fadeOut()) acceptent une autre fonction en paramètre. Cette
dernière sera exécutée à la fin de l’exécution de la première. C’est ce qu’on appelle un callback.

Cela permet par exemple de créer des animations :


$(".test").fadeOut("slow",function(){
$(this).fadeIn("slow");
});

8) Chainabilité
On l’a vu les méthodes jQuery retournent un objet jQuery. Cela permet de “chainer” les fonctions.
Ainsi au lieu d’écrire :
$(".toto").append(" un texte");
$(".toto").css("border","1px solid red");
$(".toto").addClass("titi");
$(".toto").removeClass("toto");
On peut simplifier par l’exécution du code par :
$(".toto").append(" un texte").css("border","1px solid red").addClass("titi").removeClass("toto");

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 323


AN3 Introduction à JQuery
9) Utilitaires
Parmi les méthodes jQuery on trouve quelques fonctions très pratiques qui seront employées assez
souvent : length et size

Ces deux techniques sont équivalentes (mais attention à la syntaxe qui diffère). Elles retournent le
nombre d’éléments d’un objet jQuery.
C’est très pratique pour tester la présence d’un élément dans la page également.
if($("#form").length) {
// ...
}
$("img").size();
➢ each :
Là encore jQuery permet de se simplifier les tâches les plus courantes en JS. Pour boucler sur une liste
d’éléments, il suffira donc d’écrire :
$("img").each(function(){
console.log($(this).attr("src"));
});
➢ Browser :
Pour tester facilement quel navigateur est utilisé et sa version on utilisera par exemple :
if($.browser.msie) {
if($.browser.version > 6) {
// ...
}
}
➢ trim :
On trouve aussi d’autres utilitaires comme trim qui permet de supprimer les espaces en début et fin de
chaine.
$.trim(" une chaine ");

II.Ajax
jQuery permet de créer en quelques lignes des requêtes AJAX sans se soucier de l’inter-compatitibilité des
navigateurs. Également, à l’aide de paramètres simples, il est possible de personnaliser le formatage de
ses requêtes.
1) La méthode $.ajax()
Cette fonction est sûrement celle que vous utiliserez le plus avec jQuery. Déterminez les trois paramètres
de base : la méthode utilisée (POST ou GET), l’URL de la page appelée et l’action à effectuer.
$.ajax({
type: "POST",
url: "test.html",
success:
function(retour){
alert("Données retournées : " + retour );
}
});

2) Requête sur un lien

Généralement, on utilise des requêtes AJAX sur des liens hypertextes (balise <a>) afin d’avoir des pages
tout de même accessible si le Javascript est désactivé. Ainsi, on peut automatiser la mise en place de
requêtes en récupérant l’attribut href de chaque lien avec l’appel $(this).attr("href").
Prise de notes

324 Stéphane LEENHARDT - SupMicro tous droits 2019


AN3 Introduction à JQuery

Dans cet exemple, lorsque l’on clique sur un lien possédant la classe CSS «test», le code HTML de la page
liée s’affiche dans la balise possédant l’id «recipient».
$("a.test").click(function() {
$.ajax({
type: "POST",
url: $(this).attr("href"),
success: function(retour){
$("#recipient").empty().append(retour);
}
});
return false;
});

3) Requête sur un formulaire


De la même façon, on peut envoyer un formulaire en AJAX lors de sa soumission :
$("form.test").submit(function() {
s = $(this).serialize();
$.ajax({
type: "POST",
data: s,
url: $(this).attr("action"),
success: function(retour){
$("#recipient").empty().append(retour);
}
});
return false;
});
À noter que pour un formulaire, il faut le sérialiser – cad récupérer tous les valeurs du formulaire – et
passer ses données dans le paramètre data.
4) Paramètres de la fonction $.ajax()
datatype • xml: Retourne un document XML pouvant être réutilisé via jQuery.
• html: Retourne un document HTML comme du text sans mise en
forme où les scripts sont interprétrés.
• script: Retourne une réponse JS comme du texte sans mise en forme.
• json: Interpréte une réponse JSON et retourne un objet Javascript.

url L’URL à cibler


type Le type de requête POST or GET (GET par défaut).
dataType Format de réponse attendu.
ifModified Autorise la response si elle a changé depuis la dernière requête (false par
défaut).
timeout Redéfini le temps de réponse maximum.
global Utilisation automatique des déclencheurs d’événements (true par
défaut).
error Fonction appelée en cas d’erreur.
success Fonction appelée en cas de succès.
complete Fonction appelée en fin de requête, peu importe le succès ou non.
data Données envoyées en GET.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 325


AN3 Introduction à JQuery
contentType Type de contenu envoyé (application/x-www-form-urlencoded par
défaut).
processData Option à passer en false si vous souhaitez envoyer des DOMDocuments.
async Option d’asynchronisation (true par défaut).
beforeSend Fonction appelée avant la requête.

5) Les fonctions-raccourcis
Il existe aussi plusieurs fonctions prédéfinies ayant pour but d’éviter de configurer ses requêtes AJAX de
manière hasardeuse. Ainsi vous pouvez utiliser :
$.post("test.aspx"); Effectue une requête en POST sur la page «test.aspx».
$.get("test.aspx"); Effectue une requête en GET sur la page «test.aspx».
$.getIfModified("test.aspx"); Effectue une requête en GET sur la page «test.aspx» si elle a changé.
$.getJSON("test.js", Effectue une requête en JSON sur le script «test.js».
function(json){alert(json);});
$.getScript("test.js"); Va chercher le script «test.js».

6) Les fonctions solitaires


À l’aide de quelques fonctions esseulées, il est possible de faire corréler des éléments HTML avec l’AJAX.
Ainsi, on peut appliquer des comportements à des éléments HTML lors de l’exécution de requêtes AJAX.
Ceci sert par exemple pour afficher une boîte de dialogue à chaque requête de l’utilisateur.
ajaxComplete() Affiche un contenu lorsque la requête est terminée.
$("#msg").ajaxComplete(function(request, settings){
$(this).append("Requête terminée.");
});
ajaxError() Affiche un contenu lorsque la requête retourne une erreur.
$("#msg").ajaxError(function(request, settings){
$(this).append("Erreur de retour.");
});
ajaxSend() Affiche un contenu lors du début du lancement de la requête.
$("#msg").ajaxSend(function(request, settings){
$(this).append("Début du lancement de la requête.");
});
ajaxStart() Affiche un contenu lorsque la requête est lancée.
$("#msg").ajaxStart(function(){
$(this).show();
});
ajaxStop() Affiche un contenu lorsque la requête est arrêtée.
$("#msg").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess() Affiche un contenu lorsque la requête est exécutée avec succès.
$("#msg").ajaxSuccess(function(request, settings){
$(this).append("Requête réussie.");
});
load() Charge un contenu externe.
$("#msg").load("test.html");
loadIfModified() Charge un contenu externe s’il a été modifé.

Prise de notes

326 Stéphane LEENHARDT - SupMicro tous droits 2019


AN3 Introduction à JQuery
$("#msg").loadIfModified("test.html");

III.Limitations et inconvénients

jQuery, nous l’avons vu, est une excellente bibliothèque JavaScript. Cependant, on oublie trop souvent
qu’elle présente aussi quelques défauts.
1) Défauts inhérents à la notion de bibliothèque
Comme pour toutes les bibliothèques (JS, CSS ou autres), le but est de simplifier à l’utilisateur la tâche.
Simplification, raccourcis, comportements automatiques… il faut bien l’avouer, cela donne aussi moins de
contrôle sur le code produit. Aussi à moins de pouvoir parcourir les entrailles de jQuery en détail, il faut
s’attendre à faire quelques concessions sur vos méthodes habituelles de travail.

De la même manière, savoir utiliser de jQuery ne fait pas tout. S’il vous manque des bases importantes sur
le HTML, le CSS ou même l’accessibilité, jQuery ne fera qu’empirer tout ça. Il faut avant tout savoir ce que
l’on fait et ce que ça implique.

Donc tien de tel qu’une bonne expérience en JS ou autre avant d’appréhender au mieux la bibliothèque.
2) Défauts de la bibliothèque jQuery
Le projet est porté par une grande communauté, nous l’avons vu. Revers de la médaille, il va être très
difficile d’organiser tout ce petit monde. Ainsi, au fil de l’évolution de la bibliothèque, on pourra trouver
des incompatibilités avec les plugins, des méthodes qui jusqu’alors marchaient très bien qui sont
abandonnées, etc.

Projet dynamique implique aussi réactivité de votre part. Prenez également bien soin à choisir les bons
plugins.

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 327


AN4 Rendus coté-client

Client Side Rendering


Pour référencer vos fichiers dans la propriété JSLink vous pouvez spécifier un jeton de remplacement
(Token) ainsi qu’un séparateur (|) si vous avez plusieurs fichiers.
Les jetons disponibles sont les suivants :

• ~site : correspond au URL du site Web courant.


• ~sitecollection : correspond au URL de la collection de site parent du site Web courant.
• ~layouts : correspond au dossier « _layouts/15 » de la web application.
• ~sitelayouts – correspond au dossier layouts du site courant (ex :
site/monsite/monsoussite/_layouts/15).
• ~sitecollectionlayouts : correspond au dossier layouts de la collection de site
courante (Ex: /sites/monsite/_layouts/15).
• ~sitelayouts – correspond au dossier layouts du site courant (Ex:
/site/monsite/monsoussite/_layouts/15).

En utilisant ces jetons avec le séparateur on peut donc référencer plusieurs fichiers de scripts dans le
JSLink.

Ex : ~site/style library/monScript1.js|~sitecollection/style library/monScript2.js.

I.Fonctionnement technique

À l’intérieur de ces fichiers, le JavaScript est utilisé pour « overrider » :


• la manière dont les données sont affichés
• le contenu à afficher

Techniquement, on construit un objet qui sera ensuite utilisé afin d’enregistrer l’override du template.
L’objet « overrideCtx » peut ensuite interagir avec ces propriétés :
• View
• Header
• Body
• Footer
• Group
• Item
• Fields

Prise de notes

328 Stéphane LEENHARDT - SupMicro tous droits 2019


AN4 Rendus coté-client

• OnPreRender
• OnPostRender
Dans l’exemple on utilise la propriété Fields avec ce format :
overrideCtx.Templates.Fields = {NomDuChamp: {Porté : Override}}
• NomDuChamp : Le nom interne du champ que l’on veut overrider.
• Porté : Les choix possibles « View », »DisplayForm », »EditForm », et « NewForm » permettent de
spécifier l’endroit ou l’on veut faire l’override.
• Override : Contient une chaîne HTML ou une fonction à exécuter à l’intérieur de tags « <#= #> ».

Prise de notes

Stéphane LEENHARDT - SupMicro tous droits 2019 329


AN5 Cartographie Site Moderne

Cartographie des zones du site moderne

330 Stéphane LEENHARDT - SupMicro tous droits 2019


AN5 Cartographie Site Moderne

Stéphane LEENHARDT - SupMicro tous droits 2019 331


AN5 Cartographie Site Moderne

332 Stéphane LEENHARDT - SupMicro tous droits 2019

Vous aimerez peut-être aussi