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

&nbsp; ${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