書式構文リファレンス

[アーティクル]
04/05/2024

elmType

作成する要素の種類を指定します。有効な要素は次のとおりです。

div
span
a
img
svg
path
button
p
filepreview

その他の値を指定すると、エラーが発生します。

filepreview

ドキュメントライブラリ内のファイルのサムネイルを表示するには、src属性を @thumbnail.<Size> に設定した特殊なelmTypefilepreviewを使用します。

サムネイルが正常に読み込まれると、左下に小さなブランドの種類のアイコンが表示されます。サムネイルの読み込みに失敗した場合 (またはファイルの種類がサムネイルをサポートしていない場合)、代わりにファイルの種類のアイコンが表示されます。

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

img src security

次のドメインのイメージが許可されます。

テナントドメイン、構成済みのマルチ geo ドメイン、バニティドメイン (company.sharepoint.com)
cdn.office.net、 akamaihd.net、 static2.sharepointonline.com CDN

その他のほとんどの外部イメージソースは、カスタムフォーマッタでは既定でブロックされます。外部イメージを含め、特定のドメインまたは CDN を許可するには、ドメインをサイトレベルの設定に追加する必要があります。詳細については、「SharePoint ページにコンテンツを埋め込む機能を許可または制限する」を参照してください。

txtContent

elmType で指定した要素のテキストコンテンツを任意に指定するプロパティ。このプロパティの値には、文字列 (特殊な文字列を含む) または式オブジェクトを指定できます。

style

elmType で指定した要素に適用するスタイル属性を任意に指定するプロパティ。これは、CSS の名前と値に対応する名前と値のペアを持つオブジェクトです。スタイルオブジェクトの各属性の値には文字列 (特殊な文字列を含む) または式オブジェクトを指定できます。次のスタイル属性を使用できます。

'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

次の例は、スタイルオブジェクトの値を示します。この例では、2 つのスタイルのプロパティ (paddingとbackground-color) が適用されます。 padding の値は、ハードコーディングされた文字列値です。 background-color の値は、現在のフィールド (@currentField で指定) の値が 40 未満かどうかに応じて赤 (#ff0000) または緑 (#00ff00) のいずれかに評価される式です。詳細については、「 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"
      ]
    }
  }
}

これは上記と同じサンプルで、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省略可能なプロパティは、elmTypeで指定された要素に追加する属性をさらに指定します。これは、名前と値のペアを持つオブジェクトです。この属性の名前は、次のいずれかである必要があります。

href
rel
src
class
target
title
role
iconName
d
aria
データ傍受
viewBox
preserveAspectRatio
draggable

その他の属性を指定すると、エラーが発生します。属性の値は式オブジェクトまたは文字列とすることができます。次の例では、2 つの属性 (targetとhref) を elmType により指定された要素に追加します。 target 属性は、文字列にハードコードされています。 href 属性は、実行時に http://finance.yahoo.com/quote/ + 現在のフィールド値 (@currentField) に評価される式です。

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

children

children 省略可能なプロパティは、elmTypeで指定された要素の子要素を指定します。この値は elm オブジェクトの配列として指定します。任意のレベルの入れ子にすることができます。要素に txtContent プロパティがある場合、子のプロパティは無視されます。

debugMode

debugMode 省略可能なプロパティは、デバッグ用です。エラーメッセージを出力し、コンソールに警告を記録します。

forEach

forEach省略可能なプロパティを使用すると、要素は、特定の複数値フィールドまたは配列の各メンバーに対してそれ自体を複製できます。 "forEach" プロパティの値は、"iteratorName in @currentField"または"iteratorName in [$FieldName]"または"iteratorName in Expression-Returning-An-Array"のいずれかの形式にする必要があります。

iteratorName は、複数値フィールドの現在のメンバーを表すために使用される反復子変数の名前を表します。反復子の名前は、英数字と数字で始まらないアンダースコア (_) の任意の組み合わせにすることができます。

ループで使用されるフィールドは、複数値オプションが有効になっているサポートされているフィールド型である必要があります。Person、Lookup、Choice。配列を返す式も使用できます。

forEachまたはその子要素を持つ要素では、反復子変数を新しいフィールドであるかのように呼び出すことができます。反復子のインデックスは、loopIndex 演算子でアクセスできます。

forEach ルート要素に適用することはできません。フィールドに値がない場合、要素はレンダリングされません。

例については、「複数値フィールドの書式設定」を参照してください。

customRowAction

button 要素を使用すると、親アイテムで特定のアクションを起動することができます。すべてのbutton要素には、ボタンが選択されたときに取得されるactionを指定する必要なプロパティcustomRowActionがあります。このアクションは、次のいずれかの値である必要があります。

defaultClick: このアクションのボタンは、カスタマイズされていないビューでリストアイテムをクリックした場合と同じ操作を実行します。次の例では、選択した場合に項目の選択をシミュレートするボタンを示します。これにより、リストアイテムが開きます。このサンプルボタンをドキュメントライブラリに追加すると、ファイルまたはフォルダーの選択がシミュレートされ、ファイルまたはフォルダーが開かれます。
```
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}
```

共有: ボタンを選択すると、共有ダイアログが開きます。この種類のボタンの例を次に示します。

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

delete: ボタンを選択すると、削除の確認ダイアログが開きます。
editProps: ボタンを選択すると、アイテムのプロパティページが編集モードで開きます。
openContextMenu: ボタンを選択すると、項目の既定のコンテキストメニューが開きます。

setValue: 要素を選択すると、指定されたフィールド値で項目が更新されます。

{
  "elmType": "div",
  "txtContent": "[$FieldName]",
  "customRowAction":{
    "action": "setValue",
    "actionInput": {
      "FieldInternalName_1": "FieldValue_1",
      "FieldInternalName_2": "FieldValue_2",
    }
  }
}

executeFlow: ボタンを選択すると、 actionParams 属性内の ID で指定された指定された Flow が起動します。この例については、「フローを起動するためのボタンを作成する」を参照してください。次の例では、この種類のボタンを示します。
```
{
  "$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\"}"
  }
}
```
executeFlow 操作を使用する場合、actionParams 属性には次のオプションがあります。
- id: フローの ID での起動(必須)
- headerText: フローパネルの上部でテキストを設定する (省略可能)
- runFlowButtonText: フローパネルにプライマリボタンのテキストを設定する (省略可能)
埋め込み: ボタンをクリックすると、コンテンツが埋め込まれた吹き出しが開きます。コンテンツは、actionInputの src 属性で指定された URL によって決定されます。また、actionInputを使用して吹き出しのheightとwidthを制御することもできます。
注:
- srcは、アプリによって生成された埋め込み可能なコードのurl部分である必要があります (通常、iframe要素のsrc属性にあります)。
- このアクションは、Microsoft Lists アプリの新しいバージョンでのみ使用できます。
ドメインの許可または制限の詳細については、「カスタムフォーマッタを使用して SharePoint リストにコンテンツを埋め込む機能を許可または制限する」を参照してください。
```
{
  "$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 👩‍🍳"
}
```
embed 操作を使用する場合、actionInput 属性には次のオプションがあります。
- src: 埋め込むコンテンツの URL。 (必須)
- height: 埋め込みコンテンツがレンダリングされる吹き出しの高さ。既定値は 300 です。 (省略可能)
- width: 埋め込みコンテンツがレンダリングされる吹き出しの幅。既定値は 300 です。 (省略可能)

customCardProps

ホバーまたは click イベントに表示されるカスタムカードを要素に追加します。次のカスタマイズが可能です。

"formatter": カスタムカードの書式設定を定義する JSON オブジェクト。
"openOnEvent": customCard を開く必要があるイベント。
- 有効な値: click、 hover
"directionalHint": カスタムカードを配置するターゲットを基準とした方向を指定します。これは推奨される場所ですが、スペースによっては保証されません。
- 有効な値: bottomAutoEdge、 bottomCenter、 bottomLeftEdge、 bottomRightEdge、 leftBottomEdge、 leftCenter、 leftTopEdge、 rightBottomEdge、 rightCenter、 rightTopEdge、 topAutoEdge、 topCenter、 topLeftEdge、 topRightEdge
"isBeakVisible": 突起を表示するか表示しないか指定します。
"beakStyle": カスタムカードの突起のスタイルオブジェクトを指定します。

defaultHoverField

ドキュメントライブラリ内のファイルのユーザーフィールドまたはファイルホバーカードのプロファイルカードを追加します。

"defaultHoverField": "[$Editor]" はエディターフィールドのプロファイルカードを追加します
"defaultHoverField": "[$FileLeafRef]" は documentLibrary にファイルホバーカードを追加します

列フォーマッタ参照

これは参照された列のフォーマッタ JSON に置き換えられます。複数レベルの参照はサポートされていません。

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

inlineEditField

参照される列のフィールドエディターを追加します。

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

filePreviewProps

filePreviewPropsは省略可能なプロパティで、filepreview.elmType の既定のスタイルのファイルの種類アイコンとブランドの種類のアイコンをオーバーライドできます。

fileTypeIconClassとbrandTypeIconClassを使用して、ファイルの種類のアイコンとブランドの種類のアイコン要素にそれぞれ CSS クラス名を指定できます。

fileTypeIconStyleとbrandTypeIconStyleを使用して、ファイルの種類のアイコンとブランドの種類のアイコンにそれぞれスタイルを指定できます。これらのスタイルは、上記の 2 つのプロパティによって提供される CSS クラスと同じスタイルよりも優先されます。

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

式

txtContent、スタイルプロパティ、および属性プロパティの値は、現在のフィールド (または行) のコンテキストに基づいて実行時に評価されるように、式として表すことができます。式オブジェクトは、別の式オブジェクトを入れ子にできます。

式は、22H2 機能更新プログラム以降の SharePoint Online および SharePoint Server Subscription Edition の Excel スタイルの式を使用するか、SharePoint Online、SharePoint Server Subscription Edition、および SharePoint Server 2019 で抽象構文ツリー式を使用して記述できます。

ViewFieldsのすべてのフィールドは、Explicitマークされている場合でも、式で参照できます。

Excel 形式の式

Excel 形式の式はすべて等号 (=) で始まります。このスタイルの式は、22H2 機能更新プログラム以降の SharePoint Online および SharePoint Server サブスクリプションエディションでのみ使用できます。この式のスタイルは、22H2 機能更新プログラムの前に SharePoint Server 2019 または SharePoint Server サブスクリプションエディションでは使用できません。

この単純な条件式は、@meが[$Author.email]と等しくない場合はnoneに評価され、それ以外の場合は''に評価されます。

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

次のように、より複雑な if/else ステートメントを記述できます。

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

1 つまたは 2 つのオペランドを受け取る非条件付き演算子は、次のように記述できます。

=[$foo] * -7

=sin(@currentField)

=toString(60 + (sin(6.2831853 * @currentField) * 60))

抽象構文ツリーの式

次の例には、式を実行する 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
              ]
            }
          ]
        },
        "%"
      ]
    }
  ]
}

演算子

演算子は、実行する演算の種類を指定します。有効な演算子の値は次のとおりです。

+
-
/
*
<
>
%
==
!=
<=
>=
||
&&
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

二項算術演算子 - 2 つのオペランドが必要な標準の算術二項演算子は次のとおりです。

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

単項演算子 - オペランドが 1 つだけ必要な標準単項演算子は次のとおりです。

toString(): オブジェクトを表す文字列を返します。
- "txtContent": "=toString(45)" の結果は "45" になります
Number(): 数値を返します。オペランドが数値でない場合は、NaN が返されます。
- "txtContent": "=Number('365')" の結果は 365 になります
- "txtContent": "=Number('Wowee')" の結果は NaN になります
- "txtContent": "=Number(Date('12/26/1981'))" の結果は 378190800000 になります
Date(): パラメーターから datetime オブジェクトを返します (文字列または数値を日付に変換し、ロケールに依存します)
- "txtContent": "=Date('12/26/1981')" の結果は 12/26/1981, 12:00:00 AM になります
cos: ラジアンで指定する必要がある指定した角度の余弦を返します。
- "txtContent": "=cos(5)" の結果は 0.28366218546322625 になります
sin: 数値のサインを返します。
- "txtContent": "=sin(90)" の結果は 0.8939966636005579 になります
toDateString(): 短い形式で日付を返します。
- "txtContent": "=toDateString(@now)"結果はユーザーのロケールによって変わらず、"Wed Aug 03 2022" のようになります。
toLocaleString(): 日付の言語に依存する表現を返します
- "txtContent":"=toLocaleString(@now)" の結果はユーザーのロケールに応じて異なりますが、en-us の場合は "2/5/2019, 1:22:24 PM" のようになります
toLocaleDateString(): 日付の日付部分のみを言語に依存した表現を返します。
- "txtContent":"=toLocaleDateString(@now)" の結果はユーザーのロケール応じて異なりますが、en-us の場合は "2/5/2019" のようになります
toLocaleTimeString(): 日付の時刻部分だけを言語に依存した表現を返します
- "txtContent":"=toLocaleTimeString(@now)" の結果はユーザーのロケールに応じて異なりますが、en-us の場合は "1:22:24 PM" のようになります
toLowerCase: 小文字に変換された値を返します (文字列でのみ機能します) - SharePoint Online でのみ使用できます
- "txtContent":"=toLowerCase('DogFood')" の結果は "dogfood" になります
abs: 指定した数値の絶対値を返します - SharePoint Online でのみ使用できます
- "txtContent":"=abs(-45)" の結果は 45 になります
length: 配列内の項目の数 (複数選択のユーザーまたは選択フィールド) を返します。その他のすべての値型では、true の場合は 1、false の場合は 0 を返します。これは、文字列値の長さは指定しません (このような操作については、後述する indexOf 回避策を参照してください)。 - SharePoint Online でのみ使用可能
- "txtContent":"=length(@currentField)" 選択した値が 2 つある場合、 2 になる可能性があります
- "txtContent":"=length('Some Text')" の結果は 1 になります
- "txtContent":"=length('')" の結果は 0 になります
- "txtContent":"=length(45)" の結果は 1 になります
- "txtContent":"=length(0)" の結果は 0 になります
floor: 指定した数値以下の最大整数を返します。 - SharePoint Online でのみ使用可能
- "txtContent":"=floor(45.5)"の結果は 45 になります
ceiling: 指定した数値を次に大きい整数または整数に切り上げます。 - SharePoint Online でのみ使用可能
- "txtContent":"=ceiling(45.5)"の結果は 46 になります
getDate: 指定した日付の月の日を返します。 - SharePoint Online でのみ使用可能
- "txtContent":"=getDate(Date('12/26/1981'))"の結果は 26 になります
getMonth: 0 から始まる値 (0 は年の最初の月を示します) として、指定した日付の月を現地時刻に従って返します。 - SharePoint Online でのみ使用可能
- "txtContent":"=getMonth(Date('12/26/1981'))"の結果は 11 になります
getYear: 指定した日付の年を返します。 - SharePoint Online でのみ使用可能
- "txtContent":"=getYear(Date('12/26/1981'))"の結果は 1981 になります
toUpperCase: 大文字に変換された値を返します (文字列でのみ機能します) - SharePoint Online でのみ使用できます
- "txtContent":"=toUpperCase('DogFood')" の結果は "DOGFOOD" になります

二項演算子 - 2 つのオペランドを必要とする演算子を次に示します。

indexOf: 2 つのオペランドを受け取ります。最初のテキスト (または配列) が検索範囲になり、2 番目のテキストが検索対象になります。文字列内で検索語句 (または配列) が最初に出現した位置のインデックス値を返します。インデックスは 0 から始まります。検索用語がテキスト (または配列) 内に見つからない場合は、-1 が返されます。この演算子では大文字と小文字が区別されます。 - SharePoint Online でのみ使用可能
- "txtContent": "=indexOf('DogFood', 'Dog')" の結果は 0 になります
- "txtContent": "=indexOf('DogFood', 'F')" の結果は 3 になります
- "txtContent": "=indexOf('DogFood', 'Cat')" の結果は -1 になります
- "txtContent": "=indexOf('DogFood', 'f')" の結果は -1 になります
join: 2 つのオペランドを受け取ります。最初のものは配列 (複数選択の個人フィールドまたは選択肢フィールド) であり、2 番目のものは区切り文字列です。区切り文字列で区切られた配列値による文字列の連結を返します。 - SharePoint Online でのみ使用可能
- "txtContent": "=join(@currentField, ', ')" の結果は "Apple, Orange, Cherry" になります (選択した値に応じて異なります)
- "txtContent": "=join(@currentField.title, '|')" " Megan Bowen|Alex Wilber" (選択したユーザーに応じて)
pow: 底を指数の累乗に返します。 - SharePoint Online でのみ使用可能
- "txtContent":"=pow(2,3)" の結果は 8 になります
lastIndexOf: 文字列 (または配列) 内の指定された値の最後の出現位置を返します。
- "txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" の結果は 8 になります
- "txtContent": "=lastIndexOf('DogFood DogFood', 'F')" の結果は 11 になります
- "txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')" の結果は -1 になります
- "txtContent": "=lastIndexOf('DogFood DogFood', 'f')" の結果は -1 になります
startsWith: 文字列が指定した文字列の文字で始まるかどうかを判断します
- "txtContent":"=startsWith('DogFood', 'Dog')" の結果は true になります
- "txtContent":"=startsWith('DogFood', 'Food')" の結果は false になります
endsWith: 文字列が指定した文字列の文字で終わるかどうかを判断します
- "txtContent":"=endsWith('DogFood', 'Dog')" の結果は false になります
- "txtContent":"=endsWith('DogFood', 'Food')" の結果は true になります
getUserImage: 指定された電子メールと優先サイズのユーザーのプロファイル画像を指す URL を返します
- "src":"=getUserImage('kaylat@contoso.com', 'small')" 小さな解像度でユーザーのプロフィール画像を指す URL を返します
- "src":"=getUserImage('kaylat@contoso.com', 's')" 小さな解像度でユーザーのプロフィール画像を指す URL を返します
- "src":"=getUserImage('kaylat@contoso.com', 'medium')" 中程度の解像度でユーザーのプロフィール画像を指す URL を返します
- "src":"=getUserImage('kaylat@contoso.com', 'm')" 中程度の解像度でユーザーのプロフィール画像を指す URL を返します
- "src":"=getUserImage('kaylat@contoso.com', 'large')" 大きな解像度でユーザーのプロファイル画像を指す URL を返します
- "src":"=getUserImage('kaylat@contoso.com', 'l')" 大きな解像度でユーザーのプロファイル画像を指す URL を返します
appendTo: 指定された配列に指定されたエントリが追加された配列を返します。
- "txtContent": "=appendTo(@currentField, 'Choice 4')" は、 @currentField 配列に 'Choice 4' が追加された配列を返します
- "txtContent": "=appendTo(@currentField, 'kaylat@contoso.com')" @currentField配列に 'kaylat@contoso.com' が追加された配列を返します
removeFrom: 指定された配列から特定のエントリが削除された配列を返します (存在する場合)。
- "txtContent": "=removeFrom(@currentField, 'Choice 4')" @currentField配列から 'Choice 4' が削除された配列を返します
- "txtContent": "=removeFrom(@currentField, 'kaylat@contoso.com')" @currentField配列から 'kaylat@contoso.com' が削除された配列を返します
split: 指定されたパターンを検索して、指定された文字列を部分文字列の順序付きリストに分割し、これらの部分文字列の配列を返します。
- "txtContent": "=split('Hello World', ' ')" 'Hello' と 'World' の 2 つの文字列を持つ配列を返します
addDays: 指定された datetime 値から日が追加 (または差し引かれる) datetime オブジェクトを返します。
- "txtContent": "=addDays(Date('11/14/2021'), 3)" は 11/17/2021、12:00:00 AM を返します
- "txtContent": "=addDays(Date('11/14/2021'), -1)" は 11/13/2021、12:00:00 AM を返します
addMinutes: 指定された datetime 値から分を追加 (または差し引いた) datetime オブジェクトを返します。
- "txtContent": "=addMinutes(Date('11/14/2021'), 3)" は 11/14/2021、12:03:00 AM を返します
- "txtContent": "=addMinutes(Date('11/14/2021'), -1)" は 11/13/2021、11:59:00 AM を返します

三項演算子 - 3 つのオペランドを必要とする演算子を次に示します。

substring: 開始インデックスと終了インデックスの間の文字列の一部を返します。 - SharePoint Online でのみ使用可能
- "txtContent":"=substring('DogFood', 3, 4)" の結果は F になります
- "txtContent":"=substring('DogFood', 4, 3)" の結果は F になります
- "txtContent":"=substring('DogFood', 3, 6)" の結果は Foo になります
- "txtContent":"=substring('DogFood', 6, 3)" の結果は Foo になります
substring() メソッドは、開始インデックスと終了インデックスの間に位置する文字列の一部または文字列の末尾までを返します。
replace: 文字列 (または配列) で指定した値を検索し、指定した値が置き換えられる新しい文字列 (または配列) を返します。文字列の場合、値の最初のインスタンスのみが置き換えられます。
- "txtContent":"=replace('Hello world', 'world', 'everyone')" の結果は Hello everyone になります
- "txtContent":"=replace([$MultiChoiceField], 'Choice 1', 'Choice 2')" は、選択肢 1 を選択肢 2 に置き換える配列を返します。
- "txtContent":"=replace([$MultiUserField], @me, 'kaylat@contoso.com')" @meを 'kaylat@contoso.com' に置き換える配列を返します
replaceAll: 指定した値の文字列を検索し、指定した値が置き換えられる新しい文字列 (または配列) を返します。文字列の場合、値のすべてのインスタンスが置き換えられます。
- "txtContent":"=replaceAll('H-e-l-l-o W-o-r-l-d', '-', '')" Hello World の結果
padStart: 結果の文字列が指定された長さに達するまで、現在の文字列に別の文字列を埋め込みます。埋め込みは現在の文字列の先頭から適用されます。
- "txtContent":"=padStart('DogFood', 10, 'A')" の結果は AAADogFood になります
- "txtContent":"=padStart('DogFood', 10, 'AB')" の結果は ABADogFood になります
- "txtContent":"=padStart('DogFood', 5, 'A')" の結果は DogFood になります
padEnd: 結果の文字列が指定された長さに達するまで、現在の文字列に特定の文字列を埋め込みます。埋め込みは現在の文字列の末尾から適用されます。
- "txtContent":"=padEnd('DogFood', 10, 'A')" の結果は DogFoodAAA になります
- "txtContent":"=padEnd('DogFood', 10, 'AB')" の結果は DogFoodABA になります
- "txtContent":"=padEnd('DogFood', 5, 'A')" の結果は DogFood になります
getThumbnailImage: 指定されたイメージフィールドと推奨サイズのイメージを指す URL を返します。
- "src":"=getThumbnailImage([$ImageField], 400, 200)" は、幅 400、高さ 200 の特定の画像フィールドの画像を指す URL になります。

条件演算子 - 条件演算子は以下のとおりです。

?: 抽象木構文で記述される条件演算子は、その演算子として ? を使用します。これは、 a ? b : cと同等の式を実現するためです。式 a が true と評価された場合、結果は b、それ以外の場合は結果が c。 Excel スタイルの式では、こうした式を if ステートメントで記述します。関係なく、オペランドは 3 つあります。最初のものは評価する条件です。 2 つ目は条件が true の場合の結果です。 3 つ目は条件が false の場合の結果です。
- "txtContent":"=if(4 < 5, 'yes', 'no')" の結果は "yes" になります
- "txtContent":"=if(4 > 5, 'yes', 'no')" の結果は "no" になります

複数値フィールドに関連する演算子 - 次の演算子は、人物、ルックアップ、選択肢の種類の複数値フィールドのコンテキストでのみ使用します。

length
join
loopIndex

length は、フィールド名を指定すると、複数値フィールドのメンバーの数を返します。単一値フィールドを指定すると、 length は、そのフィールドに値がある場合に 1 を返します。

join は、指定した区切り記号で複数値フィールドの値を連結します。最初のオペランドは、 "@currentField.lookupValue"、 "[$AssignedTo.title]"など、複数値フィールドの値を指す必要があります。 2 番目のオペランドは、値を一つに連結する区切り文字の文字列リテラル値になります。

loopIndex は、反復子変数の名前を指定する場合は、反復子の現在のインデックス (0 から始まる) を返します。反復子の名前は、文字列リテラルとして指定する必要があります。 loopIndex は、それぞれの forEach が有効になっている要素内、またはその子要素要素内でのみ動作します。

例については、「複数値フィールドの書式設定」を参照してください。

文字列関連演算子 - 文字列 値を操作するときに、以前に詳細な演算子の一部を使用できます。

+
indexOf (文字列長の回避策の場合)

+ は、次のように文字列を連結する必要がある場合に使用できます。

"txtContent": "=[$column1] + ' ' + [$column2] + 'some other text'"

indexOf 演算子 length は文字列値型 (1 または 0 を返します) では機能しないため、 indexOf は、文字列の長さを取得するための優れた回避策として役立ちます(例: indexOf([$column1] + '^', '^'))。 '^'またはその他の文字を使用して、文字列の末尾を見つけます。

オペランド

式のパラメーターやオペランド指定します。これは、式のオブジェクトまたは基本的な値の配列です。

特別な文字列値

txtContent、スタイル、および属性の値には文字列または式オブジェクトを指定できます。リストと、ユーザーのコンテキスト内のフィールドから値を取得するためのいくつかの特別な文字列パターンがサポートされています。

"@currentField"

現在のフィールドの値として評価されます。

一部のフィールドの種類はオブジェクトとして表されます。オブジェクトから値を出力するには、そのオブジェクト内の特定のプロパティを参照してください。たとえば、現在のフィールドが人物/グループのフィールドであれば、担当者の名前を取得するには @currentField.title を指定します。通常、これはリストビューに表示されます。プロパティのリストを持つオブジェクトとして表されるフィールドの種類を次に示します。

注:

@currentField.title は既定で個人の名前を返します。ただし、個人フィールドの Show Field が調整されている場合は、title プロパティの値が変更されることがあります。たとえば、Department として構成された Show Field がある個人フィールドには、title プロパティの個人の部署があります。

人物フィールド

人物フィールドオブジェクトには、次のプロパティ (例の値) があります。

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

"ユーザー" フィールドは、以下の書式設定と一緒にプロファイルのホバーカードを持つことができます。

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

日付/時刻フィールド

日付/時刻型フィールドの値は、表示する形式に応じて異なる方法で取得できます。日付型の値を特定の形式に変換するために、次のメソッドがサポートされています。

toLocaleString()-日付型を完全に展開し、日付、時刻を含めて表示します。
toLocaleDateString()-日付型の日付だけを表示します。
toLocaleTimeString()-日付型の時刻だけを表示します。

たとえば、次の JSON は現在のフィールド (日付フィールドであると仮定) を日付と時刻の文字列として表示します。

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

これは上記と同じサンプルで、Excel 形式の式の構文を使用しています。

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

場所フィールド

場所フィールドオブジェクトには、次のプロパティ (サンプル値付き) があります。

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

次の例では、現在のフィールドで場所フィールドを活用する方法を示します。

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

ルックアップフィールド

ルックアップフィールドオブジェクトには、次のプロパティ (例の値) があります。

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

次の例では、現在のフィールドにルックアップフィールドを活用する方法を示します。

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

ハイパーリンクフィールド

ハイパーリンクフィールドオブジェクトには、次のプロパティがあります (値の例を示します)。

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

URL の値を参照するには、@currentField を使用します。

現在のフィールドでハイパーリンクフィールドを使用する例を次に示します。

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

画像フィールド

image field オブジェクトには、次の fileName プロパティがあります。

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

注:

2024 年 7 月の時点で、 fileName プロパティの値は 1 つだけです。

次の例では、現在のフィールドで画像フィールドを活用する方法を示します。

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

承認状態フィールド

承認状態フィールドオブジェクトには、次のプロパティがあります (値の例を示します)。

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

displayValue は、承認状態のローカライズされた文字列です。

@currentField または [$__ModerationStatus] も、以下の内的数値に従って内部的にマップされます。

0: 承認済み
1: 拒否
2: 保留中
3: 下書き
4: スケジュール済み

[$_ModerationStatus] field では、文字列と数値の両方との比較がサポートされています。数値比較はロケールや言語に関係なく機能するため、このフィールドではこの方法が推奨されます。

次の式は、状態が 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!'

次の例は、現在のフィールドで承認状態フィールドを使用する方法を示しています。

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

"[$FieldName]"

列は行全体のコンテキスト内で書式設定されます。このコンテキストを使用すると、[$InternalName] のように、ドル記号に続く 内部名 を角カッコで囲んで指定することにより、同じ行内の他のフィールドの値を参照することができます。たとえば、"MarchSales" という内部名のフィールドの値を取得するには、[$MarchSales] を使用します。

注:

他のフィールドへの参照は、同じビューに含まれている場合にのみ機能します。

フィールドの値がオブジェクトの場合は、オブジェクトのプロパティにアクセスできます。たとえば、"SalesLead" という名前の個人フィールドの "Title" プロパティにアクセスするには、"[$SalesLead.title]" を使用します。

"[!FieldName]"

列とビューの書式設定では、角かっこで囲まれたフィールドの 内部名 を指定し、前に感嘆符 ( [!InternalName]) を付けることで、任意のフィールドのメタデータを参照できます。

現在のフィールドの表示名はこのメタデータで利用可能で、DisplayName プロパティを使用してアクセスできます: [!SalesLead.DisplayName]。

"@currentWeb"

これはサイトの絶対 URL に評価されます。これはページのコンテキスト内の webAbsoluteUrl と同値です。この値は SharePoint Online でのみ使用できます。

"@me"

これは、現在のログイン済みのユーザーのメールアドレスとして評価されます。

このフィールドは現在のユーザーの電子メールアドレスを表示するために使用できますが、多くの場合、条件内で使用されます。現在ログインしているユーザーと同じ場合は人物フィールドの色を赤に設定し、それ以外の場合は青に設定する例を次に示します。

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

これは上記と同じサンプルで、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"

これは、現在の日付と時刻として評価されます。

"@rowIndex"

これはビュー内の行の表示されたインデックスに評価されます。この値は表示位置に基づいており、ビューが並べ替えやフィルター処理されている場合でも位置に基づいて一貫性が保たれます。インデックスは 0 から始まります。この値は SharePoint Online でのみ使用できます。

ビューの書式内で値を使用して、行に代替形式を適用する例を以下に示します。

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

"@window.innerHeight"

これは、一覧が表示される際に、ブラウザーウィンドウの高さ (ピクセル単位) と等しい数値に評価されます。

"@window.innerWidth"

これは、一覧が表示される際に、ブラウザーウィンドウの幅 (ピクセル単位) と等しい数値に評価されます。

サムネイル

ドキュメントライブラリには、ファイルのサムネイルへの URL を取得するために使用できる一連のトークンがあります。

@thumbnail.small、 @thumbnail.medium、および @thumbnail.large は、3 つの異なる定義済みサイズのサムネイル URL に評価されます。
@thumbnail.<bounding size> は、幅と高さの両方で境界サイズより大きくなっていない最大のサムネイルへの URL に評価されます。たとえば、@thumbnail.150 は 150×150 ピクセルを超えないサムネイルへの URL に評価されます。
@thumbnail.<bounding width>x<bounding height> は、境界の幅と境界の高さより大きくない最大のサムネイルへの URL に評価されます。たとえば、@thumbnail.100x200 は幅 100 ピクセル以下、高さ 200 ピクセル以下のサムネイルへの URL に評価されます。

これらのトークンは、フォルダーなどの、ファイルでない項目については値を返しません。

注:

生成されたサムネイルの縦横比は、ファイルの見た目と同じで、境界サイズを変更してもサムネイルの縦横比には影響ありません。

ヒント

サムネイルはサポートされているファイル形式の一覧でのみ使用できます。そのため、特定の形式がサポートされていないために、生成された URL にアクセスできない場合があります。ただし、有効なサムネイルトークンがimg タグの唯一のsrc属性として設定されている場合は、そのトークンを処理し、使用できない場合はイメージを非表示にします。

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

FileLeafRef を使用した既定のファイルのホバーカード

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

displayValue

次の列の型では、 displayValue プロパティを使用して、列の設定に基づいて既定でレンダリングされる値を取得できます。

日付/時刻
番号
はい/いいえ
通貨
承認状態

{
  "elmType": "div",
  "txtContent": "@currentField.displayValue"
}

これは、フィールド名でも機能します。

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

"@isSelected"

これは、ビュー内の選択した項目の true に評価され、それ以外の場合は false されます。

"@lcid"

これは、現在のカルチャの LCID に評価されます。これは、日付、時刻、数値の書式設定に使用できます。

"@UIlcid"

これは、現在の UI カルチャの LCID に評価されます。これは、ローカライズされた表示文字列を表示するために使用できます。

次の方法で共有

書式構文リファレンス

elmType

filepreview

img src security

txtContent

style

属性

children

debugMode

forEach

customRowAction

customCardProps

defaultHoverField

列フォーマッタ参照

inlineEditField

filePreviewProps

式

Excel 形式の式

抽象構文ツリーの式

演算子

オペランド

特別な文字列値

"@currentField"

"[$FieldName]"

"[!FieldName]"

"@currentWeb"

"@me"

"@now"

"@rowIndex"

"@window.innerHeight"

"@window.innerWidth"

サムネイル

displayValue

"@isSelected"

"@lcid"

"@UIlcid"

その他のリソース