Référence de syntaxe de mise en forme

elmType

Spécifie le type d’élément à créer. Les éléments valides sont les suivants :

  • div
  • span
  • a
  • img
  • svg
  • chemin
  • Bouton
  • p

Toute autre valeur entraînera une erreur.

txtContent

Propriété facultative qui spécifie le contenu du texte de l’élément spécifié par elmType. La valeur de cette propriété peut être soit une chaîne (y compris des chaînes spéciales), soit un objet Expression.

style

Propriété facultative qui spécifie les attributs de style à appliquer à l’élément spécifié par elmType. Il s’agit d’un objet avec des paires nom-valeur qui correspondent aux valeurs et noms CSS. 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. Les attributs de style suivants sont autorisés.

'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'

'stroke'
'fill-opacity'

'--inline-editor-border-width'
'--inline-editor-border-style'
'--inline-editor-border-radius'
'--inline-editor-border-color'

L’exemple suivant indique la valeur d’un objet de style. Dans cet exemple, deux propriétés de style (padding et background-color) seront appliquées. La valeur padding est une valeur de chaîne codée en dur. 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. Pour plus d’informations, consultez la section relative à l’objet Expression.

{
  "$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 :

{
  "$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')"
  }
}

attributes

Propriété facultative qui spécifie les attributs supplémentaires à ajouter à l’élément spécifié par elmType. Il s’agit d’un objet avec des paires nom-valeur. Les noms d’attribut doivent être l’une des valeurs suivantes :

  • href
  • rel
  • src
  • class
  • target
  • title
  • role
  • iconName
  • d
  • aria
  • data-interception
  • viewBox
  • preserveAspectRatio
  • Déplaçable

Tout autre nom d’attribut entraînera une erreur. Les valeurs d’attribut peuvent être des chaînes ou des objets Expression. L’exemple suivant ajoute deux attributs (target et href) à l’élément spécifié par elmType. L’attribut target est codé en dur sous forme de chaîne. L’attribut href est une expression qui, à l’exécution, renverra http://finance.yahoo.com/quote/ + valeur du champ actif (@currentField).

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

children

Propriété facultative qui spécifie les éléments enfants de l’élément spécifié par elmType. La valeur est spécifiée en tant que tableau d’objets elm. Il peut y avoir un niveau d’imbrication arbitraire. Si un élément comporte la propriété txtContent, les propriétés enfants sont ignorées.

debugMode

Propriété facultative destinée au débogage. Elle affiche des messages d’erreur et enregistre les avertissements sur la console.

foreach

Une propriété facultative qui permet à un élément lui-même dupliquer pour chaque membre d’un champ de plusieurs valeurs spécifiques. La valeur de "forEach" propriété doit être au format d’un "iteratorName in @currentField" ou "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. 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.

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.

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. L’index de l’itérateur peut être accessible avec loopIndex opérateur.

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.

Voir ici pour consulter des exemples.

customRowAction

Les éléments button peuvent être utilisés pour lancer une action spécifique sur l’élément parent. 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. L’action doit être associée à l’une des valeurs suivantes :

  • 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. Ci-dessous, un exemple de bouton qui, une fois cliqué, simule le fait de cliquer sur l’élément, ce qui entraîne l’ouverture de l’élément de liste. L’ajout de ce bouton d’exemple à une bibliothèque de documents simule le clic sur le fichier ou dossier, ce qui entraîne son ouverture.

    {
      "$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. Voici un exemple de ce type de bouton.

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

  • editProps : le fait de cliquer sur le bouton ouvre la page des propriétés de l’élément en mode Édition.

  • openContextMenu: En cliquant sur ce bouton, le menu contextuel par défaut de l'élément s'ouvre.

  • setValue: cliquez sur l’élément pour mettre à jour l’élément avec les valeurs de champ fournies.

    {
      "elmType": "div",
      "txtContent": "[$FieldName]",
      "customRowAction":{
        "action": "setValue",
        "actionInput": {
          "FieldInternalName_1": "FieldValue_1",
          "FieldInternalName_2": "FieldValue_2",
        }
      }
    }
    
  • executeFlow : le fait de cliquer sur le bouton lance le flux spécifié par l’ID au sein de l’attribut actionParams. Pour obtenir un exemple de cela, voir Créer un bouton pour lancer une Flow. Voici un exemple de ce type de bouton.

    {
      "$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 :

  • id : ID du flux pour lancer (requis)
  • headerText : définit le texte situé en haut du volet de flux (facultatif)
  • runFlowButtonText : définit le texte du bouton principal dans le volet de flux (facultatif)

customCardProps

Ajoutez une carte personnalisée à l'élément, qui s'affiche lors du survol ou du clic. La personnalisation suivante est disponible :

  • "formatter" - Objet JSON qui définit la mise en forme pour les cartes personnalisées.
  • "openOnEvent" - Événement sur lequel la carte personnalisée doit s’ouvrir. "click" ou "hover" sont les deux valeurs autorisées.
  • "directionalHint" - Spécifiez le sens par rapport à la cible dans laquelle la carte personnalisée sera positionnée.
  • "isBeakVisible" - Indiquez si le bec doit être montré ou non.
  • "beakStyle" - Spécifie l’objet de style pour le bec de la carte personnalisée.

defaultHoverField

Ajoute la carte de visite pour les champs de personnes ou la carte de pointer de fichier pour les fichiers dans la bibliothèque de documents.

  • "defaultHoverField": "[$Editor]" ajoute une carte de visite pour le champ éditeur
  • "defaultHoverField": "[$FileLeafRef]" ajoute une carte de pointeur de fichier dans documentLibrary.

columnFormatterReference

Il sera remplacé par le JSON de formateur de la colonne référencée. La référence à plusieurs niveau n’est pas prise en charge.

{
  "columnFormatterReference": "[$FieldName]"
}

inlineEditField

Ajoute l’éditeur de champ pour la colonne référencé.

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

Expressions

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). Les objets Expression peuvent être imbriqués pour contenir d’autres objets Expression.

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 de style Excel

Toutes les expressions de style Excel commencent par un signe égal (=). Ce style d’expression est uniquement disponible dans SharePoint Online (et non SharePoint 2019).

Cette expression conditionnelle simple prend la valeur none si @me n’est pas égal à [$Author.email]. Sinon, elle est définie sur `` :

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

Des instructions if/else plus complexes peuvent être écrites comme suit :

=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 :

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

Expressions d’arborescence de syntaxe abstraite

L’exemple suivant contient un objet Expression qui effectue l’expression suivante :

(@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érateurs

Les opérateurs spécifient le type d’opération à effectuer. Les opérateurs suivants sont des valeurs valides :

  • +
  • -
  • /
  • *
  • <
  • >
  • %
  • ==
  • !=
  • <=
  • >=
  • ||
  • &&
  • toString()
  • Number()
  • Date()
  • cos
  • assoc
  • ?
  • :
  • toLocaleString()
  • toLocaleDateString()
  • toLocaleTimeString()
  • indexOf
  • toLowerCase
  • jointure
  • longueur
  • abs
  • loopIndex
  • floor
  • ceiling
  • pow
  • substring
  • getDate
  • getMonth
  • getYear
  • toUpperCase
  • lastIndexOf
  • startsWith
  • endsWith
  • replace
  • padStart
  • padEnd
  • getUserImage
  • addDays
  • addMinutes
  • appendTo
  • removeFrom

Opérateurs arithmétiques binaires : les opérateurs suivants sont les opérateurs binaires arithmétiques standard qui prévoient deux opérandes :

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

Opérateurs unaires : les opérateurs suivants sont les opérateurs unaires standard qui prévoient un seul opérande :

  • toString(): renvoie une valeur de type string qui représente l’identificateur Entry unique de l’objet.
    • "txtContent": "=toString(45)"engendre "45"
  • Number(): renvoie la valeur numérique, si l’opérande n’est pas un nombre, NaN est renvoyé
    • "txtContent": "=Number('365')"engendre "365"
    • "txtContent": "=Number('Wowee')" engendre NaN
    • "txtContent": "=Number(Date('12/26/1981'))"engendre 378190800000
  • Date(): renvoie un objet datetime à partir du paramètre (convertit des chaînes ou des nombres en dates sensibles paramètres régionaux)
    • "txtContent": "=Date('12/26/1981')" engendre 26/12/1981, 12:00:00 AM
  • cos: renvoie le cosinus de l’angle spécifié qui doit être spécifié en radians
    • "txtContent": "=cos(5)"engendre 0.28366218546322625
  • sin: renvoie le cosinus d’un nombre
    • "txtContent": "=sin(90)"engendre 0.8939966636005579
  • toLocaleString(): renvoie une représentation sensible de langage d’une 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»
  • toLocaleString(): renvoie une représentation sensible de langage uniquement d’une partie de 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»
  • toLocaleString(): renvoie une représentation sensible de langage uniquement de la partie heure de la 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»
  • toLowerCase : renvoie la valeur convertie en minuscules (fonctionne uniquement sur les chaînes) – Disponible uniquement dans SharePoint Online
    • "txtContent":"=toLowerCase('DogFood')" engendre « dogfood »
  • abs : renvoie la valeur absolue d’un nombre donné – Disponible uniquement dans SharePoint Online
    • "txtContent":"=abs(-45)" engendre 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. 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). - Disponible uniquement dans SharePoint Online
    • "txtContent":"=length(@currentField)" peut entraîner la création dans 2 s’il existe 2 valeurs sélectionnées
    • "txtContent":"=length('Some Text')"engendre 1
    • "txtContent":"=length('')"engendre 0
    • "txtContent":"=length(45)"engendre 1
    • "txtContent":"=length(0)"engendre 0
  • plancher : renvoie le plus grand nombre entier inférieur ou égal à un nombre donné. Seulement disponible dans Microsoft Office SharePoint Online
    • "txtContent":"=floor(45.5)" engendre 45
  • plafond : arrondit le nombre donné au nombre entier, ou entier le plus grand suivant. Seulement disponible dans Microsoft Office SharePoint Online
    • "txtContent":"=ceiling(45.5)" produit 46
  • getDate : renvoie le jour du mois de la date indiquée. - Disponible uniquement dans SharePoint Online
    • "txtContent":"=getDate(Date('12/26/1981'))" produit 26
  • getMonth : renvoie le mois à la date spécifiée en fonction l’heure locale, sous la forme d’une valeur de base zéro (où zéro correspond au premier mois de l’année). Seulement disponible dans Microsoft Office SharePoint Online
    • "txtContent":"=getMonth(Date('12/26/1981'))" produit 11
  • getYear : renvoie l’année de la date indiquée. - Disponible uniquement dans SharePoint Online
    • "txtContent":"=getYear(Date('12/26/1981'))" produit 1981
  • toUpperCase : renvoie la valeur convertie en majuscules (fonctionne uniquement sur les chaînes) – Disponible uniquement dans SharePoint Online
    • "txtContent":"=toUpperCase('DogFood')" donne « DOGFOOD » Opérateurs binaires - Les opérateurs suivants attendent deux opérandes ::
  • indexOf: prend 2 opérandes. La première est le texte (ou tableau) dans lequel vous souhaitez effectuer une recherche, la seconde est le texte que vous souhaitez rechercher. Retourne la valeur d’index de la première occurrence du terme de recherche dans la chaîne (ou le tableau). Index commence à 0. Si le terme de recherche est introuvable dans le texte (ou le tableau), -1 est retourné. Cette option respecte la casse. - Disponible uniquement dans SharePoint Online
    • "txtContent": "=indexOf('DogFood', 'Dog')"engendre 0
    • "txtContent": "=indexOf('DogFood', 'F')"engendre 3
    • "txtContent": "=indexOf('DogFood', 'Cat')"engendre -1
    • "txtContent": "=indexOf('DogFood', 'f')"engendre -1
  • joindre: prend 2 opérandes. 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. Renvoie une concaténation de chaîne de la matrice des valeurs séparées par la chaîne de séparation. - Disponible uniquement dans SharePoint Online
    • "txtContent": "=join(@currentField, ', ')" peut entraîner la création dans « Apple, Orange, cerises » (selon les valeurs sélectionnées)
    • "txtContent": "=join(@currentField.title, '|')" peut entraîner la création dans « Chris Kent | VESA Juvonen | Jeff Teper » (selon les personnes sélectionnées)
  • pow : renvoie la base à la puissance de l’exposant. - Disponible uniquement dans SharePoint Online
    • "txtContent":"=pow(2,3)" produit 8
  • lastIndexOf : retourne la position de la dernière occurrence d’une valeur spécifiée dans une chaîne (ou tableau)
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" produit 8
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'F')" produit 11
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')"engendre -1
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'f')"engendre -1
  • startsWith : détermine si une chaîne commence par les caractères d’une chaîne spécifiée.
    • "txtContent":"=startsWith('DogFood', 'Dog')" engendre vrai
    • "txtContent":"=startsWith('DogFood', 'Food')" engendre faux
  • endsWith : détermine si une chaîne se termine par les caractères d’une chaîne spécifiée.
    • "txtContent":"=endsWith('DogFood', 'Dog')" engendre faux
    • "txtContent":"=endsWith('DogFood', 'Food')" engendre vrai
  • getUserImage : retourne une URL pointant vers l’image de profil de l’utilisateur pour un e-mail donné et une taille par défaut
    • "src":"=getUserImage('kaylat@contoso.com', 'small')" retourne une URL pointant vers l’image de profil de l’utilisateur en petite résolution
    • "src":"=getUserImage('kaylat@contoso.com', 's')" retourne une URL pointant vers l’image de profil de l’utilisateur en petite résolution
    • "src":"=getUserImage('kaylat@contoso.com', 'medium')" retourne une URL pointant vers l’image de profil de l’utilisateur en résolution moyenne
    • "src":"=getUserImage('kaylat@contoso.com', 'm')" retourne une URL pointant vers l’image de profil de l’utilisateur en résolution moyenne
    • "src":"=getUserImage('kaylat@contoso.com', 'large')" retourne une URL pointant vers l’image de profil de l’utilisateur en haute résolution
    • "src":"=getUserImage('kaylat@contoso.com', 'l')" retourne une URL pointant vers l’image de profil de l’utilisateur en haute résolution
  • appendTo: renvoie un tableau avec l’entrée donnée et le tableau donné
    • "txtContent": "=appendTo(@currentField, 'Choice 4')" renvoie un tableau avec « Choice 4 » ajouté au @currentField tableau
    • "txtContent": "=appendTo(@currentField, 'kaylat@contoso.com')" renvoie un tableau avec « kaylat@contoso.com » ajouté au tableau @currentField
  • removeFrom: renvoie un tableau avec l’entrée donnée supprimée du tableau donné, si elle est présente
    • "txtContent": "=removeFrom(@currentField, 'Choice 4')" renvoie un tableau avec « Choice 4 » supprimé du @currentField tableau
    • "txtContent": "=removeFrom(@currentField, 'kaylat@contoso.com')" renvoie un tableau avec « kaylat@contoso.com » supprimé du tableau @currentField tableau
  • addDays: renvoie un objet datetime avec des jours ajoutés (ou déduits) de la valeur de date/heure donnée
    • "txtContent": "=addDays(Date('11/14/2021'), 3)" renvoie un 17/11/2021, 12:00:00 AM
    • "txtContent": "=addDays(Date('11/14/2021'), -1)" renvoie un 13/11/2021, 12:00:00 AM
  • addMinutes: renvoie un objet datetime avec des minutes ajoutées (ou déduites) de la valeur de date/heure donnée
    • "txtContent": "=addMinutes(Date('11/14/2021'), 3)" renvoie un 14/11/2021, 12:03:00 AM
    • "txtContent": "=addMinutes(Date('11/14/2021'), -1)" renvoie un 13/11/2021, 11:59:00 AM

Opérateurs ternaires : les opérateurs suivants prévoient trois opérandes :

  • subString : renvoie la partie de la chaîne située entre les indices de début et de fin. Seulement disponible dans Microsoft Office SharePoint Online

    • "txtContent":"=substring('DogFood', 3, 4)" résultats dans F
    • "txtContent":"=substring('DogFood', 4, 3)" résultats dans F
    • "txtContent":"=substring('DogFood', 3, 6)" résultats dans Foo
    • "txtContent":"=substring('DogFood', 6, 3)" résultats dans 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.

  • replace: recherche une chaîne (ou un tableau) pour une valeur spécifiée et renvoie une nouvelle chaîne (ou tableau) dans laquelle la valeur spécifiée est remplacée. Dans le cas d'une chaîne de caractères, seule la première instance de la valeur sera remplacée.

    • "txtContent":"=replace('Hello world', 'world', 'everyone')" engendre Bonjour tout le monde
    • "txtContent":"=replace([$MultiChoiceField], 'Choice 1', 'Choice 2')" renvoie un tableau remplaçant Choice 1 par Choice 2
    • "txtContent":"=replace([$MultiUserField], @me, 'kaylat@contoso.com')" renvoie un tableau remplaçant @me par « kaylat@contoso.com ».
  • padStart : remplit la chaîne active avec une autre chaîne jusqu’à ce que la chaîne résultante atteigne la longueur donnée. Le remplissage est appliqué à partir du début de la chaîne actuelle.

    • "txtContent":"=padStart('DogFood', 10, 'A')" engendre AAADogFood
    • "txtContent":"=padStart('DogFood', 10, 'AB')" engendre ABADogFood
    • "txtContent":"=padStart('DogFood', 5, 'A')" engendre 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. Le remplissage est appliqué à partir de la de la chaîne actuelle.

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

Opérateur conditionnel : l’opérateur conditionnel est :

  • ?:opérations conditionnelle écrites que la syntaxe d’arborescence abstraite utilise? comme opérateur. Ceci permet d’obtenir une expression équivalente à un ? b : c, où si l’expression a est true, le résultat est b, sinon le résultat est c. Pour les expressions de style Excel vous écrivez avec un if déclaration. De même, il existe 3 opérandes. La première est la condition qui doit être évaluée. Le deuxième est le résultat lorsque la condition est vraie. Le troisème est le résultat lorsque la condition est vraie.
    • "txtContent":"=if(4 < 5, 'yes', 'no')" engendre «oui»
    • "txtContent":"=if(4 > 5, 'yes', 'no')" engendre « non »

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.

  • longueur
  • jointure
  • loopIndex

length, lorsque a fourni avec un nom de champ, renvoie le nombre de membres dans un champ multiple. Lorsqu’un champ à valeur unique est fourni, length renverra 1 lorsqu’il existe une valeur dans ce champ.

join Concatène les valeurs d’un champ à plusieurs valeurs avec un séparateur de milliers spécifié. Le premier opérande doit pointer sur une valeur dans un champ à plusieurs valeurs, par exemple, "@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.

loopIndex, lorsque a fourni avec un nom de variable itérateur, retourne l’index actuel (à partir de 0) de l’itérateur. Le nom d’itérateur doit être mentionné en tant que chaîne littérale. loopIndex fonctionne uniquement au sein de l’élément avec respectifs forEach activé ou ses éléments enfants.

Voir ici pour consulter des exemples.

Opérateurs liés aux chaînes : certains des opérateurs précédents peuvent être utilisés avec des valeurs de chaîne.

  • +
  • indexOf (pour la solution de contournement de la longueur de chaîne)

+ peut être utilisé lorsque vous devez concaténer des chaînes, par exemple : "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] + '^', '^'). Nous vous conseillons d’utiliser '^' ou tout autre caractère que nous pourrions utiliser pour rechercher la fin de la chaîne.

Opérandes

Spécifie les paramètres ou opérandes d’une expression. Il s’agit d’un tableau de valeurs de base ou d’objets Expression.

Valeurs de chaînes spéciales

Les valeurs pour txtContent, les styles et les attributs peuvent être des chaînes ou des objets Expression. 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.

« @currentField »

Évaluera sur la valeur du champ actuel.

Certains types de champs sont représentés comme des objets. 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. 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. Voici les types de champs qui sont représentés comme des objets avec une liste de leurs propriétés.

Notes

La valeur @currentField.title renvoie le nom d’une personne par défaut. 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. 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.

Champs de contacts

L’objet de champ de contacts comporte les propriétés suivantes (avec des valeurs d’exemple) :

{
  "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 forme:

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

Champs de date/heure

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. Les méthodes suivantes pour convertir des valeurs de date en des formats spécifiques sont prises en charge :

  • toLocaleString() : affiche un type de date entièrement développé avec la date et l’heure.
  • toLocaleDateString() : affiche un type de date avec la date uniquement.
  • toLocaleTimeString() : affiche un type de date avec l’heure uniquement.

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.

{
  "$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 :

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

Champs d’emplacement

L’objet de champ d’emplacement comporte les propriétés suivantes (avec des valeurs d’exemple) :

{
  "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"
}

L’exemple suivant montre comment un champ d’emplacement peut être utilisé sur un champ actuel.

{
  "$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 recherche

L’objet de champ Liste de choix comporte les propriétés suivantes (avec des valeurs d’exemple) :

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

L’exemple suivant montre comment un champ de recherche peut être utilisé sur un champ actuel.

{
  "$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 hypertexte

L’objet de champ Lien hypertexte comporte les propriétés suivantes (avec des valeurs d’exemple) :

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

Pour référencer la valeur d’URL, utilisez @currentField.

L’exemple suivant montre comment un champ Lien hypertexte peut être utilisé sur un champ actuel.

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

Champs d’images

L’objet de champ d’image comporte les propriétés suivantes (avec des valeurs d’exemple) :

{
  "fileName": "image.png",
  "id": "6bb1d843-0633-4c9a-9a16-90bc5abd1d8e",
  "serverRelativeUrl": "/teams/Discovery/SiteAssets/Lists/ad6ed939-0db2-4d85-8a39-8f3497f41eee/image.png",
  "serverUrl": "https://contoso.sharepoint.com"
}

L’exemple suivant présente comment un champ d’image peut être utilisé sur un champ actuel.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "@currentField.serverRelativeUrl",
    "alt": "@currentField.fileName"
  },
  "style": {
    "width": "100%",
    "max-width": "100%"
  }
}

Champs État de l’approbation

L’objet de champ Statut de l’approbation possède la propriété suivante (avec une valeur d’exemple) :

{
  "displayValue": "Approved",
  "numeric": 0
}

displayValue est une chaîne localisée de l’état d’approbation.

@currentField ou [$__ModerationStatus] masque également en interne la valeur numérique interne suivante :

- 0 : Approved
- 1 : Denied
- 2 : Pending
- 3 : Draft
- 4 : Scheduled

[$_ModerationStatus] prend en charge les comparaisons aux deux chaînes ainsi qu’à la valeur numérique. Les comparaisons numériques fonctionnent selon les paramètres régionaux et les langues, ce qui est recommandé pour ce champ.

Les expressions suivantes évaluent la sortie à droite, pour le moment où l’état est Pending :

// reading field value
"[$_ModerationStatus]" => "Pending"

// obtaining the internal numeric value:
"=Number([$_ModerationStatus])" => 2
"=[$_ModerationStatus.numeric]" => 2

// addition results in string concatenation:
"='status:'+[$_ModerationStatus]" => 'status:Pending'

// numeric comparisons
"=([$_ModerationStatus] == 2)" => true
"=([$_ModerationStatus] != 1)" => true

// other comparators are rarely useful, for cases where you want might want to exclude Draft & Scheduled
"=([$_ModerationStatus] < 3)" => true

// localized string comparison, works only with one locale (en-us here)
"=if([$_ModerationStatus]=='Pending','This Works too!', 'Nope!')" => 'This Works too!'

L’exemple suivant montre comment un champ d’état d’approbation peut être utilisé sur un champ actuel.

{
  "elmType": "div",
  "txtContent": "@currentField.displayValue",
  "style": {
    "color": "=if(@currentField == 2, 'red', '')"
  }
}

« [$FieldName] »

La colonne est formatée dans le contexte de la ligne entière. 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]. Par exemple, pour obtenir la valeur d’un champ avec le nom interne « VentesMars », utilisez [$MarchSales].

Si la valeur d’un champ est un objet, les propriétés de l’objet sont accessibles. Par exemple, pour accéder à la propriété « Title » d’un champ de personne nommé « SalesLead », utilisez « [$SalesLead.title] ».

« [!FieldName] »

Dans la mise en forme des colonnes et des affichages, vous pouvez vous référer aux métadonnées d’un champ en spécifiant le nom interne du champ entouré de crochets et précédés d’un point d’exclamation : [!InternalName].

Le nom complet actuel du champ est disponible dans ces métadonnées et il est accessible à l’aide de la propriété DisplayName : [!SalesLead.DisplayName].

« @currentWeb »

Cela permet d’évaluer l’URL absolue du site. Cela correspond à la valeur webAbsoluteUrl dans le contexte de page. Cette valeur est disponible uniquement dans SharePoint Online.

« @me »

Cela renverra l’adresse e-mail de l’utilisateur actuellement connecté.

Ce champ peut être utilisé pour afficher l’adresse e-mail de l’utilisateur actuel, mais il est plus souvent employé dans des 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 :

{
  "$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 :

{
  "$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 »

Cela évaluera sur la date et l’heure actuelles.

« @rowIndex »

Cette valeur renvoie l’index restitué d’une ligne à l’intérieur d’un affichage. 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. Index commence à 0. Cette valeur est disponible uniquement dans 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 :

{
  "$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 »

Cela renverra un nombre égal à la hauteur de la fenêtre du navigateur (en pixels) lorsque la liste a été affichée.

« @window.innerWidth »

Cela renverra un nombre égal à la largeur de la fenêtre du navigateur (en pixels) lorsque la liste a été affichée.

Miniatures

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 :

  • @thumbnail.small, @thumbnail.medium, et @thumbnail.large renvoient l’URL de la miniature en trois tailles prédéfinies différentes.
  • @thumbnail.<bounding size> renvoie l’URL des miniatures les plus grandes qui ne dépassent pas la taille de liaison en largeur et hauteur. Par exemple, @thumbnail.150 renvoie l’URL d’une miniature qui ne dépasse pas 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. Par exemple, @thumbnail.100x200 renvoie l’URL d’une miniature qui ne dépasse pas 100 pixels de largeur et 200 pixels de hauteur.

Ces jetons ne renvoient aucune valeur sur les éléments qui ne sont pas des fichiers, y compris des dossiers.

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.

Conseil

Les miniatures sont disponibles uniquement pour un certain nombre de formats de fichier pris en charge répertoriés. 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. 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.

{
  "$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 FileLeafRef

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

displayValue

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 colonne

  • Date/Heure
  • Nombre
  • Oui/Non
  • Devise
  • État d’approbation
{
  "elmType": "div",
  "txtContent": "@currentField.displayValue"
}

Il fonctionne également avec nom de champ

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