Une liste SharePoint peut dire beaucoup avec un seul mot mais pas toujours assez pour tout le monde. Je me suis retrouvé avec une colonne “Phase” que tout le monde voyait au quotidien et pourtant la question revenait souvent : “Qu’est-ce que ça veut dire exactement Phase C”. Plutôt que d’écrire une page d’aide j’ai choisi de laisser la liste s’expliquer elle-même. L’idée est simple : afficher une étiquette colorée pour chaque valeur et montrer une petite description au survol. Pas d’application à déployer pas de script côté serveur juste la mise en forme JSON de SharePoint.
Voici le format que j’utilise. Il colore l’étiquette selon la valeur et affiche une info-bulle claire quand on passe la souris. J’ai anonymisé les libellés en “Phase A…F” pour que tu puisses adapter facilement à ton contexte.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": { "display": "flex", "flex-wrap": "wrap" },
"children": [
{
"elmType": "div",
"style": {
"padding": "4px 8px",
"border-radius": "16px",
"display": "flex",
"align-items": "center",
"margin": "4px"
},
"attributes": {
"title": "=if(@currentField == 'Phase A','Idée en attente de priorisation', if(@currentField == 'Phase B','Exploration et cadrage en cours', if(@currentField == 'Phase C','Version initiale prête pour un premier déploiement', if(@currentField == 'Phase D','Solution utilisée avec retours des utilisateurs', if(@currentField == 'Phase E','Solution stable et adoptée largement', if(@currentField == 'Phase F','Fin de vie prévue','Phase non définie'))))))",
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": ["@currentField", "Phase B"]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": ["@currentField", "Phase C"]
},
"sp-css-backgroundColor-BgLightBlue sp-css-borderColor-LightBlueFont sp-css-color-LightBlueFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": ["@currentField", "Phase D"]
},
"sp-css-backgroundColor-BgPeach sp-css-borderColor-PeachFont sp-css-color-PeachFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": ["@currentField", "Phase E"]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": ["@currentField", "Phase F"]
},
"sp-css-backgroundColor-BgRed sp-css-borderColor-WhiteFont sp-css-color-WhiteFont",
"sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
]
}
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": { "padding": "0 3px" },
"txtContent": "@currentField"
}
]
}
]
}
Le code paraît intimidant à première vue, mais en réalité il est logique.
Chaque phase correspond à une couleur : doré pour l’exploration, bleu pour l’introduction, pêche pour la croissance, vert menthe pour la maturité, rouge pour le déclin.
Au survol, une info-bulle s’affiche avec une courte explication.
Le tout se mélange parfaitement à l’interface moderne de SharePoint.
Le rendu est propre. Chaque valeur devient un petit badge coloré facile à lire et au survol une phrase courte explique ce que la phase veut dire. C’est discret et très utile. Tu peux ajouter ta capture d’écran juste après ce bloc pour montrer l’avant après.
Comment je l’intègre. J’ouvre la liste puis la vue où la colonne est visible. Je clique l’entête de la colonne Phase et je choisis Mettre en forme cette colonne. Dans le panneau à droite je passe en Format personnalisé puis Modifier le JSON. Je colle le code ci-dessus et j’enregistre. Si les valeurs de ma colonne ne sont pas Phase A…F je remplace ces libellés dans le JSON dans la condition @currentField pour chaque couleur et dans le texte du title. Je rafraîchis la page si rien ne s’affiche tout de suite. Je regarde deux ou trois lignes je survole et je valide que le texte est clair. Quand tout est bon je garde une copie du JSON dans une bibliothèque Templates pour pouvoir le réutiliser ailleurs.
Deux micro détails font une vraie différence au quotidien. D’abord des phrases de survol courtes qu’un non spécialiste comprend d’un coup. Ensuite des couleurs cohérentes avec le sens que tu veux porter. Par exemple doré pour l’exploration bleu pour l’introduction pêche pour la croissance vert pour la maturité rouge pour le déclin. Tu peux changer les classes de couleur si ta charte graphique l’exige les préfixes sp-css-backgroundColor et sp-css-color proposent plusieurs variantes.
Ce n’est pas une révolution technologique c’est un petit soin de design d’interface qui enlève des frictions. Les gens comprennent sans demander et toi tu économises des explications. C’est exactement le genre d’amélioration qui fait paraître SharePoint plus intelligent sans le compliquer.
Références Microsoft utiles
Pour aller plus loin :