SharePoint Saturday Montreal#SPSMontreal
SharePoint Saturday
Montreal 2018
Le 2 juin 2018
Personnaliser l'affichage de vos colonnes avec la mise en forme et les extensions du SPFx
Samuel Lévesque
SharePoint Saturday Montreal#SPSMontreal
Personnaliser l'affichage de vos colonnes avec la
mise en forme et les extensions du SPFx
Dans le passé, plusieurs techniques pouvaient êtres utilisées pour personnaliser l'affichage de vos colonnes : JSLink, JavaScript dans une
WebPart Éditeur de contenu, code serveur, etc...Ces façons de faire ne sont plus supportées dans les sites modernes.
Samuel Lévesque
Architecte SharePoint
@sharepointerie http://sharepointerie.com
SharePoint Saturday Montreal#SPSMontreal
16h00
3435 St Laurent
SharePoint Saturday Montreal#SPSMontreal
Go
ld
Bro
nze
Thanks to our sponsors !
SharePoint Saturday Montreal#SPSMontreal
Objectifs
• Présenter différents scénarios de personnalisation supporté dans l’environnement moderne de SharePoint Online;
• Présenter les avantages et inconvénients.
Public cible : Développeur / Super-utilisateurs
Niveau : 200
SharePoint Saturday Montreal#SPSMontreal
Sommaire de la présentation
Pourquoi ?Comment ? Recommandations
SharePoint Saturday Montreal#SPSMontreal
Historique – Personnaliser l'affichage de colonnes
SP2010 : XSL/XSLT
JavaScript incorporée (WebParts éditeur de contenu)
Balises HTML dans les champs calculé
SP2013 : Client side rendering (CSR) JSLINK
SPO : 2016 → Site d’équipe moderne → Fin de la prise en charge du JavaScript incorporée
Juin 2017 → Fin de la prise en charge des balises HTML dans les champs calculés
Septembre 2017 → SPFx Extension → Field Customizer
SharePoint Saturday Montreal#SPSMontreal
Comparatif HTML dans un
champ calculé
JavaScript
incorporée
Client side
rendering (JSLINK)
Mise en forme
(JSON)
Field Customizer
(SPFx Extension)
Déploiement
simple et rapide
Supporté dans
l’experience
moderne
Code
personnalisé ?
Limitation sur le
type de colonne
Flexibilité
Mise en forme
conditionnelle
Liens d'action*
SharePoint Saturday Montreal#SPSMontreal
Scénarios possibles
• 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.
SharePoint Saturday Montreal#SPSMontreal
Exemple mise en forme
SharePoint Saturday Montreal#SPSMontreal
Exemple Field Customizer
SharePoint Saturday Montreal#SPSMontreal
Sommaire de la présentation
Pourquoi ?Comment ? Recommandations
SharePoint Saturday Montreal#SPSMontreal
Mise en forme / Comment ?
• Consiste à construire un objet JSON qui décrit les éléments affichés lorsqu’un champ est inclus
dans une vue de liste, ainsi que les styles à appliquer à ces éléments.
• La mise en forme de la colonne ne modifie pas les données dans l’élément de liste ou le fichier;
elle change uniquement la façon dont elles apparaissent lorsque les utilisateurs parcourent la
liste.
• Toute personne pouvant créer et gérer des vues dans une liste peut utiliser la mise en forme
pour configurer l’affichage des champs;
• Nécessite des connaissances en JSON + HTML + CSS;
SharePoint Saturday Montreal#SPSMontreal
Syntaxe détaillé en JSON
• elmType – Spécifie le type d'élément : div, span, a, img, svg, path, button
• txtContent - Propriété facultative qui spécifie le contenu du texte de l'élément
spécifié par elmType. @currentField permet d’évaluer la valeur du champ actuel.
• style - Propriété facultative qui spécifie les attributs de style à appliquer à
l'élément spécifié par elmType. Attributs de style limité.
• attributes - Propriété facultative qui spécifie des attributs supplémentaires à
ajouter à l'élément : href, rel, src, class, target, title, role, iconName, d, aria
• children - Propriété facultative qui spécifie les éléments enfants de l'élément
spécifié par elmType
• class – Spécifie la classe prédéfinie pour le style et l'action
• operator - Spécifie le type d'opération à effectuer comme =, -, +, <, >, <=, etc…
• operands - Spécifie les paramètres ou les opérations d'une expression
SharePoint Saturday Montreal#SPSMontreal
Exemple JSON
{
"elmType": "div",
"txtContent": "@currentField"
}
Le format de colonne le plus simple est celui qui place la valeur du champ dans un élément <div />
JSON
SharePoint Saturday Montreal#SPSMontreal
Exemple JSON Cet exemple applique la couleur rouge du champ en cours lorsque la valeur à l'intérieur de la
colonne DueDate (Nom interne) d'un élément est antérieure à la date / heure actuelle.
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"color": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$DueDate]",
"@now"
]
},
"#ff0000",
""
]
}
}
}
JSONRésultat
SharePoint Saturday Montreal#SPSMontreal
Exemple JSON
Le format de colonne le plus simple est celui qui place la valeur du champ dans un élément <div />
{
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"target": "_blank",
"href": {
"operator": "+",
"operands": [
"http://finance.yahoo.com/quote/",
"@currentField"
]
}
}
}
JSONRésultat
SharePoint Saturday Montreal#SPSMontreal
Mise en forme / Comment?
• Lors de la création d’une colonne
• En modifiant une colonne existante
SharePoint Saturday Montreal#SPSMontreal
Plusieurs modèles disponibles
https://github.com/SharePoint/sp-dev-column-formatting/tree/master/samples
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
SharePoint Saturday Montreal#SPSMontreal
Column formatter 1.2• Gratuit sur GitHub;
• Rend la personnalisation de colonne plus facile pour un utilisateur sans connaissances JSON + HTML + CSS;
SharePoint Saturday Montreal#SPSMontreal
Column formatter 1.2
SharePoint Saturday Montreal#SPSMontreal
Démonstration
SharePoint Saturday Montreal#SPSMontreal
Field Customizer / Comment ?
• 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.
SPFx Extension
• Application Customizer
• Command Set
• Field Customizer
• Nécessite des connaissances en TypeScript/JavaScript + HTML + CSS
• Toolchain node.js, npm, and Gulp
SharePoint Saturday Montreal#SPSMontreal
Tutoriel Field Customizer
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer
SharePoint Saturday Montreal#SPSMontreal
Exemple Field Customizer
@override
public onRenderCell(event:
IFieldCustomizerCellEventParameters): void {
event.domElement.classList.add(styles.cell);
event.domElement.innerHTML = `
<div class='${styles.HelloWorld}'>
<div class='${styles.full}'>
<div style='width: ${event.fieldValue}px;
background:#0094ff; color:#c0c0c0'>
${event.fieldValue}
</div>
</div>
</div>`;
}
SharePoint Saturday Montreal#SPSMontreal
Quelques exemples disponibles
https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples
SharePoint Saturday Montreal#SPSMontreal
Migrer de JSLink vers Field Customizer
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/migrate-
from-jslink-to-spfx-extensions
SharePoint Saturday Montreal#SPSMontreal
Sommaire de la présentation
Pourquoi ?Comment ? Recommandations
SharePoint Saturday Montreal#SPSMontreal
Recommandation
1. Penser à convertir vos solutions « Legacy »
• JavaScript incorporée (WebParts éditeur de contenu)
• Balises HTML dans les champs calculé
• JSLINK
afin d’être supporté dans l’expérience moderne
2. Penser à adresser la personnalisation de champ dans votre gouvernance
SharePoint Saturday Montreal#SPSMontreal
Conclusion
SharePoint Saturday Montreal#SPSMontreal
Avantages
• JSON est un format standard pour plusieurs développeurs;
• Supporté par plusieurs outils et éditeurs;
• Permet d’effectuer de la personnalisation tout en conservant SharePoint Out of the box;
• Fonctionne avec les listes et bibliothèques modernes.
Inconvénients
Conclusion / Mise en forme
• Pas de code personnalisé;
• Possible problème de gouvernance similaire aux Script Editor WebPart;
• JSON + HTML + CSS pas si "conviviaux" pour un utilisateur moyen;
• Ne fonctionne pas en mode "classique".
SharePoint Saturday Montreal#SPSMontreal
Avantages• Fonctionne avec les listes et bibliothèques modernes.
• Code personnalisé permettant d’exécuter du JavaScript;
• Facilité à interroger SharePoint REST API & Microsoft Graph;
• Accès à TypeScript et aux nouveaux outils.
Inconvénients
Conclusion / Field Customizer
• Déploiement;
• Courbe d’apprentissage.
SharePoint Saturday Montreal#SPSMontreal
Questions ?
SharePoint Saturday Montreal#SPSMontreal
• Gestion des balises HTML dans les champs calculé de SharePoint
• Column formatter (Solution)
• Personnalisation des pages du site « modernes »
• https://github.com/SharePoint/sp-dev-column-formatting/tree/master/samples
• https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples
Références