Ignorer les commandes du ruban
Passer au contenu principal
SharePoint

SharePoint

janv. 09
Format JSON de colonnes SharePoint

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 :

JSON001.jpg

 

Il s'agit d'une liste d'activités d'un projet comportant les colonnes suivantes :

 JSON002.jpg

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 ».

JSON003.jpg

En format enrichi, nous pouvons constater une expérience d'affichage étonnante :

JSON004.jpg

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).

 JSON005.jpg

JSON006.jpg

 

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",

            ""

         ]

      }

   }

}

JSON007.jpg                 JSON008.jpg         

La version avec un icône d'information.

JSON009.jpg
 

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 :

JSON010.jpg         JSON011.jpg

Le bouton gauche de votre souris (clic sur la colonne) vous donne accès à de nouvelles fonctionnalités.

A tester absolument. C'est bluffant.

 JSON012.jpg

Le bouton droit de la souris dans la zone d'affichage de la liste  renvoi aux fonctionnalités du bandeau Liste.

 JSON013.jpg

JSON014.jpg 

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.

JSON015.jpg 


En particulier la possibilité d'obtenir un lien, de le copier et ou/de le partager avec éventuellement des personnes externes.

JSON016.jpg
 

JSON017.jpg
 

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 :

JSON018.jpg

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.

JSON019.jpg 

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.

JSON020.jpg 

{

   "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.

JSON021.jpgPour 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.

 JSON023.jpg

{

    "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.

 

 

 

Commentaires

Aucun commentaire sur ce billet.