Utilisation de la mise en forme de colonne pour personnaliser SharePointUse column formatting to customize SharePoint

Vous pouvez utiliser la mise en forme de la colonne pour personnaliser la façon dont les champs dans les listes et les bibliothèques SharePoint sont affichés.You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. Pour ce faire, vous construisez un objet JSON qui décrit les éléments affichés lorsqu’un champ est inclus dans une vue de liste, ainsi que les styles à appliquer à ces éléments.To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. La mise en forme de la colonne ne modifie pas les données dans l’élément de liste ou le fichier ; elle change uniquement la façon dont elles apparaissent lorsque les utilisateurs parcourent la liste.The column formatting does not change the data in the list item or file; it only changes how it’s displayed to users who browse the list. Toute personne pouvant créer et gérer des vues dans une liste peut utiliser la mise en forme pour configurer l’affichage des champs.Anyone who can create and manage views in a list can use column formatting to configure how view fields are displayed.

Par exemple, une liste avec les champs Titre, Effort, Affecté à et État sans aucune personnalisation appliquée peut ressembler à ceci :For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:

Liste SharePoint avec quatre colonnes non mises en forme

Liste où l’apparence des champs personnalisés Effort, Assigné à et État via la mise en forme de colonne peut ressembler à ceci :A list with the appearance of the Effort, Assigned To, and Status fields customized via column formatting might look like this:

Liste SharePoint avec trois colonnes mises en forme

Conseil

Les exemples de cet article et les nombreux exemples fournis par la communauté sont disponibles dans un référentiel GitHub dédié aux définitions de mise en forme des colonnes en open source.Samples demonstrated in this article and numerous other community samples are available from a GitHub repository dedicated for open-sourced column formatting definitions. Vous trouverez ces exemples dans le référentiel sp-dev-column-formatting dans l’organisation GitHub de SharePoint.You can find these samples from the sp-dev-column-formatting repository at SharePoint GitHub organization.

Dans quelle mesure la mise en forme de colonne est-elle différente du personnalisateur de champ ?How is column formatting different than the Field Customizer?

La mise en forme de colonne et les extensions Personnalisateur de champ de SharePoint Framework vous permettent de personnaliser l’affichage des champs dans des listes SharePoint.Both column formatting and SharePoint Framework Field Customizer extensions enable you to customize how fields in SharePoint lists are displayed. Le personnalisateur de champ est plus avancé, car vous pouvez l’utiliser pour écrire le code de votre choix pour contrôler l’affichage d’un champ.The Field Customizer is more powerful because you can use it to write any code that you want to control how a field is displayed.

La mise en forme de colonne est appliquée plus facilement et plus largement.Column formatting is more easily and broadly applied. Toutefois, elle est moins flexible, car elle n’autorise pas le code personnalisé ; elle autorise uniquement certains éléments et attributs prédéfinis.However, it is less flexible, because it does not allow for custom code; it only allows for certain predefined elements and attributes.

Le tableau suivant compare la mise en forme de la colonne et le personnalisateur de champ.The following table compares column formatting and the Field Customizer.

Type de champField type Mise en forme de la colonneColumn formatting Personnalisateur de champField Customizer
Mise en forme conditionnelle basée sur les valeurs des éléments et les plages de valeursConditional formatting based on item values and value ranges Pris en chargeSupported Pris en chargeSupported
Liens d’actionAction links Prise en charge pour les liens hypertexte statiques qui ne lancent pas de scriptSupport for static hyperlinks that do not launch script Prise en charge de tous les liens hypertexte, y compris ceux qui appellent un script personnaliséSupport for any hyperlink, including those that invoke custom script
Visualisations des donnéesData visualizations Prise en charge pour des visualisations simples qui peuvent être exprimées en utilisant HTML et CSSSupport for simple visualizations that can be expressed using HTML and CSS Prise en charge pour des visualisations de données arbitrairesSupport for arbitrary data visualizations

Si vous pouvez effectuer votre scénario à l’aide de la mise en forme de la colonne, cela est généralement plus rapide et plus simple que d’utiliser un personnalisateur de champ.If you can accomplish your scenario by using column formatting, it’s typically quicker and easier to do that than to use a Field Customizer. Toute personne pouvant créer et gérer des vues dans une liste peut utiliser la mise en forme de la colonne pour créer et publier des personnalisations.Anyone who can create and manage views in a list can use column formatting to create and publish customizations. Utilisez un personnalisateur de champ pour des scénarios plus avancés que la mise en forme de colonnes ne prend pas en charge.Use a Field Customizer for more advanced scenarios that column formatting does not support.

Prise en main de la mise en forme de colonneGet started with column formatting

Pour ouvrir le volet Mise en forme de la colonne, ouvrez le menu déroulant sous une colonne.To open the column formatting pane, open the drop-down menu under a column. Sous Paramètres de la colonne, sélectionnez Formater cette colonne.Under Column Settings, choose Format this column.

Si aucun utilisateur n’a utilisé la mise en forme de colonne sur la colonne que vous avez sélectionnée, le volet se présentera comme suit.If no one has used column formatting on the column you selected, the pane will look like the following.

Volet Mettre en forme une colonne avec un espace pour coller ou entrer le JSON et les options de mise en forme de colonne pour afficher un aperçu, enregistrer et annuler

Un champ où aucune mise en forme n’est spécifiée utilisera le rendu par défaut.A field with no formatting specified uses the default rendering. Pour mettre en forme une colonne, entrez le code JSON de mise en forme de colonne dans la zone.To format a column, enter the column formatting JSON in the box.

Pour afficher un aperçu de la mise en forme, sélectionnez Aperçu.To preview the formatting, select Preview. Pour valider vos modifications, sélectionnez Enregistrer.To commit your changes, select Save. Lorsque vous enregistrez, toute personne qui affiche la liste verra la personnalisation que vous avez appliquée.When you save, anyone who views the list will see the customization that you applied.

Le moyen le plus simple d’utiliser la mise en forme de la colonne consiste à partir d’un exemple et de le modifier pour appliquer votre champ spécifique.The easiest way to use column formatting is to start from an example and edit it to apply to your specific field. Les sections suivantes présentent des exemples que vous pouvez copier, coller et modifier pour vos scénarios.The following sections contain examples that you can copy, paste, and edit for your scenarios. Plusieurs exemples sont également disponibles dans le référentiel SharePoint/sp-dev-column-formatting.There are also several samples available in the SharePoint/sp-dev-column-formatting repository.

Notes

Tous les exemples présents dans ce document font référence au schéma JSON utilisé dans SharePoint Online.All examples in this document refer to the json schema used in SharePoint Online. Pour mettre en forme des colonnes dans SharePoint 2019, veuillez utiliser le schéma https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json.To format columns on SharePoint 2019, please use https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json as the schema.

Affichage des valeurs de champ (de base)Display field values (basic)

La mise en forme de colonne la plus simple est celle qui place la valeur du champ à l’intérieur d’un élément <div />.The simplest column formatting is one that places the value of the field inside a <div /> element. Cet exemple fonctionne pour les champs de nombre, de texte, de choix et de date :This example works for number, text, choice, and date fields:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField"
}

Certains types de champs nécessitent quelques tâches supplémentaires pour récupérer leurs valeurs.Some field types require a bit of extra work to retrieve their values. Les champs de personne sont représentés dans le système en tant qu’objets et le nom d’affichage d’une personne est inclus dans la propriété title de cet objet.Person fields are represented in the system as objects, and a person’s display name is contained within that object’s title property. Il s’agit du même exemple, modifié de manière à fonctionner avec le champ de personne :This is the same example, modified to work with the person field:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.title"
}

Les champs Liste de choix sont également représentés en tant qu’objets ; le texte d’affichage est stocké dans la propriété lookupValue.Lookup fields are also represented as objects; the display text is stored in the lookupValue property. Cet exemple est compatible avec un champ Liste de choix :This example works with a lookup field:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.lookupValue"
}

Application d’une mise en forme conditionnelleApply conditional formatting

Vous pouvez utiliser la mise en forme de la colonne pour appliquer des styles, des classes et des icônes aux champs, en fonction de la valeur à l’intérieur de ces champs.You can use column formatting to apply styles, classes, and icons to fields, depending on the value inside those fields.

Mise en forme conditionnelle basée sur une plage de numéros (de base)Conditional formatting based on a number range (basic)

L’image suivante illustre un exemple de mise en forme conditionnelle appliquée à une plage de numéros.The following image shows an example of conditional formatting applied to a number range.

Avertissement de gravité de 70 avec arrière-plan orange

Cet exemple utilise une expression conditionnelle de style Excel (=if) pour appliquer une classe (sp-field-severity--warning) à l’élément <div /> parent lorsque la valeur du champ actif est inférieure ou égale à 70.This example uses an Excel-style conditional expression (=if) to apply a class (sp-field-severity--warning) to the parent <div /> element when the value in the current field is less than or equal to 70. Le champ est mis en surbrillance lorsque la valeur est inférieure ou égale à 70 et apparaît normalement si elle est supérieure à 70.This causes the field to be highlighted when the value is less than or equal to 70, and appear normally if it's greater than 70.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= 70,'sp-field-severity--warning', '')"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= 70,'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Mise en forme conditionnelle basée sur la valeur dans un champ de texte ou de choix (avancé)Conditional formatting based on the value in a text or choice field (advanced)

L’image suivante illustre un exemple de mise en forme conditionnelle appliquée à un champ de texte ou de choix :The following image shows an example of conditional formatting applied to a text or choice field:

Champ État coloré en vert pour Terminé, en rouge pour Bloqué et en orange pour En révision

Vous pouvez appliquer une mise en forme conditionnelle aux champs de texte ou de choix qui peuvent contenir un ensemble fixe de valeurs.You can apply conditional formatting to text or choice fields that might contain a fixed set of values. L’exemple suivant applique différentes classes selon que la valeur du champ est Terminé, En révision, Présente des problèmes ou une autre valeur.The following example applies different classes depending on whether the value of the field is Done, In Review, Has Issues, or another value. Cet exemple applique une classe CSS (sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--severeWarning, sp-field-severity--blocked) au <div /> en fonction de la valeur du champ.This example applies a CSS class (sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--severeWarning, sp-field-severity--blocked) to the <div /> based on the field's value. Ensuite, il génère un élément <span /> avec un attribut IconName.It then outputs a <span /> element with an IconName attribute. Cet attribut applique automatiquement une autre classe CSS à cet élément <span /> qui affiche une icône Office UI Fabric à l’intérieur de cet élément.This attribute automatically applies another CSS class to that <span /> that shows an Office UI Fabric icon inside that element. Enfin, un autre élément <span /> est généré et contient la valeur dans le champ.Finally, another <span /> element is output that contains the value inside the field.

Ce modèle est utile si vous souhaitez que différentes valeurs renvoient à différents niveaux d’urgence ou de gravité.This pattern is useful when you want different values to map to different levels of urgency or severity. Vous pouvez partir de cet exemple et le modifier pour spécifier vos propres valeurs de champ et les styles et les icônes qui doivent correspondre à ces valeurs.You can start from this example and edit it to specify your own field values and the styles and icons that should map to those values.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Appliquer une mise en forme en fonction des plages de datesApply formatting based on date ranges

Étant donné que les dates sont souvent utilisées pour effectuer le suivi des dates d’échéance et des chronologies de projet clé, un scénario classique consiste à appliquer une mise en forme en fonction de la valeur dans un champ date/heure.Because dates are often used to track deadlines and key project timelines, a common scenario is to apply formatting based on the value in a date/time field. Pour appliquer une mise en forme en fonction de la valeur dans un champ date/heure, appliquez les modèles suivants.To apply formatting based on the value in a date/time field, apply the following patterns.

Mise en forme d’un élément lorsqu’une colonne de date est avant ou après la date du jour (avancé)Formatting an item when a date column is before or after today's date (advanced)

L’image suivante illustre un champ sur lequel une mise en forme de date conditionnelle est appliquée :The following image shows a field with conditional date formatting applied:

Champ État avec le texte En retard qui apparaît en rouge

Cet exemple colorie le champ actif en rouge lorsque la valeur DueDate d’un élément se situe avant la date/l’heure actuelles.This example colors the current field red when the value inside an item's DueDate is before the current date/time. Contrairement à certains exemples précédents, cet exemple applique la mise en forme à un seul champ en observant la valeur à l’intérieur d’un autre champ.Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Notez que l’élément DueDate est référencé en utilisant la syntaxe [$FieldName].Note that DueDate is referenced using the [$FieldName] syntax. FieldName est supposé être le nom interne du champ.FieldName is assumed to be the internal name of the field. Cet exemple exploite aussi une valeur spéciale qui peut être utilisée dans les champs date/heure - @now, qui est résolue sur la date/l’heure actuelles, évaluées lorsque l’utilisateur charge l’affichage de liste.This example also takes advantage of a special value that can be used in date/time fields - @now, which resolves to the current date/time, evaluated when the user loads the list view.

Notes

Si vous avez des espaces dans le nom du champ, les utilisateurs sont définis en tant que _x0020_.If you have spaces in the field name, those are defined as _x0020_. Par exemple, un champ nommé « Due Date » doit être référencé comme $Due_x0020_Date.For example, a field named "Due Date" should be referenced as $Due_x0020_Date.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$DueDate] <= @now, '#ff0000', '')"
  }
}

Mise en forme des éléments en fonction de dates arbitraires (avancé)Formatting items based on arbitrary dates (advanced)

Pour comparer la valeur d’un champ date/heure à une date qui n’est pas @now, suivez le modèle de l’exemple suivant.To compare the value of a date/time field against a date that's not @now, follow the pattern in the following example. L’exemple suivant colorie le champ actif en rouge si la date d’échéance était antérieure ou égale à demain.The following example colors the current field red if the due date was <= tomorrow. Cela est possible à l’aide des mathématiques de date.This is accomplished using date math. Vous pouvez ajouter des millisecondes à une date quelconque et le résultat sera une nouvelle date.You can add milliseconds to any date and the result will be a new date. Par exemple, pour ajouter un jour à une date, vous devez ajouter (24*60*60*1000 = 86,400,000).For example, to add a day to a date, you'd add (24*60*60*1000 = 86,400,000).

Cet exemple illustre une autre syntaxe permettant d’exprimer une expression conditionnelle à l’aide d’un opérateur ternaire (?) à l’intérieur d’une arborescence de syntaxe abstraite.This example demonstrates an alternate syntax to express a conditional expression, using the ternary (?) operator inside an abstract syntax tree.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "+",
                     "operands": [
                        "@now",
                        86400000
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

Voici le même exemple, sauf que celui-ci utilise la syntaxe d’expression Excel :Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= @now + 86400000, '#ff0000', '')"
   }
}

Pour comparer une valeur de champ date/heure à une autre constante de date, utilisez la méthode Date() pour convertir une chaîne en une date.To compare a date/time field value against another date constant, use the Date() method to convert a string to a date. L’exemple suivant colorie le champ actif en rouge si la DueDate est antérieure au 22/03/2017.The following example colors the current field red if the value in the DueDate field is before 3/22/2017.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "Date()",
                     "operands": [
                        "3/22/2017"
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

Voici le même exemple, sauf que celui-ci utilise la syntaxe d’expression Excel :Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= Date('3/22/2017'), '#ff0000', '')"
   }
}

Création d’actions cliquablesCreate clickable actions

Vous pouvez utiliser la mise en forme de colonne pour fournir des liens hypertexte permettant d’accéder à d’autres pages web ou de démarrer des fonctionnalités personnalisées.You can use column formatting to provide hyperlinks that go to other webpages, or start custom functionality. Cette fonctionnalité est limitée à des liens statiques qui peuvent être paramétrés avec des valeurs des champs de la liste.This functionality is limited to static links that can be parameterized with values from fields in the list. Vous ne pouvez pas utiliser la mise en forme de la colonne pour générer des liens vers des protocoles autres que http://, https:// ou mailto:.You can't use column formatting to output links to protocols other than http://, https://, or mailto:.

Cet exemple décrit comment convertir un champ de texte qui contient des symboles boursiers en lien hypertexte qui cible la page des cotes en temps réel de Yahoo Finance pour cette cote.This example shows how to turn a text field that contains stock ticker symbols into a hyperlink that targets the Yahoo Finance real-time quotes page for that stock ticker. L’exemple utilise un opérateur + qui ajoute la valeur du champ actuelle au lien hypertexte statique http://finance.yahoo.com/quote/.The example uses a + operator that appends the current field value to the static hyperlink http://finance.yahoo.com/quote/. Vous pouvez étendre ce modèle aux scénarios dans lesquels vous souhaitez que les utilisateurs affichent des informations contextuelles liées à un élément, ou lorsque vous souhaitez démarrer un processus d’entreprise sur l’élément actif, dans la mesure où les informations ou le processus sont accessibles via un lien hypertexte paramétré avec des valeurs de l’élément de liste.You can extend this pattern to any scenario in which you want users to view contextual information related to an item, or you want to start a business process on the current item, as long as the information or process can be accessed via a hyperlink parameterized with values from the list item.

Liste d’actions boursières avec symboles boursiers convertis en liens hypertexte

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField",
   "attributes": {
      "target": "_blank",
      "href": "='http://finance.yahoo.com/quote/' + @currentField"
   }
}

Conseil

Dans un composant WebPart Liste, la balise d’ancrage ci-dessus permet de parcourir l’utilisateur vers un nouvel onglet. Pour naviguer dans le même onglet, ajoutez l’attribut data-interception et configurez-le sur on.In a List Web Part, the above anchor tag will navigate user to a new tab. In order to navigate within the same tab, add data-interception attribute and set it to on. Informations supplémentaires sur l’attribut interception de données.More information about data-interception attibute.

Ajout d’un bouton d’action à un champ (avancé)Add an action button to a field (advanced)

L’image suivante illustre des boutons d’action ajoutés à un champ.The following image shows action buttons added to a field.

Champ Affecté à avec boutons de messagerie ajoutés aux noms

Vous pouvez utiliser la mise en forme de la colonne pour le rendu des liens d’action rapide en regard des champs.You can use column formatting to render quick action links next to fields. L’exemple suivant, destiné à un champ de personne, affiche deux éléments à l’intérieur de l’élément <div /> parent :The following example, intended for a person field, renders two elements inside the parent <div /> element:

  • Un élément <span /> qui contient le nom d’affichage de la personne.A <span /> element that contains the person’s display name.
  • Un élément <a /> qui ouvre un lien mailto: qui permet de créer un e-mail avec un objet et un corps renseignés dynamiquement via les métadonnées de l’élément.An <a /> element that opens a mailto: link that creates an email with a subject and body populated dynamically via item metadata. Un style est appliqué à l’élément <a /> à l’aide des classes ms-Icon, ms-Icon—Mail et ms-QuickAction Fabric pour lui donner l’aspect d’une icône de courrier cliquable.The <a /> element is styled using the ms-Icon, ms-Icon—Mail, and ms-QuickAction Fabric classes to make it look like a clickable email icon.
{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px"
            },
            "txtContent": "@currentField.title"
        },
        {
            "elmType": "a",
            "attributes": {
                "iconName": "Mail",
                "class": "sp-field-quickActions",
                "href": {
                    "operator": "+",
                    "operands": [
                        "mailto:",
                        "@currentField.email",
                        "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n",
                        "@currentField.title",
                        "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=",
                        "[$ID]"
                    ]
                }
            }
        }
    ]
}

Création de visualisations des données simplesCreate simple data visualizations

Utilisez la mise en forme de la colonne pour combiner des opérations arithmétiques et conditionnelles et obtenir des visualisations des données de base.Use column formatting to combine conditional and arithmetical operations to achieve basic data visualizations.

Mise en forme d’une colonne de numéros comme une barre de données (avancé)Format a number column as a data bar (advanced)

L’image suivante illustre une colonne de numéros mise en forme comme une barre de données.The following image shows a number column formatted as a data bar.

Liste des efforts avec éléments de liste de numéros affichés sous forme de barres

Cet exemple applique des styles background-color et border-top pour créer une visualisation de barre de donnée de @currentField, qui est un champ de numéro.This example applies background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. Les barres sont dimensionnées différemment pour différentes valeurs en fonction de la façon dont l’attribut width est défini. Ici, il est défini sur 100% lorsque la valeur est supérieure à 20 et sur (@currentField * 5)% dans les autres cas.The bars are sized differently for different values based on the way the width attribute is set - it's set to 100% when the value is greater than 20, and (@currentField * 5)% otherwise. Pour adapter cet exemple à votre colonne de numéro, vous pouvez ajuster la condition limite (20) pour qu’elle corresponde à la valeur anticipée maximale à l’intérieur du champ et modifier l’équation pour indiquer la croissance de la barre en fonction de la valeur figurant à l’intérieur du champ.To fit this example to your number column, you can adjust the boundary condition (20) to match the maximum anticipated value inside the field, and change the equation to specify how much the bar should grow depending on the value inside the field.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "width": "=if(@currentField >= 20, '100%', (@currentField * 5) + '%')"
  }
}

L’image suivante illustre une liste où des icônes de tendances à la hausse/à la baisse ont été ajoutées :The following image shows a list with trending up/trending down icons added:

Liste avec icônes de tendances à la hausse/à la baisse en regard des éléments de liste

Cet exemple s’appuie sur deux champs de numéros, Before et After, pour lesquels les valeurs peuvent être comparées.This example relies on two number fields, Before and After, for which the values can be compared. Il affiche l’icône de tendances appropriée en regard du champ After, selon la valeur du champ comparée à la valeur de Before.It shows the appropriate trending icon next to the After field, depending on that field's value compared to the value in Before. sp-field-trending--up est utilisé lorsque la valeur de After est supérieure ; sp-field-trending--down est utilisé lorsque la valeur de After est inférieure.sp-field-trending--up is used when After's value is higher; sp-field-trending--down is used when After's value is lower.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "sp-field-trending--up",
                        "sp-field-trending--down"
                    ]
                },
                "iconName": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "SortUp",
                        {
                            "operator": "?",
                            "operands": [
                                {
                                    "operator": "<",
                                    "operands": [
                                        "[$After]",
                                        "[$Before]"
                                    ]
                                },
                                "SortDown",
                                ""
                            ]
                        }
                    ]
                }
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

Voici le même exemple, sauf que celui-ci utilise la syntaxe d’expression Excel :Here's the same sample from above, using the Excel-style expression syntax:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": "=if([$After] > [$Before], 'sp-field-trending--up', 'sp-field-trending--down')",
                "iconName": "=if([$After] > [$Before], 'SortUp', "=if([$After] < [$Before], 'SortDown', ''))"
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

Création d’un bouton pour démarrer un fluxCreate a button to launch a Flow

La capture d’écran suivante montre une liste avec un bouton de flux ajouté à la colonne Action :The following screenshot shows a list with a Flow button added to the Action column:

capture d’écran de l’exemple

La mise en forme des colonnes vous permet de créer des boutons qui exécutent des flux sur l’élément de liste correspondant lorsque vous les sélectionnez.You can use column formatting to create buttons that, when selected, run Flows on the corresponding list item. Le panneau de lancement de flux s’affiche après avoir choisi le bouton et le flux s’exécute simplement.The Flow Launch Panel will be displayed after choosing the button and the Flow will just run.

Pour utiliser l’exemple ci-dessous, vous devez remplacer l’ID de flux que vous souhaitez exécuter.To use the sample below, you must substitute the ID of the Flow you want to run. Cet ID est inclus dans l’attribut customRowAction à l’intérieur de l’élément button.This ID is contained within the customRowAction attribute inside the button element. Pour obtenir l’ID d’un flux, procédez comme suit :To obtain a Flow's ID:

  1. Sélectionnez Flux, puis consultez vos flux dans la liste SharePoint dans laquelle le flux est configuré.Choose Flow > See your flows in the SharePoint list where the Flow is configured.
  2. Cliquez sur le flux que vous voulez exécuter.Choose the Flow you want to run.
  3. Copiez l’ID indiqué à la fin de l’URL.Copy the ID from the end of the URL.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "Send to Manager"
    }
  ]
}

De plus, vous pouvez utiliser les options headerText et runFlowButtonText dans la propriété actionParams pour personnaliser des parties du volet Flux.Additionally, you can use headerText and runFlowButtonText options within the actionParams property to customize portions of the Flow panel itself! Pour plus d’informations, consultez la partie concernant les éléments de bouton de la référence de syntaxe détaillée.See the button elements portion of the Detailed syntax reference for more details.

Mise en forme de champs à valeurs multiplesFormatting multi-value fields

Vous pouvez utiliser la mise en forme pour appliquer des styles à chaque membre d’un champ de type personne, recherche et choix plusieurs valeur de colonne.You can use column formatting to apply styles to each member of a multi-value field of type Person, Lookup and Choice.

Formatage du texte basiqueBasic text formatting

L’image suivante illustre un exemple de mise en forme conditionnelle appliquée à un champ de personne.The following image shows an example of multi-value field formatting applied to a Person field.

La liste des boutons qui vous avertit tous les intervenants de chacune des tâches, de première ligne est vide, la deuxième ligne lit « Envoyer le courrier électronique vers Loyd Barham, » la troisième ligne lit « envoyer à tous les 3 membres »

Cet exemple utilise l’lengthopérateur pour détecter le nombre de membres du champ et l’join opérateur utilisé pour concaténer les adresses de courrier de tous les membres.This example uses the length operator to detect the number of members of the field, and used join operator to concatenate the email addresses of all members. Cet exemple masque le bouton lorsqu’ aucun membre est trouvé et assure la gestion des formes plurielles dans le texte.This example hides the button when no member is found, and takes care of plurals in the text.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "style": {
        "display": "=if(length(@currentField) > 0, 'flex', 'none')"
    },
    "attributes": {
        "href": {
            "operator": "+",
            "operands": [
                "mailto:",
                "=join(@currentField.email, ';')"
            ]
        }
    },
    "children": [
        {
            "elmType": "span",
            "style": {
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": "Mail"
            }
        },
        {
            "elmType": "span",
            "txtContent": {
                "operator": "+",
                "operands": [
                    "Send email to ",
                    {
                        "operator": "?",
                        "operands": [
                            "=length(@currentField) == 1",
                            "@currentField.title",
                            "='all ' + length(@currentField) + ' members'"
                        ]
                    }
                ]
            }
        }
    ]
}

Mise en forme simple d’éléments HTMLSimple HTML elements formatting

L’image suivante montre un exemple de créer une phrase simple des valeurs d’un champ de recherche de plusieurs valeurs.The following image shows an example of constructing a simple sentence from the values of a multi-value Lookup field.

La capture d’écran d’un champ lit « Amérique du Nord, APAC et Europe »

Cet opérateur utilise exemples loopIndex et length pour identifier le dernier membre du champ et attribut forEachpour dupliquer des éléments HTML.This examples uses operator loopIndex and length to identify the last member of the field, and attribute forEach to duplicate HTML elements.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "block"
    },
    "children": [
        {
            "elmType": "span",
            "forEach": "region in @currentField",
            "txtContent": {
               "operator": "?",
               "operands": [
                  "=loopIndex('region') == 0",
                  "[$region.lookupValue]",
                  {
                     "operator": "?",
                     "operands": [
                        "=loopIndex('region') + 1 == length(@currentField)",
                        "=', and ' + [$region.lookupValue]",
                        "=', ' + [$region.lookupValue]"
                     ]
                  }
               ]
            }
        }
    ]
}

Mise en forme complexe d’éléments HTMLComplex HTML elements formatting

L’image suivante montre un exemple de la création d’une liste des utilisateurs avec des images, des adresses de messagerie et un compteur simple pour le nombre de membres en haut.The following image shows an example of building a list of users with pictures, email addresses and a simple counter for the number of members at the top.

Liste comportant les propriétaires « nom » et 3 lignes où chaque utilisateur dans le champ comporte une image de profil, le nom et le courrier affiché et un petit compteur gris des propriétaires au coin supérieur gauche contenant une couleur différente lorsque celui-ci indique 0.

Cet opérateur utilise les exemplesloopIndex pour contrôler les marges toutes les lignes, mais le premier abonnement et attribut forEach pour créer la liste des membres.This examples uses operator loopIndex to control the margins all rows but the first one, and attribute forEach to build the list of members.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "min-height": "1.5em",
        "flex-direction": "column",
        "align-items": "start"
    },
    "children": [
        {
            "elmType": "div",
            "txtContent": "=length(@currentField)",
            "style": {
                "border-radius": "1.5em",
                "height": "1.5em",
                "min-width": "1.5em",
                "color": "white",
                "text-align": "center",
                "position": "absolute",
                "top": "0",
                "right": "1em",
                "background-color": "=if(length(@currentField) == 0, '#ddd', '#aaa'"
            }
        },
        {
            "elmType": "div",
            "forEach": "person in @currentField",
            "style": {
                "justify-content": "center",
                "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "flex",
                        "flex-direction": "row",
                        "justify-content": "center"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "attributes": {
                                "src": "=[$person.picture]"
                            },
                            "style": {
                                "width": "3em",
                                "height": "3em",
                                "border-radius": "3em"
                            }
                        },
                        {
                            "elmType": "a",
                            "attributes": {
                                "href": "='mailto:' + [$person.email]"
                            },
                            "style": {
                                "margin-left": "0.5em"
                            },
                            "children": [
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.title]",
                                    "style": {
                                        "font-size": "1.2em"
                                    }
                                },
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.email]",
                                    "style": {
                                        "color": "gray"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Cartes personnalisées sur pointageCustom cards on hover

L’image suivante montre une liste avec un point de suspension personnalisé ajouté à une Liste :The following image shows a list with a custom hover added to a List:

En survol : métadonnées de la colonne « État » sont disponibles dans la mise en forme de l’affichageOn hover - Metadata on the column "Status" is made available in view formatting

Image d’aperçu 1

En survol : métadonnées de la colonne « État » sont disponibles dans la mise en forme de la colonneOn hover - Metadata on the column "Status" is made available in column formatting

Image d’aperçu 2

Vous pouvez utiliser la mise en forme des colonnes et des affichages pour définir des appels personnalisés pouvant être mis en place par des actions définies par l’utilisateur telles que cliquer ou pointerYou can use column and view formatting to define custom call out that can be commissioned basis user defined actions like click or hover

Cet exemple utilise customCardProps, openOnEvent, directionalHint et isBeakVisibleThis example uses customCardProps, openOnEvent, directionalHint and isBeakVisible


{
    "elmType": "div",
    "style": {
        "font-size": "12px"
    },
    "txtContent": "[$Status]",
    "customCardProps": {
        "formatter": {
            "elmType": "div",
            "txtContent": "Define your formatter options inside the customCarProps/formatter property"
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle" : {
            "backgroundColor": "white"
        }
    }
}

Cartes par défaut sur pointageDefault cards on hover

Les utilisateurs peuvent désormais disposer d’une carte de profil ou d’une carte de pointage de fichier sur les formateurs, notamment les éléments que les utilisateurs peuvent désormais faire.Users can now have profile card or file hover card on formatters too, some of the things users can now do - 1) Carte de profil ou carte de pointage de fichier dans n’importe quelle colonneProfile card or File Hover card on any column 2) Carte de profil ou carte avec pointage avec mise en forme d’affichageProfile card or Hover card with view formatting

Pointez sur un nom de fichier avec la mise en forme avec la carte de fichier par défautHover on a filename with formatting with default file card

Image d’aperçu 3

Placez le curseur sur une colonne du contact avec une mise en forme avec la carte de profil par défautHover on a person column with formatting with default Profile card

Image d’aperçu 4

Les deux exemples utilisent defaultHoverFieldBoth the example uses defaultHoverField


{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "img",
            "style": {
                "width": "32px",
                "height": "32px",
                "overflow": "hidden",
                "border-radius": "50%",
                "margin": "2px"
            },
            "attributes": {
                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Editor.email]",
                "title": "[$Editor.title]"
            }
        },
        {
            "elmType": "span",
            "style": {
                "vertical-align": "middle",
                "margin-left": "2px"
            },
            "txtContent": "[$Editor.title]"
        }
    ],
    "defaultHoverField": "[$Editor]"
}

Types de colonne pris en chargeSupported column types

Les types de colonne suivants prennent en charge la mise en forme de colonne :The following column types support column formatting:

  • CalculéCalculated
  • ChoixChoice
  • ContentTypeContentType
  • Compteur (ID)Counter (ID)
  • Devise*Currency*
  • Date/HeureDate/Time
  • Lien hypertexteHyperlink
  • ImageImage
  • Emplacement*Location*
  • RechercheLookup
  • Choix multipleMulti-Choice
  • Texte multiligneMulti-Line Text
  • Plusieurs personnesMulti-Person
  • NombreNumber
  • Personne ou groupePerson or Group
  • ImagePicture
  • Une seule ligne de texteSingle line of text
  • Titre (dans les listes)Title (in Lists)
  • Oui/NonYes/No

* Les formats de ces types de colonnes ne peuvent être appliqués qu’à l’aide des paramètres de champ* Formats for these column types can only be applied through Field Settings

Les éléments suivants ne sont pas pris en charge actuellement :The following are currently not supported:

  • Métadonnées géréesManaged Metadata
  • Filename (dans les bibliothèques de documents)Filename (in Document Libraries)
  • Étiquette de rétentionRetention Label
  • Colonnes scelléesSealed columns
  • Colonne de texte à plusieurs lignes avec un texte enrichi amélioréMulti-Line Text column with enhanced rich text

Instructions de styleStyle guidelines

Classes prédéfiniesPredefined classes

Vous pouvez utiliser les classes prédéfinies suivantes pour plusieurs scénarios courants.You can use the following predefined classes for several common scenarios.

Nom de la classeClass name Capture d’écranScreenshot
sp-field-customFormatBackgroundsp-field-customFormatBackground Spécifie la marge intérieure et les marges pour toutes les classes qui utilisent des arrière-plans.Specifies the padding and margins for all classes that use backgrounds.
sp-field-severity--goodsp-field-severity--good Zone verte avec le texte Terminé et une coche
sp-field-severity--lowsp-field-severity--low Zone blanche avec le texte En cours et une flèche
sp-field-severity--warningsp-field-severity--warning Zone jaune avec le texte En révision et une icône de danger
sp-field-severity--severeWarningsp-field-severity--severeWarning Zone orange avec le texte Problèmes et une icône de danger
sp-field-severity--blockedsp-field-severity--blocked Zone rouge avec le texte Bloqué et une icône X
sp-field-dataBarssp-field-dataBars Barre bleue avec le numéro 4
sp-field-trending--upsp-field-trending--up Flèche verte avec le numéro 500
sp-field-trending--downsp-field-trending--down Flèche rouge avec le numéro 100
sp-field-quickActionssp-field-quickActions Nom avec icône de message

Notes

Les icônes illustrées ci-dessus pour les classes sp-field-severity ne font PAS partie de la classe.The icons shown above for the sp-field-severity classes are NOT part of the class. Seule la couleur d’arrière-plan est incluse.Only the background color is included. L’attribut iconName permet d’ajouter des icônes.Icons can be added by using the iconName attribute.

En plus des classes répertoriées ci-dessus, les classes définies par Office UI Fabric (par exemple, la couleur du thème, la typographie, le système de grille, etc.) peuvent être utilisées.In addition to the classes listed above, the classes (such as the theme color, typography, grid system, etc.) defined by the Office UI Fabric can be used. Pour plus d’informations, consultez le site web Fabric.For details, see the Fabric website.

Icônes prédéfiniesPredefined icons

Vous pouvez utiliser les icônes prédéfinies de la structure de l’interface utilisateur Office.You can use predefined icons from Office UI Fabric. Pour plus d’informations, consultez le site web Fabric.For details, see the Fabric website.

Création d’un JSON personnaliséCreating custom JSON

La création d’un JSON personnalisé de mise en forme de la colonne est simple si vous comprenez le schéma.Creating custom column formatting JSON from scratch is simple if you understand the schema. Pour créer votre propre mise en forme de la colonne personnalisée :To create your own custom column formatting:

  1. Téléchargez Visual Studio Code.Download Visual Studio Code. Il est gratuit et rapide à télécharger.It's free and fast to download.

  2. Dans Visual Studio Code, créez un fichier et enregistrez le fichier vide avec une extension .json.In Visual Studio Code, create a new file, and save the empty file with a .json file extension.

  3. Collez les lignes de code suivantes dans votre fichier vide.Paste the following lines of code into your empty file.

     {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
     }
    

    Vous disposez maintenant de la validation et de la saisie semi-automatique pour créer votre JSON.You now have validation and autocomplete to create your JSON. Vous pouvez commencer à ajouter votre JSON après la première ligne qui définit l’emplacement du schéma.You can start adding your JSON after the first line that defines the schema location.

Conseil

À tout moment, sélectionnez Ctrl+Espace pour que Visual Studio Code propose des suggestions pour les propriétés et les valeurs.At any point, select Ctrl+Space to have Visual Studio Code offer suggestions for properties and values. Pour obtenir plus d’informations, consultez l’article relatif à la modification de JSON avec Visual Studio Code.For more information, see Editing JSON with Visual Studio Code.

Conseil

Les modèles et pratiques SharePoint fournissent un composant WebPart gratuit, Formateur de colonne, permettant de modifier et d’appliquer des formats directement dans le navigateur.SharePoint Patterns and Practices provides a free web part, Column Formatter, that can be used to edit and apply formats directly in the browser.

Référence de syntaxe détailléeDetailed syntax reference

elmTypeelmType

Spécifie le type d’élément à créer.Specifies the type of element to create. Les éléments valides comprennent :Valid elements include:

  • divdiv
  • spanspan
  • aa
  • imgimg
  • svgsvg
  • cheminpath
  • Boutonbutton

Toute autre valeur entraînera une erreur.Any other value will result in an error.

Éléments de boutonbutton elements

Les éléments Button peuvent être utilisés pour lancer une action spécifique sur l’élément parent.Button elements can be used to launch a specific action on the parent item. Chaque élément button possède une propriété requise customRowAction qui spécifie une action qui est effectuée quand l’utilisateur clique sur le bouton.Every button element has a required property, customRowAction, that specifies an action that's taken when the button is clicked. L’action doit être associée à l’une des valeurs suivantes :This action must be one of the following values:

  • defaultClick : les boutons associés à cette action agissent de manière comparable au fait de cliquer sur l’élément de liste dans une vue non personnalisée.defaultClick: buttons with this action will do the same thing as clicking the list item in an uncustomized view. Ci-dessous, un exemple de bouton dont le clic sur ce dernier simule le fait de cliquer sur l’élément, ce qui entraîne l’ouverture du volet d’informations.Below is an example of a button that, when clicked, simulates a click on the item, which results in the details pane being opened.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}

  • share : le fait de cliquer sur le bouton ouvre la boîte de dialogue de partage.share: Clicking the button will open the sharing dialog. Voici un exemple de ce type de bouton.Below is an example of this type of button.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Share this item",
  "customRowAction": {
    "action": "share"
  }
}

  • delete : le fait de cliquer sur le bouton ouvre la boîte de dialogue de confirmation de suppression.delete: Clicking the button will open the delete confirmation dialog.
  • editProps : le fait de cliquer sur le bouton ouvre la page des propriétés de l’élément en mode Édition.editProps: Clicking the button will open the item properties page in edit mode.
  • executeFlow : le fait de cliquer sur le bouton lance le flux spécifié par l’ID au sein de l’attribut actionParams.executeFlow: Clicking the button will launch the specified Flow, specified by ID inside the actionParams attribute. Pour voir un exemple de ce type, reportez-vous à la section Création d’un bouton pour démarrer un flux dans ce document.For an example of this, see the Create a button to launch a Flow section in this document. Voici un exemple de ce type de bouton.Below is an example of this type of button.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "It's Flow Time!",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\":\"f7ecec0b-15c5-419f-8211-302a5d4e94f1\", \"headerText\":\"It's Flow Time!\",\"runFlowButtonText\":\"Do it\"}"
  }
}

Lorsque vous utilisez l’action executeFlow, l’attribut actionParams peut disposer des options suivantes :The actionParams attribute can have the following options when using the executeFlow action:

  • id : ID du flux pour lancer (requis)id: ID of the Flow to launch (required)
  • headerText : définit le texte situé en haut du volet de flux (facultatif)headerText: Sets the text at the top of the flow panel (optional)
  • runFlowButtonText : définit le texte du bouton principal dans le volet de flux (facultatif)runFlowButtonText: Sets the text of the primary button in the flow panel (optional)

txtContenttxtContent

Propriété facultative qui spécifie le contenu du texte de l’élément spécifié par elmType.An optional property that specifies the text content of the element specified by elmType. La valeur de cette propriété peut être soit une chaîne (y compris des chaînes spéciales), soit un objet Expression.The value of this property can either be a string (including special strings) or an Expression object.

stylestyle

Propriété facultative qui spécifie les attributs de style à appliquer à l’élément spécifié par elmType.An optional property that specifies style attributes to apply to the element specified by elmType. Il s’agit d’un objet avec des paires nom-valeur qui correspondent aux valeurs et noms CSS.This is an object with name-value pairs that correspond to CSS names and values. Les valeurs de chaque propriété dans l’objet de style peuvent être soit une chaîne (y compris des chaînes spéciales), soit un objet Expression.The values of each property in the style object can either be a string (including special strings) or an Expression object. Les attributs de style suivants sont autorisés.The following style attributes are allowed.

'background-color'
'fill'
'background-image'
'border'
'border-bottom'
'border-bottom-color'
'border-bottom-style'
'border-bottom-width'
'border-color'
'border-left'
'border-left-color'
'border-left-style'
'border-left-width'
'border-right'
'border-right-color'
'border-right-style'
'border-right-width'
'border-style'
'border-top'
'border-top-color'
'border-top-style'
'border-top-width'
'border-width'
'outline'
'outline-color'
'outline-style'
'outline-width'
'border-bottom-left-radius'
'border-bottom-right-radius'
'border-radius'
'border-top-left-radius'
'border-top-right-radius'
'box-decoration-break'
'box-shadow'
'box-sizing'

'overflow-x'
'overflow-y'
'overflow-style'
'rotation'
'rotation-point'

'opacity'
'cursor'

'height'
'max-height'
'max-width'
'min-height'
'min-width'
'width'

'flex-grow'
'flex-shrink'
'flex-flow'
'flex-direction'
'flex-wrap'
'flex'
'justify-content'
'align-items'

'box-align'
'box-direction'
'box-flex'
'box-flex-group'
'box-lines'
'box-ordinal-group'
'box-orient'
'box-pack'

'font'
'font-family'
'font-size'
'font-style'
'font-variant'
'font-weight'
'font-size-adjust'
'font-stretch'

'grid-columns'
'grid-rows'

'margin'
'margin-bottom'
'margin-left'
'margin-right'
'margin-top'

'column-count'
'column-fill'
'column-gap'
'column-rule'
'column-rule-color'
'column-rule-style'
'column-rule-width'
'column-span'
'column-width'
'columns'

'padding'
'padding-bottom'
'padding-left'
'padding-right'
'padding-top'

'bottom'
'clear'
'clip'
'display'
'float'
'left'
'overflow'
'position' 
'right'
'top'
'visibility'
'z-index'

'border-collapse'
'border-spacing'
'caption-side'
'empty-cells'
'table-layout'

'color'
'direction'
'letter-spacing'
'line-height'
'text-align'
'text-decoration'
'text-indent'
'text-transform'
'unicode-bidi'
'vertical-align'
'white-space'
'word-spacing'
'hanging-punctuation'
'punctuation-trim'
'text-align-last'
'text-justify'
'text-outline'
'text-overflow'
'text-shadow'
'text-wrap'
'word-break'
'word-wrap'

L’exemple suivant indique la valeur d’un objet de style.The following example shows the value of a style object. Dans cet exemple, deux propriétés de style (padding et background-color) seront appliquées.In this example, two style properties (padding and background-color) will be applied. La valeur padding est une valeur de chaîne codée en dur.The padding value is a hard-coded string value. La valeur background-color est une expression qui renvoie l’évaluation rouge (#ff0000) ou vert (#00ff00) selon que la valeur du champ actif (spécifié par @currentField) est inférieure ou supérieure à 40.The background-color value is an Expression that is evaluated to either red (#ff0000) or green (#00ff00) depending on whether the value of the current field (specified by @currentField) is less than 40. Pour plus d’informations, consultez la section relative à l’objet Expression.For more information, see the Expression object section.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "style": {
      "padding": "4px",
      "background-color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<",
               "operands": [
                  "@currentField",
                  40
               ]
            },
            "#ff0000",
            "#00ff00"
         ]
      }
   }
}

Voici le même exemple, sauf que celui-ci utilise la syntaxe d’expression de style Excel :Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "style": {
      "padding": "4px",
      "background-color": "=if(@currentField < 40, '#ff0000', '#00ff00')"
   }
}

attributesattributes

Propriété facultative qui spécifie les attributs supplémentaires à ajouter à l’élément spécifié par elmType.An optional property that specifies additional attributes to add to the element specified by elmType. Il s’agit d’un objet avec des paires nom-valeur.This is an object with name-value pairs. Les noms d’attribut doivent être l’une des valeurs suivantes :Attribute names must be one of the following:

  • hrefhref
  • relrel
  • srcsrc
  • classclass
  • targettarget
  • titletitle
  • rolerole
  • iconNameiconName
  • dd
  • ariaaria
  • data-interceptiondata-interception

Tout autre nom d’attribut entraînera une erreur.Any other attribute name will result in an error. Les valeurs d’attribut peuvent être des chaînes ou des objets Expression.Attribute values can either be Expression objects or strings. L’exemple suivant ajoute deux attributs (target et href) à l’élément spécifié par elmType.The following example adds two attributes (target and href) to the element specified by elmType. L’attribut target est codé en dur sous forme de chaîne.The target attribute is hard-coded to a string. L’attribut href est une expression qui, à l’exécution, renverra http://finance.yahoo.com/quote/ + valeur du champ actif (@currentField).The href attribute is an expression that will be evaluated at runtime to http://finance.yahoo.com/quote/ + the value of the current field (@currentField).

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "target": "_blank",
    "href": "='http://finance.yahoo.com/quote/' + @currentField"
}

childrenchildren

Propriété facultative qui spécifie les éléments enfants de l’élément spécifié par elmType.An optional property that specifies child elements of the element specified by elmType. La valeur est spécifiée en tant que tableau d’objets elm.The value is specified as an array of elm objects. Il peut y avoir un niveau d’imbrication arbitraire.There can be an arbitrary level of nesting. Si un élément comporte la propriété txtContent, les propriétés enfants sont ignorées.If an element has the txtContent property, the child properties are ignored.

debugModedebugMode

Propriété facultative destinée au débogage.An optional property that is meant for debugging. Elle affiche des messages d’erreur et enregistre les avertissements sur la console.It outputs error messages and logs warnings to the console.

foreachforEach

Une propriété facultative qui permet à un élément lui-même dupliquer pour chaque membre d’un champ de plusieurs valeurs spécifiques.An optional property that allows an element to duplicate itself for each member of a specific multi-value field. La valeur de "forEach" propriété doit être au format d’un "iteratorName in @currentField" ou "iteratorName in [$FieldName]".The value of "forEach" property should be in the format of either "iteratorName in @currentField" or "iteratorName in [$FieldName]".

iteratorName représente le nom de variable d’itérateur est utilisé pour représenter le membre actuel du champ plusieurs valeurs.iteratorName represents the name of iterator variable that is used to represent the current member of the multi-value field. Le nom de l’itérateur peut être n’importe quelle combinaison de caractères alphanumériques et des traits de soulignement (_) qui ne commence pas par un chiffre.The name of the iterator can be any combination of alphanumeric characters and underscore (_) that does not start with a digit.

Le champ utilisé dans la boucle doit être dans un type de champ prise en charge avec l’option de plusieurs valeurs activées : Personne, Recherche et Choix.The field used in the loop must be in a supported field type with multi-value option enabled: Person, Lookup, and Choice.

Dans l’élément avec forEach ou ses éléments enfants, la variable d’itérateur peut être désignée comme s’il s’agissait d’un nouveau champ.In the element with forEach or its children elements, the iterator variable can be referred as if it is a new field. L’index de l’itérateur peut être accessible avec loopIndex opérateur.The index of the iterator can be accessed with loopIndex operator.

forEach ne peut pas être appliqué à l’élément racine et de Box n’affichera ainsi aucun élément si aucune valeur n’existe dans le champ.forEach cannot be applied to the root element, and will render no element if there is no value in the field.

Voir ici pour consulter des exemples.See here for examples.

ExpressionsExpressions

Les valeurs pour txtContent, les propriétés de style et les propriétés d’attribut peuvent être exprimées en tant qu’expressions, afin d’être évaluées lors de l’exécution en fonction du contexte du champ actif (ou de la ligne active).Values for txtContent, style properties, and attribute properties can be expressed as expressions, so that they are evaluated at runtime based on the context of the current field (or row). Les objets Expression peuvent être imbriqués pour contenir d’autres objets Expression.Expression objects can be nested to contain other Expression objects.

Les expressions peuvent être écrites à l’aide d’expressions de style Excel dans SharePoint Online ou d’expressions de l’arborescence de syntaxe abstraite dans SharePoint Online et SharePoint 2019.Expressions can be written using Excel-style expressions in SharePoint Online, or by using Abstract Syntax Tree expressions in SharePoint Online and SharePoint 2019.

Expressions de style ExcelExcel-style expressions

Toutes les expressions de style Excel commencent par un signe égal (=).All Excel-style expressions begin with an equal (=) sign. Ce style d’expression est uniquement disponible dans SharePoint Online (et non SharePoint 2019).This style of expression is only available in SharePoint Online (not SharePoint 2019).

Cette expression conditionnelle simple prend la valeur none si @me n’est pas égal à [$Author.email]. Sinon, elle est définie sur `` :This simple conditional expression evaluates to none if @me is not equal to [$Author.email], and evaluates to `` otherwise:

=if(@me != [$Author.email], 'none', '') 

Des instructions if/else plus complexes peuvent être écrites comme suit :More complex if/else statements can be written like this:

=if([$Sentiment] <= 0.3, 'sp-field-severity--blocked', if([$Sentiment] < 0.9,'sp-field-severity--warning','sp-field-severity--good')) 

Les opérateurs non conditionnels qui comprennent une ou deux opérandes peuvent être écrits comme suit :Non-conditional operators that take one or two operands can be written like this:

=[$foo] * -7 
=sin(@currentField) 
=toString(60 + (sin(6.2831853 * @currentField) * 60)) 

Expressions d’arborescence de syntaxe abstraiteAbstract Syntax Tree expressions

L’exemple suivant contient un objet Expression qui effectue l’expression suivante :The following example contains an Expression object that performs the following expression:

(@currentField > 40) ? '100%' : (((@currentField * 2.5).toString() + '%')

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "operator": "?",
   "operands": [
      {
         "operator": ">",
         "operands": [
            "@currentField",
            "40"
         ]
      },
      "100%",
      {
         "operator": "+",
         "operands": [
            {
               "operator": "toString()",
               "operands": [
                  {
                     "operator": "*",
                     "operands": [
                        "@currentField",
                        2.5
                     ]
                  }
               ]
            },
            "%"
         ]
      }
   ]
}

OpérateursOperators

Les opérateurs spécifient le type d’opération à effectuer.Operators specify the type of operation to perform. Les opérateurs suivants sont des valeurs valides :The following operators are valid values:

  • +
  • -
  • /
  • *
  • <
  • >
  • %
  • ==
  • !=!=
  • <=
  • >=
  • ||
  • &&
  • toString()toString()
  • Number()Number()
  • Date()Date()
  • coscos
  • assocsin
  • ??
  •  ::
  • toLocaleString()toLocaleString()
  • toLocaleDateString()toLocaleDateString()
  • toLocaleTimeString()toLocaleTimeString()
  • indexOfindexOf
  • toLowerCasetoLowerCase
  • jointurejoin
  • longueurlength
  • absabs
  • loopIndexloopIndex
  • floorfloor
  • ceilingceiling
  • powpow
  • substringsubstring
  • getDategetDate
  • getMonthgetMonth
  • getYeargetYear
  • toUpperCasetoUpperCase
  • lastIndexOflastIndexOf
  • startsWithstartsWith
  • endsWithendsWith
  • replacereplace
  • padStartpadStart
  • padEndpadEnd

Opérateurs arithmétiques binaires : les opérateurs suivants sont les opérateurs binaires arithmétiques standard qui prévoient deux opérandes :Binary arithmetic operators - The following are the standard arithmetic binary operators that expect two operands:

  • +
  • -
  • /
  • *
  • <
  • >
  • %
  • ==
  • !=!=
  • <=
  • >=

Opérateurs unaires : les opérateurs suivants sont les opérateurs unaires standard qui prévoient un seul opérande :Unary operators - The following are standard unary operators that expect only one operand:

  • toString(): renvoie une valeur de type string qui représente l’identificateur Entry unique de l’objet.toString(): returns a string representing the object

    • "txtContent": "=toString(45)"engendre "45""txtContent": "=toString(45)" results in "45"
  • Number(): renvoie la valeur numérique, si l’opérande n’est pas un nombre, NaN est renvoyéNumber(): returns the numeric value, if the operand is not a number, NaN is returned

    • "txtContent": "=Number('365')"engendre "365""txtContent": "=Number('365')" results in 365
    • "txtContent": "=Number('Wowee')" engendre NaN"txtContent": "=Number('Wowee')" results in NaN
    • "txtContent": "=Number(Date('12/26/1981'))"engendre 378190800000"txtContent": "=Number(Date('12/26/1981'))" results in 378190800000
  • Date(): renvoie un objet datetime à partir du paramètre (convertit des chaînes ou des nombres en dates sensibles paramètres régionaux)Date(): returns a datetime object from the parameter (converts strings or numbers to dates, sensitive to locale)

    • "txtContent": "=Date('12/26/1981')" engendre 26/12/1981, 12:00:00 AM"txtContent": "=Date('12/26/1981')" results in 12/26/1981, 12:00:00 AM
  • cos: renvoie le cosinus de l’angle spécifié qui doit être spécifié en radianscos: returns the cosine of the specified angle which should be specified in radians

    • "txtContent": "=cos(5)"engendre 0.28366218546322625"txtContent": "=cos(5)" results in 0.28366218546322625
  • sin: renvoie le cosinus d’un nombresin: returns the sine of a number

    • "txtContent": "=sin(90)"engendre 0.8939966636005579"txtContent": "=sin(90)" results in 0.8939966636005579
  • toLocaleString(): renvoie une représentation sensible de langage d’une date.toLocaleString(): returns a language sensitive representation of a date

    • "txtContent":"=toLocaleString(@now)" les résultats varient en fonction des paramètres régionaux de l’utilisateur mais fr-nous se présente comme « 5/2/2019, 13:22:24»"txtContent":"=toLocaleString(@now)" results vary based on user's locale, but en-us looks like "2/5/2019, 1:22:24 PM"
  • toLocaleString(): renvoie une représentation sensible de langage uniquement d’une partie de date.toLocaleDateString(): returns a language sensitive representation of just the date portion of a date

    • "txtContent":"=toLocaleDateString(@now)" les résultats varient en fonction des paramètres régionaux de l’utilisateur mais fr-nous se présente comme « 5/2/2019»"txtContent":"=toLocaleDateString(@now)" results vary based on user's locale, but en-us looks like "2/5/2019"
  • toLocaleString(): renvoie une représentation sensible de langage uniquement de la partie heure de la date.toLocaleTimeString(): returns a language sensitive representation of just the time portion of a date

    • "txtContent":"=toLocaleTimeString(@now)" les résultats varient en fonction des paramètres régionaux de l’utilisateur mais fr-nous se présente comme «13:22:24»"txtContent":"=toLocaleTimeString(@now)" results vary based on user's locale, but en-us looks like "1:22:24 PM"
  • toLowerCase : renvoie la valeur convertie en minuscules (fonctionne uniquement sur les chaînes) – Disponible uniquement dans SharePoint OnlinetoLowerCase: returns the value converted to lower case (only works on strings) - Only available in SharePoint Online

    • "txtContent":"=toLowerCase('DogFood')" engendre « dogfood »"txtContent":"=toLowerCase('DogFood')" results in "dogfood"
  • abs : renvoie la valeur absolue d’un nombre donné – Disponible uniquement dans SharePoint Onlineabs: returns the absolute value for a given number - Only available in SharePoint Online

    • "txtContent":"=abs(-45)" engendre 45"txtContent":"=abs(-45)" results in 45
  • longueur: renvoie le nombre d’éléments dans un tableau (personne sélection multiple ou champ choix), pour toutes les autres valeur types renvoie 1 lorsque vrai et 0 lorsque faux.length: returns the number of items in an array (multi-select person or choice field), for all other value types it returns 1 when true and 0 when false. Elle ne fournit pas de longueur de valeur de chaîne (Voir la solution de contournement indexOf expliquée ultérieurement pour une telle opération).It does NOT provide the length of a string value (see the indexOf workaround explained later on for such operation). - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=length(@currentField)" peut entraîner la création dans 2 s’il existe 2 valeurs sélectionnées"txtContent":"=length(@currentField)" might result in 2 if there are 2 selected values
    • "txtContent":"=length('Some Text')"engendre 1"txtContent":"=length('Some Text')" results in 1
    • "txtContent":"=length('')"engendre 0"txtContent":"=length('')" results in 0
    • "txtContent":"=length(45)"engendre 1"txtContent":"=length(45)" results in 1
    • "txtContent":"=length(0)"engendre 0"txtContent":"=length(0)" results in 0
  • floor : renvoie le plus grand nombre entier inférieur ou égal à un nombre donné.floor: returns the largest integer less than or equal to a given number. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=floor(45.5)" produit 45"txtContent":"=floor(45.5)" results in 45
  • ceiling : arrondit le nombre donné au nombre entier immédiatement supérieur.ceiling: rounds the given number up to the next largest whole number or integer. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=ceiling(45.5)" produit 46"txtContent":"=ceiling(45.5)" results in 46
  • getDate : renvoie le jour du mois de la date indiquée.getDate: returns the day of the month of the given date. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=getDate(Date('12/26/1981'))" produit 26"txtContent":"=getDate(Date('12/26/1981'))" results in 26
  • getMonth : renvoie le mois de la date spécifiée en utilisant l’heure locale, sous la forme d’une valeur de base zéro (où zéro correspond au premier mois de l’année).getMonth: returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year). - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=getMonth(Date('12/26/1981'))" produit 11"txtContent":"=getMonth(Date('12/26/1981'))" results in 11
  • getYear : renvoie l’année de la date indiquée.getYear: returns the year of the given date. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=getYear(Date('12/26/1981'))" produit 1981"txtContent":"=getYear(Date('12/26/1981'))" results in 1981
  • toUpperCase : renvoie la valeur convertie en majuscules (fonctionne uniquement sur les chaînes) – Disponible uniquement dans SharePoint OnlinetoUpperCase: returns the value converted to upper case (only works on strings) - Only available in SharePoint Online

    • "txtContent":"=toUpperCase('DogFood')" engendre « DOGFOOD »"txtContent":"=toUpperCase('DogFood')" results in "DOGFOOD"

Opérateurs binaires : les opérateurs suivants sont les opérateurs binaires arithmétiques standard qui prévoient deux opérandes :Binary operators - The following are operators that expect two operands:

  • indexOf: prend 2 opérandes.indexOf: takes 2 operands. Le texte dans lequel vous souhaitez effectuer une recherche dans le premier groupe est, le deuxième est le texte dans lequel vous souhaitez effectuer une recherche.The first is the text you would like to search within, the second is the text you would like to search for. Renvoie la valeur index de la première occurrence de critère de recherche au sein de la chaîne.Returns the index value of the first occurrence of the search term within the string. Index commence à 0.Indexes start at 0. Si le critère de recherche est introuvable dans le texte, -1 est renvoyée.If the search term is not found within the text, -1 is returned. Cette option respecte la casse.This operator is case-sensitive. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent": "=indexOf('DogFood', 'Dog')"engendre 0"txtContent": "=indexOf('DogFood', 'Dog')" results in 0
    • "txtContent": "=indexOf('DogFood', 'F')"engendre 3"txtContent": "=indexOf('DogFood', 'F')" results in 3
    • "txtContent": "=indexOf('DogFood', 'Cat')"engendre -1"txtContent": "=indexOf('DogFood', 'Cat')" results in -1
    • "txtContent": "=indexOf('DogFood', 'f')"engendre -1"txtContent": "=indexOf('DogFood', 'f')" results in -1
  • joindre: prend 2 opérandes.join: takes 2 operands. La première est une matrice (personne de sélection multiple ou champ de sélection) et la deuxième est la chaîne de séparation.The first is an array (multi-select person or choice field) and the second is the separating string. Renvoie une concaténation de chaîne de la matrice des valeurs séparées par la chaîne de séparation.Returns a string concatenation of the array values separated by the separating string. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent": "=join(@currentField, ', ')" peut entraîner la création dans « Apple, Orange, cerises » (selon les valeurs sélectionnées)"txtContent": "=join(@currentField, ', ')" might result in "Apple, Orange, Cherry" (depending on the selected values)
    • "txtContent": "=join(@currentField.title, '|')" peut entraîner la création dans « Chris Kent | VESA Juvonen | Jeff Teper » (selon les personnes sélectionnées)"txtContent": "=join(@currentField.title, '|')" might result in "Chris Kent|Vesa Juvonen|Jeff Teper" (depending on the selected persons)
  • pow : renvoie la base à la puissance de l’exposant.pow: returns the base to the exponent power. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=pow(2,3)" produit 8"txtContent":"=pow(2,3)" results in 8
  • lastIndexOf : renvoie la position de la dernière occurrence d’une valeur spécifiée dans une chaîne.lastIndexOf: returns the position of the last occurrence of a specified value in a string

    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" produit 8"txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" results in 8
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'F')" produit 11"txtContent": "=lastIndexOf('DogFood DogFood', 'F')" results in 11
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')"engendre -1"txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')" results in -1
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'f')"engendre -1"txtContent": "=lastIndexOf('DogFood DogFood', 'f')" results in -1
  • startsWith : détermine si une chaîne commence par les caractères d’une chaîne spécifiée.startsWith: determines whether a string begins with the characters of a specified string

    • "txtContent":"=startsWith('DogFood', 'Dog')" engendre vrai"txtContent":"=startsWith('DogFood', 'Dog')" results in true
    • "txtContent":"=startsWith('DogFood', 'Food')" engendre faux"txtContent":"=startsWith('DogFood', 'Food')" results in false
  • endsWith : détermine si une chaîne se termine par les caractères d’une chaîne spécifiée.endsWith: determines whether a string ends with the characters of a specified string

    • "txtContent":"=endsWith('DogFood', 'Dog')" engendre faux"txtContent":"=endsWith('DogFood', 'Dog')" results in false
    • "txtContent":"=endsWith('DogFood', 'Food')" engendre vrai"txtContent":"=endsWith('DogFood', 'Food')" results in true

Opérateurs ternaires : les opérateurs suivants prévoient trois opérandes :Ternary operators - The following are operators that expect three operands:

  • subString : renvoie la partie de la chaîne située entre les indices de début et de fin.substring: returns the part of the string between the start and end indices. - Disponible uniquement dans SharePoint Online - Only available in SharePoint Online

    • "txtContent":"=substring('DogFood', 3, 4)" résultats dans F"txtContent":"=substring('DogFood', 3, 4)" results in F
    • "txtContent":"=substring('DogFood', 4, 3)" résultats dans F"txtContent":"=substring('DogFood', 4, 3)" results in F
    • "txtContent":"=substring('DogFood', 3, 6)" résultats dans Foo"txtContent":"=substring('DogFood', 3, 6)" results in Foo
    • "txtContent":"=substring('DogFood', 6, 3)" résultats dans Foo"txtContent":"=substring('DogFood', 6, 3)" results in Foo

    La méthode substring() retourne la partie de la chaîne située entre les indices de début et de fin, ou à la fin de la chaîne.The substring() method returns the part of the string between the start and end indexes, or to the end of the string.

  • Replace : recherche une valeur spécifiée dans une chaîne et renvoie une nouvelle chaîne dans laquelle la valeur spécifiée est remplacée.replace: searches a string for a specified value and returns a new string where the specified value is replaced. Seule la première instance de la valeur est remplacée.Only the first instance of the value will be replaced.

    • "txtContent":"=replace('Hello world', 'world', 'everyone')" engendre Bonjour tout le monde"txtContent":"=replace('Hello world', 'world', 'everyone')" results in Hello everyone
  • padStart : remplit la chaîne active avec une autre chaîne jusqu’à ce que la chaîne résultante atteigne la longueur donnée.padStart: pads the current string with another string until the resulting string reaches the given length. Le remplissage est appliqué à partir du début de la chaîne actuelle.The padding is applied from the start of the current string.

    • "txtContent":"=padStart('DogFood', 10, 'A')" engendre AAADogFood"txtContent":"=padStart('DogFood', 10, 'A')" results in AAADogFood
    • "txtContent":"=padStart('DogFood', 10, 'AB')" engendre ABADogFood"txtContent":"=padStart('DogFood', 10, 'AB')" results in ABADogFood
    • "txtContent":"=padStart('DogFood', 5, 'A')" engendre DogFood"txtContent":"=padStart('DogFood', 5, 'A')" results in DogFood
  • padEnd : remplit la chaîne active avec une chaîne donnée jusqu’à ce que la chaîne résultante atteigne la longueur donnée.padEnd: pads the current string with a given string until the resulting string reaches the given length. Le remplissage est appliqué à partir de la de la chaîne actuelle.The padding is applied from the end of the current string.

    • "txtContent":"=padEnd('DogFood', 10, 'A')" engendre « DogFoodAAA »"txtContent":"=padEnd('DogFood', 10, 'A')" results in DogFoodAAA
    • "txtContent":"=padEnd('DogFood', 10, 'AB')" engendre DogFoodABA"txtContent":"=padEnd('DogFood', 10, 'AB')" results in DogFoodABA
    • "txtContent":"=padEnd('DogFood', 5, 'A')" engendre DogFood"txtContent":"=padEnd('DogFood', 5, 'A')" results in DogFood

Opérateur conditionnel : l’opérateur conditionnel est :Conditional operator - The conditional operator is:

  • **? **:opérations conditionnelle écrites que la syntaxe d’arborescence abstraite utilise? comme opérateur.?: Conditional operations written in Abstract Tree Syntax use ? as the operator. Ceci permet d’obtenir une expression équivalente à un ?This is to achieve an expression equivalent to a ? b : c, où si l’expression a est true, le résultat est b, sinon le résultat est c.b : c, where if the expression a evaluates to true, then the result is b, else the result is c. Pour les expressions de style Excel vous écrivez avec un if déclaration.For Excel style expressions you write these with an if statement. De même, il existe 3 opérandes.Regardless, there are 3 operands. La première est la condition qui doit être évaluée.The first is the condition to evaluate. Le deuxième est le résultat lorsque la condition est vraie.The second is the result when the condition is true. Le troisème est le résultat lorsque la condition est vraie.The third is the result when the condition is false.
    • "txtContent":"=if(4 < 5, 'yes', 'no')" engendre «oui»"txtContent":"=if(4 < 5, 'yes', 'no')" results in "yes"
    • "txtContent":"=if(4 > 5, 'yes', 'no')" engendre « non »"txtContent":"=if(4 > 5, 'yes', 'no')" results in "no"

Opérateurs liés au champ de plusieurs valeurs-les opérateurs suivants sont utilisés uniquement dans un contexte avec plusieurs valeurs champ de type Personne, Recherche ou Choix.Multi-value field-related operators - The following operators are only used in a context with multi-value field of type Person, Lookup, or Choice.

  • longueurlength
  • jointurejoin
  • loopIndexloopIndex

length, lorsque a fourni avec un nom de champ, renvoie le nombre de membres dans un champ multiple.length, when provided with a field name, returns the number of members in a multi-valued field. Lorsqu’un champ à valeur unique est fourni, length renverra 1 lorsqu’il existe une valeur dans ce champ.When a single-value field is provided, length will return 1 when there is a value in that field.

join Concatène les valeurs d’un champ à plusieurs valeurs avec un séparateur de milliers spécifié.join concatenates values in a multi-value field with a specified separator. Le premier opérande doit pointer sur une valeur dans un champ à plusieurs valeurs, par exemple, "@currentField.lookupValue", "[$AssignedTo.title]".The first operand shall point to a value in a multi-value field, e.g. "@currentField.lookupValue", "[$AssignedTo.title]". La deuxième opérande doit être une chaîne littérale qui est le séparateur qui joint les valeurs ensemble.The second operand shall be a string literal that is the separator that joins the values together.

loopIndex, lorsque a fourni avec un nom de variable itérateur, retourne l’index actuel (à partir de 0) de l’itérateur.loopIndex, when provided with a name of iterator variable, returns the current index (starting from 0) of the iterator. Le nom d’itérateur doit être mentionné en tant que chaîne littérale.The name of iterator must be provided as a string literal. loopIndex fonctionne uniquement au sein de l’élément avec respectifs forEach activé ou ses éléments enfants.loopIndex would only work within the element with respective forEach enabled or its children elements.

Voir ici pour consulter des exemples.See here for examples.

Opérateurs liés aux chaînes : certains des opérateurs précédents peuvent être utilisés avec des valeurs de chaîne.String related operators - Some of the previously detailed operators can be used when working with string values

  • +
  • indexOf (pour la solution de contournement de la longueur de chaîne)indexOf ( for string length workaround )

+ peut être utilisé lorsque vous devez concaténer des chaînes, par exemple : "txtContent": "=[$column1] + ' ' + [$column2] + 'some other text"+ can be used when there is a need to concatenate strings, for instance : "txtContent": "=[$column1] + ' ' + [$column2] + 'some other text"

indexOf Étant donné que l’opérateur length ne fonctionne pas pour les types de valeurs de chaînes (il renvoie la valeur 1 ou 0), indexOf peut nous servir de solution de contournement pour obtenir la longueur d’une chaîne, par exemple : indexOf([$column1] + '^', '^').indexOf Since the operator length doesn't work for string value types ( it will return 1 or 0 ), indexOf can serve us as a nice workaround to get the length of a string, for instance: indexOf([$column1] + '^', '^'). Nous vous conseillons d’utiliser '^' ou tout autre caractère que nous pourrions utiliser pour rechercher la fin de la chaîne.We will use '^' or any other character we may want to use to find out the end of the string.

opérandeoperands

Spécifie les paramètres ou opérandes d’une expression.Specifies the parameters, or operands for an expression. Il s’agit d’un tableau de valeurs de base ou d’objets Expression.This is an array of Expression objects or base values.

Valeurs de chaînes spécialesSpecial string values

Les valeurs pour txtContent, les styles et les attributs peuvent être des chaînes ou des objets Expression.The values for txtContent, styles, and attributes can be either strings or Expression objects. Quelques modèles de chaînes spéciaux pour extraire les valeurs des champs dans la liste et le contexte de l’utilisateur sont pris en charge.A few special string patterns for retrieving values from the fields in the list and the user's context are supported.

« @currentField »"@currentField"

Évaluera sur la valeur du champ actuel.Will evaluate to the value of the current field.

Certains types de champs sont représentés comme des objets.Some field types are represented as objects. Pour générer une valeur à partir d’un objet, référez-vous à une propriété particulière à l’intérieur de cet objet.To output a value from an object, refer to a particular property inside that object. Par exemple, si le champ actif est un champ de personne/groupe, spécifiez @currentField.title pour récupérer le nom de la personne, qui est normalement affiché dans les vues de liste.For example, if the current field is a person/group field, specify @currentField.title to retrieve the person's name, which is normally displayed in list views. Voici les types de champs qui sont représentés comme des objets avec une liste de leurs propriétés.The following are the field types that are represented as objects with a list of their properties.

Notes

La valeur @currentField.title renvoie le nom d’une personne par défaut.The @currentField.title returns a person's name by default. Toutefois, si la valeur Afficher le champ du champ de personne a été ajustée, il est possible que cela modifie la valeur de la propriété title.However, if the person field's Show Field has been adjusted, it may change the value of the title property. Par exemple, un champ de personne dont la valeur Afficher le champ est définie sur le département indiquera le département de la personne pour la propriété title.For example, a person field with the Show Field configured as Department will have the person's department for the title property.

Champs de contactsPeople fields

L’objet de champ de contacts comporte les propriétés suivantes (avec des valeurs d’exemple) :The people field object has the following properties (with example values):

{
   "id": "122",
   "title": "Kalya Tucker",
   "email": "kaylat@contoso.com",
   "sip": "kaylat@contoso.com",
   "picture": "https://contoso.sharepoint.com/kaylat_contoso_com_MThumb.jpg?t=63576928822",
   "department":"Human Resources",
   "jobTitle":"HR Manager"
}

Le champ contacts peut avoir des cartes de pointage avec une mise en formePeople field can have profile hover cards along with formatting

{
   "elmType": "div",
   "txtContent": "[$Editor.title]",
   "defaultHoverField": "[$Editor]"  
}

Champs de date/heureDate/Time fields

La valeur des champs de date/heure peut être récupérée de différentes façons, selon le format de date que vous souhaitez afficher.The value of Date/Time fields can be retrieved a few different ways, depending on the date format you'd like to display. Les méthodes suivantes pour convertir des valeurs de date en des formats spécifiques sont prises en charge :The following methods for converting date values to specific formats are supported:

  • toLocaleString() : affiche un type de date entièrement développé avec la date et l’heure.toLocaleString() - Displays a date type fully expanded with date and time.
  • toLocaleDateString() : affiche un type de date avec la date uniquement.toLocaleDateString() - Displays a date type with just the date.
  • toLocaleTimeString() : affiche un type de date avec l’heure uniquement.toLocaleTimeString() - Displays a date type with just the time.

Par exemple, le JSON suivant affiche le champ actuel (en supposant qu’il s’agit d’un champ de date) comme chaîne de date et heure.For example, the following JSON will display the current field (assuming it's a date field) as a date and time string.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": {
        "operator": "toLocaleString()",
        "operands" : ["@currentField"]
    }
}

Voici le même exemple, sauf que celui-ci utilise la syntaxe d’expression de style Excel :Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "=toLocaleString(@currentField)"
}

Champs d’emplacementLocation fields

L’objet de champ d’emplacement comporte les propriétés suivantes (avec des valeurs d’exemple) :The location field object has the following properties (with example values):

{
   "Address": {
      "City": "Knoxville",
      "CountryOrRegion": "United States",
      "State": "TN",
      "Street": "963 Worlds Fair Park Dr"
   },
   "Coordinates": {
      "Latitude": "35.961673736572266",
      "Longitude": "-83.92420959472656"
   },
   "DisplayName": "World's Fair Park",
   "LocationUri": "https://www.bingapis.com/api/v6/localentities/8346bf26-6da4-104c-6ba5-2334b83f6ac8?setLang=en"
}

Notes

Les champs d’emplacement n’ont pas encore d’option « Mettre en forme cette colonne » dans la vue de liste et les mises en forme appliquées directement à ces champs devront être effectuées via les paramètres de champ.Location fields do not currently have a "Format this column" option in the list view and formats applied directly to these fields will need to be done through field settings.


L’exemple suivant montre comment un champ d’emplacement peut être utilisé sur un champ actuel.The following example shows how a location field might be used on a current field.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "block"
  },
  "children": [
    {
      "elmType": "a",
      "txtContent": "@currentField.DisplayName",
      "attributes": {
        "href": "='https://www.bing.com/maps?cp=' + @currentField.Coordinates.Latitude + '~' + @currentField.Coordinates.Longitude + '&lvl=17&sV=2'",
        "target": "_blank",
        "title": "=@currentField.Coordinates.Latitude + ', ' + @currentField.Coordinates.Longitude"
      },
      "style": {
        "display": "block"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField.Address.Street"
    },
    {
      "elmType": "div",
      "txtContent": "=@currentField.Address.City + ', ' + @currentField.Address.State"
    },
    {
      "elmType": "div",
      "txtContent": "@currentField.Address.CountryOrRegion"
    }
  ]
}

Champs de rechercheLookup fields

L’objet de champ Liste de choix comporte les propriétés suivantes (avec des valeurs d’exemple) :The lookup field object has the following properties (with example values):

{
   "lookupId": "100",
   "lookupValue": "North America",
}

L’exemple suivant montre comment un champ de recherche peut être utilisé sur un champ actuel.The following example shows how a lookup field might be used on a current field.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField.lookupValue",
   "attributes": {
      "href": {
         "operator": "+",
         "operands": [
            "https://contoso.sharepoint.com/teams/Discovery/Lists/Regions/DispForm.aspx?ID=",
            "@currentField.lookupId"
         ]
      },
      "target": "_blank"
   }
}

Champs de lien hypertexteHyperlink fields

L’objet de champ Lien hypertexte comporte les propriétés suivantes (avec des valeurs d’exemple) :The hyperlink field object has the following property (with example value):

{
   "desc": "SharePoint Patterns and Practices",
}

Pour référencer la valeur d’URL, utilisez @currentField.To reference the URL value, use @currentField.

L’exemple suivant montre comment un champ Lien hypertexte peut être utilisé sur un champ actuel.The following example shows how a hyperlink field might be used on a current field.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField.desc",
   "attributes": {
      "href": "@currentField",
      "target": "_blank"
   }
}

« [$FieldName] »"[$FieldName]"

La colonne est formatée dans le contexte de la ligne entière.The column is formatted within the context of the entire row. Vous pouvez utiliser ce contexte pour faire référence aux valeurs d’autres champs dans la même ligne en spécifiant le nom interne du champ entouré de crochets et précédé par un signe dollar : [$InternalName].You can use this context to reference the values of other fields within the same row by specifying the internal name of the field surrounded by square brackets and preceded by a dollar sign: [$InternalName]. Par exemple, pour obtenir la valeur d’un champ avec le nom interne « VentesMars », utilisez [$MarchSales].For example, to get the value of a field with an internal name of "MarchSales", use [$MarchSales].

Si la valeur d’un champ est un objet, les propriétés de l’objet sont accessibles.If the value of a field is an object, the object's properties can be accessed. Par exemple, pour accéder à la propriété « Title » d’un champ de personne nommé « SalesLead », utilisez « [$SalesLead.title] ».For example, to access the "Title" property of a person field named "SalesLead", use "[$SalesLead.title]".

« @currentWeb »"@currentWeb"

Cela permet d’évaluer l’URL absolue du site.This will evaluate to the absolute URL for the site. Cela correspond à la valeur webAbsoluteUrl dans le contexte de page.This is equivalent to the webAbsoluteUrl value within the page context. Cette valeur est disponible uniquement dans SharePoint Online.This value is only available in SharePoint Online.

« @me »"@me"

Cela renverra l’adresse e-mail de l’utilisateur actuellement connecté.This will evaluate to the email address of the current logged in user.

Ce champ peut être utilisé pour afficher l’adresse e-mail de l’utilisateur actuel, mais il est plus souvent employé dans des conditions.This field can be used to display the current user's email address, but more likely it will be used within conditions. L’exemple suivant définit la couleur du champ de personne sur rouge quand sa valeur correspond à l’utilisateur connecté actuellement et sur bleu dans les autres cas :The following is an example of setting the color for a person field to red when it is equal to the current logged in user and blue otherwise:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.title",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "==",
               "operands": [
                  "@me",
                  "@currentField.email"
               ]
            },
            "red",
            "blue"
         ]
      }
   }
}

Voici le même exemple, sauf que celui-ci utilise la syntaxe d’expression de style Excel :Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.title",
   "style": {
      "color": "=if(@me == @currentField.email, 'red', 'blue')"
   }
}

« @now »"@now"

Cela évaluera sur la date et l’heure actuelles.This will evaluate to the current date and time.

« @rowIndex »"@rowIndex"

Cette valeur renvoie l’index restitué d’une ligne à l’intérieur d’un affichage.This will evaluate to the rendered index of a row within a view. Cette valeur est basée sur la position restituée et reste constante selon la position, même si les affichages sont triés et filtrés.This value is based on render position and will remain consistent based on position even as views are sorted and filtered. Index commence à 0.Indexes start at 0. Cette valeur est disponible uniquement dans SharePoint Online.This value is only available in SharePoint Online.

Voici comment cette valeur peut être utilisée à l’intérieur d’un format d’affichage pour appliquer aux lignes des styles alternés :Here's an example of using the value within a view format to apply alternating styles to rows:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if(@rowIndex % 2 == 0,'ms-bgColor-themeLighter ms-bgColor-themeLight--hover','')"
}

« @window.innerHeight »"@window.innerHeight"

Cela renverra un nombre égal à la hauteur de la fenêtre du navigateur (en pixels) lorsque la liste a été affichée.This will evaluate to a number equal to the height of the browser window (in pixels) when the list was rendered.

« @window.innerWidth »"@window.innerWidth"

Cela renverra un nombre égal à la largeur de la fenêtre du navigateur (en pixels) lorsque la liste a été affichée.This will evaluate to a number equal to the width of the browser window (in pixels) when the list was rendered.

MiniaturesThumbnails

Dans une bibliothèque de documents figure une série de jetons qui peuvent être utilisés pour extraire l’URL de la miniature d’un fichier, notamment :In a document library, there is a series of tokens that can be used to retrieve the URL to the thumbnail of a file, including:

  • @thumbnail.small, @thumbnail.medium, et @thumbnail.large renvoient l’URL de la miniature en trois tailles prédéfinies différentes.@thumbnail.small, @thumbnail.medium, and @thumbnail.large evaluate to the thumbnail URL in 3 different predefined sizes.
  • @thumbnail.<bounding size> renvoie l’URL des miniatures les plus grandes qui ne dépassent pas la taille de liaison en largeur et hauteur.@thumbnail.<bounding size> evaluates to the URL to the largest thumbnails that is not larger than the bounding size in both width and height. Par exemple, @thumbnail.150 renvoie l’URL d’une miniature qui ne dépasse pas 150 × 150 pixels.For example, @thumbnail.150 evaluates to the URL to a thumbnail not larger than 150×150 pixels.
  • @thumbnail.<bounding width>x<bounding height> renvoie l’URL de la miniature la plus grande qui ne dépasse ni la largeur ni la hauteur de liaison.@thumbnail.<bounding width>x<bounding height> evaluates to the URL to the largest thumbnail that is not larger than the bounding width and bounding height. Par exemple, @thumbnail.100x200 renvoie l’URL d’une miniature qui ne dépasse pas 100 pixels de largeur et 200 pixels de hauteur.For example, @thumbnail.100x200 evaluates to the URL to a thumbnail not wider than 100 pixels and not higher than 200 pixels.

Ces jetons ne renvoient aucune valeur sur les éléments qui ne sont pas des fichiers, y compris des dossiers.These tokens will yield no value on non-file items including folders.

Notes

Les proportions de la miniature générée sont identiques à l’apparence du fichier. Le fait de modifier les tailles du cadre n’aura aucune incidence sur les proportions de la miniature.The aspect ratio of thumbnail generated is the same as how the file looks like, changing the bounding sizes will not affect the aspect ratio of the thumbnail.

Conseil

Les miniatures sont disponibles uniquement pour un certain nombre de formats de fichier pris en charge répertoriés.Thumbnails are only available for a list of supported file formats. Ainsi, il peut parfois arriver que l’URL générée ne soit pas accessible, car certains formats ne sont pas pris en charge.It means that sometimes the URL generated is not accessible due to lack of support on certain formats. Toutefois, si un jeton de miniature valide est défini comme attribut src unique d’une balise img, l’image est masquée lorsqu’elle n’est pas disponible.However, if a valid thumbnail token is set as the only src attribute of an img tag, we will take care of it and hide the image when it is not available.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "img",
   "attributes": {
      "src": "@thumbnail.200x150",
      "alt": "='Thumbnail of file ' + [$FileLeafRef]"
   },
   "style": {
      "width": "100%",
      "max-width": "100%"
   }
}

Carte de pointage de fichier par défaut utilisant FileLeafRefDefault file hover card using FileLeafRef

 {
    "elmType": "img",
    "style": {
        "width": "100%",
        "height": "100%",
        "display": "=if([$File_x0020_Type] == '', 'none', '')"
    },
    "attributes": {
        "src": "@thumbnail.300x300"
    },
    "defaultHoverField": "[$FileLeafRef]"
}

displayValuedisplayValue

Les types de colonnes suivants peuvent utiliser la propriété displayValue pour obtenir la valeur rendue par défaut, en fonction du paramètre de colonneThe following column types can use displayValue property to get the default rendered value, based on the column setting

  • Date/HeureDate/Time
  • NombreNumber
  • Oui/NonYes/No
 {
    "elmType": "div",
    "txtContent": "@currentField.displayValue"
}

Il fonctionne également avec nom de champThis also works with field name

 {
    "elmType": "div",
    "txtContent": "[$FieldName.displayValue]"
}

Voir aussiSee also