Mise en forme des colonnes d’une liste SharePoint Online

Il est désormais possible d'appliquer un format personnalisé aux colonnes de vos listes SharePoint Online, le rendu sera similaire à celui de la mise en forme conditionnelle d'Excel.

De la même manière qu’il est possible d'appliquer des styles à vos colonnes de liste (avec du code CSS), il est également possible de modifier le contenu des champs. Cela peut être fait en ajoutant un "code" personnalisé aux paramètres de la colonne. Ce code doit être au format JSON et respecte un schéma défini.

NB : Cette fonctionnalité est applicable seulement pour les listes avec un affichage moderne

Liste des colonnes supportés / non supportés par cette mise en forme

Toute les colonnes d'une liste SharePoint Online ne sont pas éligibles à une mise en forme personnalisée. Ci-dessous un récapitulatif des colonnes concernées : 

Colonnes supportés

Colonnes non supportés 

Une seule ligne de texte Nom de fichier (dans les bibliothèques de documents)
Nombre Valeur calculée
Choix  
Personne ou groupe  
Oui/Non  
Lien hypertexte  
Image  
date et heure  
Recherche  
Titre (dans les listes)  


Liste SharePoint Online : mise en forme de base

Comme premier exemple, nous allons voir comment changer l'arrière-plan et la couleur du texte d'une colonne.

Pour obtenir le résultat présenté ci-dessus il vous suffit juste de coller le code ci-dessous dans la fenêtre de personnalisation.
Pour ajouter le code de formatage de colonne, accédez à votre liste et cliquez sur l'en-tête de la colonne, puis sur Paramètres de la colonne -> Mettre en forme cette colonne .

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "debugMode": true,
    "elmType": "div",
    "txtContent": "@currentField",
    "style": {
                "background-color": "PINK",
                "color": "white",
                "padding-left": "10px"
    }

 }

Dans cet exemple, nous définissons simplement l'élément de champ « "elmType" »comme « div » et le contenu « "txtContent" » c’est bien le contenu de la cellule. Ensuite, nous définissons le style pour cet élément en utilisant "style", le principe est le même qu'en CSS mais avec des paires clé-valeur =>Exemple Clé : "background-color" , Valeur : "PINK"

Liste SharePoint Online : mise en forme avancée

Créons maintenant une listé personnalisée pour la vérification de l’état d’avancement des tâches, nous pouvons essayer un formatage un peu plus avancé, comme créer une barre de données qui affichera le pourcentage d’avancement sous forme de barre avec des couleurs indicatives.

Pour avoir un tel résultat, il faudra suivre ces étapes :

  • Créez une colonne de type « Nombre »
  • Pour le contenu des cellules (1 est équivalent à 100%, 0.6 est équivalent à 60%, 0.2 est équivalent à 20%, …..)
  • Sur paramètres de la colonne, cliquez sur « Mettre en forme cette colonne »
  • Coller le script ci-dessous dans la fenêtre de formatage

Prendre rendez-vous - Sharepoint - Office 365

Cet exemple utilise le pourcentage de progression pour changer la couleur du champ.
> Pour faire une condition, nous devons utiliser l'opérateur "?"
> Dans ce cas, nous voulons avoir 3 couleurs d'arrière-plan différentes, donc nous devons imbriquer un autre opérateur conditionnel "?".

{
  {
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "debugMode": true,
  "elmType": "div",
  "txtContent": {
    "_comment": "Calcul du pourcentage On multiplie la valeur de la cellule <@currentField>, par 100 avec l’opérateur <*>",
    "operator": "+",
    "operands": [
      {
        "operator": "toString()",
        "operands": [
          {
            "operator": "*",
            "operands": [
              "@currentField",
              100
            ]
          }
        ]
      },
      "%"
    ]
  },
  "attributes": {
    "class": {
      "operator": "?",
      "_comment": "Comparaison du : contenu de la cellule  «@currentField»< 0.5 ->Moins de 50",
      "operands": [
        {
          "operator": "<",
          "operands": [
            "@currentField",
            "0.5"
          ]
        },
        "ms-bgColor-red ms-fontColor-black sp-field-dataBars ms-borderColor-redDark",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "<",
 "_comment": "Si la valeur de la cellule est < 1",
              "operands": [
                "@currentField",
                "1"
              ]
            },
            "ms-bgColor-yellow ms-fontColor-black sp-field-dataBars ms-borderColor-orangeLight",
            "ms-bgColor-tealLight ms-fontColor-black sp-field-dataBars ms-borderColor-tealDark"
          ]
        }
      ]
    }
  },
  "style": {
    "padding-left": "4px",
    "width": {
      "operator": "?",
 "_comment": "Condition 3 : Si la valeur de la cellule = 1",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            "1"
          ]
        },
        "100%",
        {
 "_comment": "Calcul du pourcentage et concaténation de la valeur calculée avec le caractère % ",
          "operator": "+",
          "operands": [
            {
              "operator": "toString()",
              "operands": [
                {
                  "operator": "*",

                  "operands": [
                    "@currentField",
                    100
                  ]
                }
              ]
            },
            "%"
          ]
        }
      ]
    }
  }
}

♦ Pour : "ms-bgColor-red ms-fontColor-black sp-field-dataBars ms-borderColor-redDark", nous appliquons directement des classes spécifiques à partir de  « Office UI Fabric »

  • Grâce à cette mise en forme, au lieu d'avoir seulement une liste de tâches, nous avons différents indicateurs visuels qui fournissent une meilleure expérience utilisateur.
  • Cette liste de tâches est juste un exemple simple illustrant quelques-unes des capacités de cette nouvelle fonctionnalité de mise en forme des colonnes d’une liste SharePoint Online.
  • J'ai remarqué quelques bugs d'affichage, surtout dans IE, donc je recommande d'utiliser Chrome ou Firefox (dernière version).
  • La customisation en javascript nécessite quand même un bon niveau technique pour une personnalisation plus avancée. En revanche avec Json, une compréhension de la philosophie du paramétrage => principe (clé, valeur) est suffisante.

Pour plus de script vous pouvez consulter la documentation officielle de Microsoft par rapport à ce sujet, comme vous pouvez consulter d’autres exemple fournis par les membres du comité GitHub.

Microsoft Digital Workplace

À propos de l'auteur : Aïcha KASSIMI