Partager via

Référence de syntaxe de mise en forme

  • Article

elmType

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

Toute autre valeur entraînera une erreur.

filepreview

Utilisez le spécial elmTypefilepreview avec l’attribut src défini sur @thumbnail.<Size> pour afficher les miniatures des fichiers dans votre bibliothèque de documents.

Si la vignette se charge correctement, une petite icône de type marque est visible en bas à gauche. Si le chargement de la miniature échoue (ou si le type de fichier ne prend pas en charge les miniatures), une icône de type de fichier s’affiche à la place.

"elmType": "filepreview",
"attributes": {
  "src": "@thumbnail.medium"
}

Sécurité img src

Les images des domaines suivants sont autorisées :

  • domaine de locataire, domaines multigéographiques configurés et domaines de vanité (company.sharepoint.com)
  • cdn.office.net, akamaihd.net, CDN static2.sharepointonline.com

La plupart des autres sources d’images externes sont bloquées par défaut dans les formateurs personnalisés. Pour inclure des images externes et autoriser des domaines ou des CDN spécifiques, le domaine doit être ajouté à un paramètre au niveau du site. Pour plus d’informations, voir : Autoriser ou restreindre la possibilité d’incorporer du contenu sur des pages SharePoint

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'

'-webkit-line-clamp'

'object-fit'
'transform' // Only translate(arg) and translate(arg, arg) are currently supported

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

La attributes propriété facultative spécifie d’autres attributs à 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

La children propriété facultative 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

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

foreach

La forEach propriété facultative permet à un élément de se dupliquer pour chaque membre d’un champ à valeurs multiples ou d’un tableau spécifique. La valeur de la "forEach" propriété doit être au format ou "iteratorName in @currentField" ou "iteratorName in [$FieldName]""iteratorName in Expression-Returning-An-Array".

iteratorName représente le nom de la variable d’itérateur utilisée pour représenter le membre actuel du champ à valeurs multiples. Le nom de l’itérateur peut être n’importe quelle combinaison de caractères alphanumériques et d’un trait de soulignement (_) qui ne commence pas par un chiffre.

Le champ utilisé dans la boucle doit être dans un type de champ pris en charge avec des options à valeurs multiples activées : Personne, Recherche et Choix. Une expression retournant un tableau peut également être utilisée.

Dans l’élément avec forEach ou ses éléments enfants, la variable itérateur peut être appelée comme s’il s’agit 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 n’affiche aucun élément s’il n’y a aucune valeur dans le champ.

Pour obtenir des exemples, consultez Mise en forme de champs à valeurs multiples .

customRowAction

Les éléments button peuvent être utilisés pour lancer une action spécifique sur l’élément parent. Chaque button élément a une propriété obligatoire, customRowAction, qui spécifie un action qui est pris lorsque le bouton est sélectionné. 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. L’exemple suivant illustre un bouton qui, lorsqu’il est sélectionné, simule une sélection sur l’élément, ce qui entraîne l’ouverture de l’élément de liste. L’ajout de cet exemple de bouton à une bibliothèque de documents simule une sélection sur le fichier ou le dossier, ce qui entraîne l’ouverture du fichier ou du dossier.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}

  • partager : la sélection du 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"
  }
}

  • supprimer : la sélection du bouton ouvre la boîte de dialogue de confirmation de suppression.

  • editProps : la sélection du bouton ouvre la page des propriétés de l’élément en mode édition.

  • openContextMenu : la sélection du bouton ouvre le menu contextuel par défaut de l’élément.

  • setValue : la sélection de l’élément met à 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 : la sélection du bouton lance le flux spécifié, spécifié par l’ID à l’intérieur de l’attribut actionParams . Pour obtenir un exemple de cela, voir Créer un bouton pour lancer une Flow. L’exemple suivant illustre 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)

  • embed : un clic sur le bouton ouvre une légende avec du contenu incorporé. Le contenu est déterminé par l’URL fournie dans l’attribut src dans actionInput. Vous pouvez également contrôler et heightwidth de la légende à l’aide de actionInput.

    Remarque

    • Le src doit être uniquement la url partie d’un code incorporable généré par une application (généralement trouvé dans l’attribut src de l’élément iframe ).
    • Cette action n’est disponible que dans la version la plus récente de l’application Microsoft Lists.

    Pour plus d’informations sur l’autorisation ou la restriction des domaines, voir Autoriser ou restreindre la possibilité d’incorporer du contenu dans des listes SharePoint à l’aide de formateurs personnalisés.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "embed",
    "actionInput": {
      "src": "https://www.relecloud.com/embed/ll00hWQMJxQ",
      "height": "350",
      "width": "700"
    }
  },
  "txtContent": "Click here to open recipe video 👩‍🍳"
}

    Lorsque vous utilisez l’action embed, l’attribut actionInput peut disposer des options suivantes :

    • src : URL du contenu que vous souhaitez incorporer. (obligatoire)
    • height : hauteur de la légende dans laquelle le contenu incorporé s’affiche. La valeur par défaut est 300. (facultatif)
    • width : largeur de la légende dans laquelle le contenu incorporé s’affiche. La valeur par défaut est 300. (facultatif)

customCardProps

Ajoutez une carte personnalisée à l’élément, qui s’affiche lors du pointage ou click de l’événement. Les personnalisations suivantes sont disponibles :

  • "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.
    • Valeurs valides : click, hover
  • "directionalHint": spécifiez la direction par rapport à la cible dans laquelle la carte personnalisée sera positionnée. Il s’agit de l’emplacement préféré, mais il n’est pas garanti en fonction de l’espace.
    • Valeurs valides : bottomAutoEdge, bottomCenter, bottomLeftEdge, bottomRightEdge, leftBottomEdge, leftTopEdge, rightBottomEdgetopLeftEdgerightCenterrightTopEdgetopAutoEdgetopCenterleftCentertopRightEdge
  • "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 profil pour les champs contacts ou la carte de pointage de fichier pour les fichiers de 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 niveaux 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]"
}

filePreviewProps

est filePreviewProps une propriété facultative qui permet de remplacer les styles par défaut de l’icône de type de fichier et de l’icône de type de marque dans filepreview.elmType.

Les fileTypeIconClass et brandTypeIconClass peuvent être utilisés pour fournir des noms de classe CSS aux éléments icône de type de fichier et icône de type de marque, respectivement.

Et fileTypeIconStylebrandTypeIconStyle peuvent être utilisés pour fournir des styles à l’icône de type de fichier et à l’icône de type de marque, respectivement. Ces styles sont prioritaires sur les mêmes styles provenant des classes CSS fournies par les deux propriétés ci-dessus.

"elmType": "filepreview",
"attributes": {
  "src": "@thumbnail.medium",
 },
"filePreviewProps": {
  "fileTypeIconClass": "sp-css-borderColor-neutralLight",
  "fileTypeIconStyle": {
    "width": "100px"
  },
  "brandTypeIconClass": "sp-css-borderColor-neutralLight",
  "brandTypeIconStyle": {
    "width": "68px"
  }
}

Expressions

Les valeurs pour txtContent, les propriétés de style et les propriétés d’attribut peuvent être exprimées sous forme d’expressions afin qu’elles soient évaluées au moment de l’exécution en fonction du contexte du champ (ou de la ligne) actif. 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 et SharePoint Server Édition d’abonnement à partir de la mise à jour des fonctionnalités 22H2 ou à l’aide d’expressions d’arborescence de syntaxe abstraite dans SharePoint Online, SharePoint Server Édition d’abonnement et SharePoint Server 2019.

Tous les champs dans ViewFields peuvent être référencés dans des expressions, même s’ils sont marqués Explicit.

Expressions de style Excel

Toutes les expressions de style Excel commencent par un signe égal (=). Ce style d’expression est disponible uniquement dans SharePoint Online et SharePoint Server Édition d’abonnement à partir de la mise à jour des fonctionnalités 22H2. Ce style d’expression n’est pas disponible dans SharePoint Server 2019 ou SharePoint Server Édition d’abonnement avant la mise à jour des fonctionnalités 22H2.

Cette expression conditionnelle simple prend la none valeur si @me n’est pas égal à [$Author.email], et prend la valeur dans le '' cas contraire :

=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 prennent un 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 exécute l’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érateurs

Les opérateurs spécifient le type d’opération à effectuer. Les valeurs d’opérateur valides sont les suivantes :

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

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

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

Opérateurs unaires : les opérateurs unaires standard qui n’attendent qu’un seul opérande sont les suivants :

  • toString(): retourne une chaîne représentant l’objet
    • "txtContent": "=toString(45)"engendre "45"
  • Number(): retourne la valeur numérique, si l’opérande n’est pas un nombre, NaN est retourné
    • "txtContent": "=Number('365')"engendre "365"
    • "txtContent": "=Number('Wowee')" engendre NaN
    • "txtContent": "=Number(Date('12/26/1981'))"engendre 378190800000
  • Date(): retourne un objet datetime à partir du paramètre (convertit des chaînes ou des nombres en dates, sensibles aux paramètres régionaux)
    • "txtContent": "=Date('12/26/1981')" engendre 26/12/1981, 12:00:00 AM
  • cos: retourne le cosinus de l’angle spécifié qui doit être spécifié dans les radians
    • "txtContent": "=cos(5)"engendre 0.28366218546322625
  • sin: retourne le sinus d’un nombre
    • "txtContent": "=sin(90)"engendre 0.8939966636005579
  • toDateString(): retourne une date dans un format court-convivial
    • "txtContent": "=toDateString(@now)" le résultat ne varie pas en fonction des paramètres régionaux de l’utilisateur et ressemblera à « Wed Aug 03 2022 »
  • toLocaleString(): retourne une représentation sensible à la langue 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»
  • toLocaleDateString(): retourne une représentation sensible au langage de la partie date d’une 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»
  • toLocaleTimeString(): retourne une représentation sensible à la langue de la partie heure d’une 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: retourne la valeur convertie en minuscules (fonctionne uniquement sur les chaînes) - Disponible uniquement dans SharePoint Online
    • "txtContent":"=toLowerCase('DogFood')" engendre « dogfood »
  • abs: retourne la valeur absolue d’un nombre donné - Disponible uniquement dans SharePoint Online
    • "txtContent":"=abs(-45)" engendre 45
  • length: retourne le nombre d’éléments d’un tableau (champ personne ou choix à sélection multiple), pour tous les autres types de valeurs, il retourne 1 quand il est vrai et 0 si 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). - Disponible uniquement dans SharePoint Online
    • "txtContent":"=length(@currentField)" peut entraîner 2 si deux valeurs sont sélectionnées
    • "txtContent":"=length('Some Text')"engendre 1
    • "txtContent":"=length('')"engendre 0
    • "txtContent":"=length(45)"engendre 1
    • "txtContent":"=length(0)"engendre 0
  • floor: retourne le plus grand entier inférieur ou égal à un nombre donné. - Disponible uniquement dans SharePoint Online
    • "txtContent":"=floor(45.5)" produit 45
  • ceiling: arrondit le nombre donné au plus grand nombre entier ou entier suivant. - Disponible uniquement dans SharePoint Online
    • "txtContent":"=ceiling(45.5)" produit 46
  • getDate: retourne le jour du mois de la date donnée. - Disponible uniquement dans SharePoint Online
    • "txtContent":"=getDate(Date('12/26/1981'))" produit 26
  • getMonth: retourne le mois de la date spécifiée en fonction de l’heure locale, sous la forme d’une valeur de base zéro (où zéro indique le premier mois de l’année). - Disponible uniquement dans SharePoint Online
    • "txtContent":"=getMonth(Date('12/26/1981'))" produit 11
  • getYear: retourne l’année de la date donnée. - Disponible uniquement dans SharePoint Online
    • "txtContent":"=getYear(Date('12/26/1981'))" produit 1981
  • toUpperCase: retourne la valeur convertie en majuscules (fonctionne uniquement sur les chaînes) - Disponible uniquement dans SharePoint Online
    • "txtContent":"=toUpperCase('DogFood')" engendre « DOGFOOD »

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

  • indexOf: prend deux 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 n’est pas trouvé 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
  • join: prend deux 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 « Megan Bowen|Alex Wilber » (selon les personnes sélectionnées)
  • pow: retourne 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 et une taille par défaut donnés
    • "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: retourne un tableau avec l’entrée donnée ajoutée au tableau donné
    • "txtContent": "=appendTo(@currentField, 'Choice 4')" retourne un tableau avec « Choice 4 » ajouté au @currentField tableau
    • "txtContent": "=appendTo(@currentField, 'kaylat@contoso.com')" retourne un tableau avec «kaylat@contoso.com » ajouté au @currentField tableau
  • removeFrom: retourne un tableau avec l’entrée donnée supprimée du tableau donné, le cas échéant
    • "txtContent": "=removeFrom(@currentField, 'Choice 4')" retourne un tableau avec « Choice 4 » supprimé du @currentField tableau
    • "txtContent": "=removeFrom(@currentField, 'kaylat@contoso.com')" retourne un tableau avec «kaylat@contoso.com » supprimé du @currentField tableau
  • split: divise la chaîne donnée en une liste ordonnée de sous-chaînes en recherchant le modèle donné et retourne un tableau de ces sous-chaînes
    • "txtContent": "=split('Hello World', ' ')" retourne un tableau avec deux chaînes : « Hello » et « World »
  • addDays: retourne un objet datetime avec des jours ajoutés (ou déduits) de la valeur datetime 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: retourne un objet datetime avec des minutes ajoutées (ou déduites) de la valeur datetime 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: retourne la partie de la chaîne entre les index de début et de fin. - Disponible uniquement dans 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 valeur spécifiée dans une chaîne (ou un tableau) et retourne une nouvelle chaîne (ou tableau) où la valeur spécifiée est remplacée. Pour les chaînes, seule la première instance de la valeur est 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')" retourne un tableau en remplaçant par @me «kaylat@contoso.com »

  • replaceAll: recherche une valeur spécifiée dans une chaîne et retourne une nouvelle chaîne (ou tableau) où la valeur spécifiée est remplacée. Pour les chaînes, toutes les instances de la valeur seront remplacées.

    • "txtContent":"=replaceAll('H-e-l-l-o W-o-r-l-d', '-', '')" résultats dans Hello World

  • padStart: remplace la chaîne actuelle par 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: remplissage de la chaîne actuelle 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

  • getThumbnailImage: retourne une URL pointant vers l’image pour un champ d’image donné et la taille préférée.

    • "src":"=getThumbnailImage([$ImageField], 400, 200)" entraîne une URL pointant vers l'image pour un champ d'image donné avec une largeur de 400 et une hauteur de 200.

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

  • ?:opérations conditionnelle écrites que la syntaxe d’arborescence abstraite utilise? comme opérateur. Il s’agit d’obtenir une expression équivalente à a ? b : c, où si l’expression a prend la valeur 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. Quoi qu’il en soit, il y a trois 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.

  • length
  • join
  • 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 retourne 1 lorsqu’il y a 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 pointe vers une valeur dans un champ à valeurs multiples, 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.

Pour obtenir des exemples, consultez Mise en forme de champs à valeurs multiples.

Opérateurs liés à la chaîne : certains des opérateurs précédemment détaillés peuvent être utilisés lors de l’utilisation de valeurs de chaîne :

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

+ peut être utilisé lorsqu’il est nécessaire de 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 valeur de chaîne (il retourne 1 ou 0), indexOf peut nous servir de solution de contournement intéressante pour obtenir la longueur d’une chaîne, par exemple : indexOf([$column1] + '^', '^'). Nous utiliserons '^' ou tout autre caractère à utiliser pour déterminer 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.

Remarque

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 image a la propriété suivante fileName :

{
  "fileName": "image.png",
}

Remarque

Depuis juillet 2024, seule la fileName propriété a une valeur.

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": "=getThumbnailImage(@currentField, 400, 300)",
    "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 : Approuvé
  • 1 : Refusé
  • 2 : En attente
  • 3 : Brouillon
  • 4 : Planifié

[$_ModerationStatus] le champ prend en charge les comparaisons avec les chaînes et 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 actif :

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

Remarque

La référence à d’autres champs fonctionne uniquement s’ils sont inclus dans la même vue.

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 vues, vous pouvez faire référence aux métadonnées d’un champ en spécifiant le nom interne du champ entouré de crochets et précédé 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. Voici un exemple de définition de la couleur d’un champ de personne sur rouge lorsqu’il est égal à l’utilisateur connecté actuel et bleu dans le cas contraire :

{
  "$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, il existe une série de jetons qui peuvent être utilisés pour récupérer l’URL de la miniature d’un fichier, notamment :

  • @thumbnail.small, @thumbnail.mediumet @thumbnail.large correspondent à l’URL de miniature dans trois tailles prédéfinies différentes.
  • @thumbnail.<bounding size> correspond à l’URL des plus grandes miniatures qui ne sont pas supérieures à la taille englobante en largeur et en 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> correspond à l’URL de la plus grande miniature qui n’est pas supérieure à la largeur englobante et à la hauteur englobante. 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.

Remarque

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 seulsrc attribut d’une img balise, nous en prenons soin et masquons l’image 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 displayValue la propriété 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"
}

Cela fonctionne également avec le nom du champ :

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

« @isSelected »

Cette valeur est évaluée à true pour le ou les éléments sélectionnés dans une vue et false dans le cas contraire.

« @lcid »

Cela correspond au LCID de la culture actuelle. Cela peut être utilisé pour mettre en forme la date, l’heure et les nombres.

« @UIlcid »

Cela correspond au LCID de la culture d’interface utilisateur actuelle. Cela peut être utilisé pour afficher des chaînes d’affichage localisées.