Fin 2017 SharePoint online a progressé de manière spectaculaire et surpasse peut-être déjà la version 2016 serveur.
Dans cet article nous allons voir la nouvelle possibilité offerte par SharePoint pour personnaliser la mise en forme des colonnes d'une liste.
Nous nous sommes appuyé sur l'excellent « doc » Microsoft que nous avons évidemment testé : https://docs.microsoft.com/fr-fr/sharepoint/dev/declarative-customization/column-formatting
Nous avons utilisé une liste personnalisée relativement simple qui en présentation standard arbore l'aspect ci-dessous :
Il s'agit d'une liste d'activités d'un projet comportant les colonnes suivantes :
Un pourcentage d'avancement
Un statut
Une date de début prévisionnelle
Une date de fin Prévisionnelle
Un domaine de référence
Un responsable de l'activité
Un nombre de semaines supplémentaire à prévoir
Un budget initial
Un budget nouvellement évalué
Les données ont été créées uniquement afin de mettre en application les mises en forme nouvellement offerte par SharePoint ; la cohérence fonctionnelle étant toute relative.
Si nous affichons les paramètres de certaines colonnes nous constatons, désormais, une nouvelle zone paramétrable : Mise en forme de la colonne.
Cette nouvelle zone exploite désormais le format JSON pour personnaliser le rendu de la colonne dans l'affichage que je qualifierais de « enrichi ».
En format enrichi, nous pouvons constater une expérience d'affichage étonnante :
Ceci est rendu possible grâce à l'application d'un format JSON pour chaque colonne.
JSON ne modifie en rien les données de la liste mais simplement la façon dont celles-ci sont présentées.
Le principal intérêt de ce format est de pouvoir ainsi créer des mises en forme conditionnelles des plus simples aux plus complexes.
Il s'agit donc d'utiliser JSON pour appliquer des styles, des classes et des icônes aux champs, en fonction de la valeur contenu par ces champs.
Rentrons tout de suite dans le vif du sujet : c'est la meilleure façon de découvrir JSON et cette nouvelle fonctionnalité SharePoint Online.
Pour tester ces exemples il vous suffit de créer une liste personnalisée sur le même modèle que celle présentée avec des colonnes de mêmes noms et de mêmes types puis copier, coller et enregistrer les formats JSON.
Mise en forme conditionnelle sur une plage de nombre.
Il s'agit ici de mettre en forme le pourcentage d'avancement ; si ce pourcentage est inférieur ou égal à 70 % alors on applique la classe "sp-field-severity--warning"
Deux façons d'injecter le code JSON dans la colonne soit en passant par paramètre de la colonne (voir plus haut) soit directement en ligne en cliquant sur mettre en forme cette colonne et en utilisant la zone volet d'information (avantage du volet ; il existe un aperçu).
Personnellement je préfère passer par paramètre de la colonne ; le volet étant pour l'instant perfectible.
Copier le code et enregistrer l'effet visuel est immédiat. Et c'est magique.
{
"elmType": "div",
"txtContent": "@currentField",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
70
]
},
"sp-field-severity--warning",
""
]
}
}
}
La version avec un icône d'information.
Et le code s'y rapportant :
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
70
]
},
"sp-field-severity--warning",
""
]
}
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
70
]
},
"Error",
""
]
}
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
Plus de détail dans l'article originel : https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#conditional-formatting-based-on-a-number-range-basic
Il ne s'agit pas ici de refaire ce brillant article mais tout simplement de vous inciter à découvrir, tester et personnaliser par vous-mêmes les exemples
Avant de passer à un autre exemple, j'en profite pour vous montrer à quel point la version online est en avance sur la version serveur.
Il est désormais possible de modifier la largeur des colonnes en lignes en faisant glisser les limites de celles-ci :
Le bouton gauche de votre souris (clic sur la colonne) vous donne accès à de nouvelles fonctionnalités.
A tester absolument. C'est bluffant.
Le bouton droit de la souris dans la zone d'affichage de la liste renvoi aux fonctionnalités du bandeau Liste.
A noter PowerApps/Personnaliser les formulaires que nous testerons prochainement.
Le bouton droit de la souris sur une ligne de la liste donne des fonctionnalités liées à l'élément.
En particulier la possibilité d'obtenir un lien, de le copier et ou/de le partager avec éventuellement des personnes externes.
Mise en forme conditionnelle sur une plage de choix.
Il s'agit de la zone statut en version française
Terminé
En cours
En revue
A des problèmes
Bloqué
Copier, coller et enregistrer le code.
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"Terminé"
]
},
"sp-field-severity--good",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"En cours"
]
},
"sp-field-severity--low",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"En revue"
]
},
"sp-field-severity--warning",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"Bloqué"
]
},
"sp-field-severity--severeWarning",
"sp-field-severity--blocked"
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"Terminé"
]
},
"CheckMark",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"En cours"
]
},
"Forward",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"En revue"
]
},
"Error",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
"A des problèmes"
]
},
"Warning",
"ErrorBadge"
]
}
]
}
]
}
]
}
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
Résultat attendu :
Plus de détail sur : https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#conditional-formatting-based-on-the-value-in-a-text-or-choice-field-advanced
Mise en forme conditionnelle sur une date
Mise en forme de la donnée Date_de_fin par rapport à la date du jour @now.
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"color": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$Date_de_fin]",
"@now"
]
},
"#ff0000",
""
]
}
}
}
Mise en forme conditionnelle de la donnée Date_début_prev par rapport à une date fixe.
A noter que les caractères spéciaux dans les noms sont à éviter sinon les traduire comme ci-dessous :
Date_d_x00e9_but_prev
En cas de caractères spéciaux pour trouver le nom à reporter, aller dans paramètres de liste et copier le lien hypertexte associé à la colonne concernée
https://trupel.sharepoint.com/_layouts/15/FldEdit.aspx?List=%7BCAF2DB5E%2D40EE%2D44D5%2DBDF5%2DA371EB633666%7D&Field=Date%5Fd%5Fx00e9%5Fbut%5Fprev
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"color": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$Date_d_x00e9_but_prev]",
{
"operator": "Date()",
"operands": [
"6/01/2017"
]
}
]
},
"#ff0000",
""
]
}
}
}
Copier, coller et enregistrer.
Pour plus de détail : https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#apply-formatting-based-on-date-ranges
Mise en forme d'une donnée au format lien hypertexte
Il s'agit d'associer à la valeur d'un champ un lien hypertexte en correspondance avec la valeur du champ.
{
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"target": "_blank",
"href": {
"operator": "+",
"operands": [
"https://trupel.com/",
"@currentField"
]
}
}
}
Copier, coller et enregistrer. Puis cliquer sur le nom de domaine d'une activité.
Mise en forme d'une donnée de type personne
Ici il ne s'agit pas seulement d'une mise en forme conditionnelle à proprement parlé mais de l'ajout d'une action rapide sp-field-quickAction ; le clic sur l'icône associé à la donnée Responsable autorise l'ouverture de l'application par défaut associée à mailto et pré-affiche au destinataire spécifié dans la colonne un message préétabli.
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"padding-right": "8px"
},
"txtContent": "@currentField.title"
},
{
"elmType": "a",
"attributes": {
"iconName": "Mail",
"class": "sp-field-quickAction",
"href": {
"operator": "+",
"operands": [
"mailto:",
"@currentField.email",
"?subject=Etat d'avancement&body=Bonjour\r\nVeuillez trouver ci-dessous l'état d'avancement de mon activité.\r\n---\r\n",
"@currentField.title",
"\r\nPour plus de détail cliquer sur lien ci-dessous. https://trupel.sharepoint.com/Lists/MyNewList/DispForm.aspx?ID=",
"[$ID]"
]
}
}
}
]
}
Copier, coller et enregistrer. Cliquer sur l'icône. Le résultat est bluffant.
Pour plus de détail : https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#add-an-action-button-to-a-field-advanced
Mise en forme conditionnelle d'un nombre au format barre de donnée
Il s'agit ici de présenter des données de type nombre au format barre de donnée.
Cette mise en forme est moins probante que celles précédentes ; application de la class sp-field-dataBars
{
"debugMode": true,
"elmType": "div",
"txtContent": "@currentField",
"attributes": {
"class": "sp-field-dataBars"
},
"style": {
"width": {
"operator": "?",
"operands": [
{
"operator": ">",
"operands": [
"@currentField",
"20"
]
},
"100%",
{
"operator": "+",
"operands": [
{
"operator": "toString()",
"operands": [
{
"operator": "*",
"operands": [
"@currentField",
5
]
}
]
},
"%"
]
}
]
}
}
}
Copier, coller et enregistrer. Ce n'est pas mon préféré.
Pour plus de détail : https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#create-simple-data-visualizations
Mise en forme conditionnelle de type tendance
Il s'agit ici de comparer deux types d'information et d'en déduire une tendance d'évolution :
Classe sp-field-trending—up si l'évolution est à la hausse, classe sp-field-trending—down si l'évolution est la baisse ; accompagnée des icônes idoines.
{
"debugMode": true,
"elmType": "div",
"children": [
{
"elmType": "span",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": ">",
"operands": [
"[$BudgetE]",
"[$BudgetI]"
]
},
"sp-field-trending--up",
"sp-field-trending--down"
]
},
"iconName": {
"operator": "?",
"operands": [
{
"operator": ">",
"operands": [
"[$BudgetE]",
"[$BudgetI]"
]
},
"SortUp",
{
"operator": "?",
"operands": [
{
"operator": "<",
"operands": [
"[$BudgetE]",
"[$BudgetI]"
]
},
"SortDown",
""
]
}
]
}
}
},
{
"elmType": "span",
"txtContent": "[$BudgetE]"
}
]
}
Pour plus de détail : https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#show-trending-uptrending-down-icons-advanced
Et maintenant ?
Faire ses propres formats JSON en s'inspirant des exemples ci-dessus et d'autres existants.
Tous les liens.
https://docs.microsoft.com/fr-fr/sharepoint/dev/declarative-customization/column-formatting#creating-custom-json
https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#supported-column-types
https://github.com/SharePoint/sp-dev-column-formatting
https://code.visualstudio.com/Docs/languages/json
Et se constituer une bibliothèque de JSON prêt à l'emploi pour les utiliser à bon escient en fonction des demandes de vos utilisateurs.