Il est possible de mettre en forme les vues, listes et bibliothèques SharePoint Online (Microsoft 365) et SharePoint 2019 à l’aide de fichiers JSON à inclure directement dans les paramètres de la liste.

Découvrez ci-dessous, étape par étapes, comme transformer une simple liste SharePoint en un indicateur élégant et pratique.

Commençons par créer une liste « Suivi de votre demande » dans un site SharePoint « moderne ». Les sites de type classique ne permettent pas de modifier le rendu des affichages.

Créer une nouvelle liste et ajouter les colonnes Etape1, Etape2, Etape3

Ajouter ensuite un premier élément

Les indicateurs (Etapes) sont bien visibles, mais simplement avec un texte (Oui, Non, Aucun, etc.).

Nous allons maintenant créer les vignettes qui seront affichées dans les colonnes « Etapes ».

Ouvrir PowerPoint, préparer une vignette et l’enregistrer en tant qu’image…

Retourner sur votre site SharePoint, ajouter une Application de type « Bibliothèque d’images » et ajouter les images.

Nous disposons d’une liste SharePoint « Suivi de votre demande » et d’une bibliothèques d’images « Vignettes« .

Nous allons maintenant modifier la mise en forme de la vue actuelle de la liste « Suivi de votre demande » en formatant les différentes colonnes à l’aide d’un fichier JSON.

Depuis votre liste « Suivi de votre demande » cliquer sur le menu déroulant qui affiche les différents affichages et sélectionner le menu « Mettre en forme la vue actuelle »

Nous allons commencer par cacher la ligne qui affiche le titre des colonnes.

Dans le menu déroulant « Appliquer la mise en forme à » choisir « Ligne entière » et ensuite cliquer sur le lien « Mode Avancé » qui se trouve au bas de la page.

Copier ensuite le JSON ci-dessous pour indiquer à la liste de ne plus afficher le titre des colonnes.

{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"tileProps": {
"hideSelection": true,
"width": "180",
"height": "300"
}
}

Nous allons maintenant remplacer la valeur (Oui / Non) de la colonne « Etape 1 » par une pastille jaune si la valeur est égale à non ou alors une pastille de couleur verte si la valeur est égale à oui.

Retourner dans le menu « Mettre en forme la vue actuelle »
Choisir la colonne « Etape1 » et cliquer sur le lien « Mode Avancé »

Dans l’espace réservé pour le JSON, copier le code ci-dessous et cliquer sur le bouton « Enregistrer »

{
  « $schema »: « https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json »,  
  « elmType »: « div »,
  « style »: {
    « display »: « flex »,  
    « flex-direction »: « column »
  },
  « children »: [
      {
        « elmType »: « div »,
        « style »: {
        « width »: « 70px »,
        « height »: « 70px »,
        « overflow »: « hidden »,
        « border-radius »: « 50% »
      },
     « children »: [
     {
        « elmType »: « img »,
        « attributes »: {
           « src »: « =if(@currentField == ‘Oui’, @currentWeb + ‘/Vignettes/1-vert.png’, @currentWeb + ‘/Vignettes/1-jaune.png’) »
        },
       « style »: {
          « position »: « relative »,
          « top »: « 50% »,
          « left »: « 50% »,
          « width »: « 100% »,
          « height »: « auto »,
          « margin-left »: « -50% »,
          « margin-top »: « -50% »
        }
       }
     ]
    }
  ] 
}

A la ligne 21 du JSON, le code indique si la valeur actuelle est égale à Oui alors affiche l’image qui se trouve dans la bibliothèque /Vignettes/ et qui se nomme 1-vert.png, sinon affiche l’image 1-jaune.png.

Faire de même pour l’étape 3 de notre exemple.

En modifiant la valeur de la colonne, la pastille change immédiatement. Par la suite, un flux de travail (workflow) pourra changer automatiquement la valeur des colonnes ou encore un script PowerShell.

Pour l’étape 2, la condition pour l’affichage de la pastille est légèrement plus compliquée

« src »: « =if(@currentField == ‘Terminé’, @currentWeb + ‘/Images1/2-vert.png’, if(@currentField == ‘Annulé’, @currentWeb + ‘/Images1/2-rouge.png’, @currentWeb + ‘/Images1/2-jaune.png’)) »

Si la valeur actuelle est égale à « Terminé » alors affiche l’image 2-vert.png, si la valeur actuelle est égale à « Annulé » alors affiche l’image 2-rouge.png, sinon, affiche l’image 2-jaune.png.