Référence de syntaxe de mise en forme
elmType
Spécifie le type d’élément à créer. Les éléments valides comprennent :
div
span
a
img
svg
path
button
p
filepreview
Toute autre valeur entraînera une erreur.
filepreview
Utilisez le spécial elmType
filepreview
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
, CDNstatic2.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’attributactionParams
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
dansactionInput
. Vous pouvez également contrôler etheight
width
de la légende à l’aide deactionInput
.Remarque
- Le
src
doit être uniquement laurl
partie d’un code incorporable généré par une application (généralement trouvé dans l’attributsrc
de l’élémentiframe
). - Cette action est disponible uniquement dans la version la plus récente de l’application Listes Microsoft.
Pour plus d’informations sur l’autorisation ou la restriction des domaines, voir Autoriser ou restreindre la possibilité d’incorporer du contenu dans SharePoint Listes à 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’attributactionInput
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)
- Le
customCardProps
Ajoutez un carte personnalisé à 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
- Valeurs valides :
-
"directionalHint"
: spécifiez la direction par rapport à la cible dans laquelle le carte personnalisé sera positionné. 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
,rightBottomEdge
topLeftEdge
rightCenter
rightTopEdge
topAutoEdge
topCenter
leftCenter
topRightEdge
- Valeurs valides :
-
"isBeakVisible"
- Indiquez si le bec doit être montré ou non. -
"beakStyle"
: spécifie l’objet de style pour le bec du carte personnalisé.
defaultHoverField
Ajoute le profil carte 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.
Les références pour les modèles de formateur de colonne à choix multiples et les formateurs de colonne non basés sur des modèles ne sont pas prises 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 fileTypeIconStyle
brandTypeIconStyle
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 à compter 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 ressemble à « 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 en-us ressemble à « 5/02/2019, 1:22:24 PM »
-
-
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 en-us ressemble à « 5/02/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 en-us ressemble à « 1:22:24 PM »
-
-
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 contournementindexOf
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 entre les index 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 une image pour un champ d’image donné et la taille préférée.-
"src":"=getThumbnailImage([$ImageField], 400, 200)"
aboutit à une URL pointant vers une 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’expressiona
prend la valeur true, le résultat estb
, sinon le résultat estc
. Pour les expressions de style Excel, vous les écrivez avec uneif
instruction . 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 aux champs à valeurs multiples : les opérateurs suivants sont utilisés uniquement dans un contexte avec des champs à valeurs multiples de type Person, Lookup ou Choice.
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
, lorsqu’il est fourni avec le nom de la variable d’itérateur, retourne l’index actuel (à partir de 0) de l’itérateur. Le nom de l’itérateur doit être fourni en tant que littéral de chaîne.
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 aux chaînes : 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, pour instance :
"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, pour instance : 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 »
Évalue 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 du status d’approbation.
@currentField
ou [$__ModerationStatus]
mappe é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 entre 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’approbation status 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]
.
Actuellement, le nom d’affichage du champ est disponible dans ces métadonnées et est accessible à l’aide DisplayName
de la propriété : [!SalesLead.DisplayName]
.
« @currentWeb »
Cette opération évalue l’URL absolue du site. Cela correspond à la valeur webAbsoluteUrl
dans le contexte de page. Cette valeur est disponible uniquement dans SharePoint Online.
« @me »
Cette opération évalue 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 actuellement connecté 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 »
Cette opération évalue la date et l’heure actuelles.
« @rowIndex »
Cela permet d’évaluer l’index rendu d’une ligne dans une vue. 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 »
Cette valeur est évaluée à un nombre égal à la hauteur de la fenêtre du navigateur (en pixels) lorsque la liste est 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.medium
et@thumbnail.large
évaluent l’URL de miniature dans trois tailles prédéfinies. -
@thumbnail.<bounding size>
évalue l’URL à la plus grande miniature qui n’est pas supérieure à 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>
évalue l’URL à 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, la modification des tailles englobantes n’affecte pas 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 correspond à 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.