書式構文リファレンス

elmType

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

  • div
  • span
  • a
  • img
  • svg
  • path
  • button
  • p

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

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'

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

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

属性

elmType で指定した要素に追加するさらなる属性を任意に指定するプロパティ。 これは、名前と値のペアを持つオブジェクトです。 この属性の名前は、次のいずれかである必要があります。

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

その他の属性を指定すると、エラーが発生します。 属性の値は式オブジェクトまたは文字列とすることができます。 次の例では、2 つの属性 (targethref) を 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

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

debugMode

デバッグで使用する、任意のプロパティです。 エラー メッセージを出力し、コンソールに警告を記録します。

forEach

特定の複数値フィールドの各メンバーについて、要素自体の重複を許可するオプション プロパティ。 "forEach" プロパティの値は、"iteratorName in @currentField" または "iteratorName in [$FieldName]" のいずれかの形式である必要があります。

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

ループで使用されるフィールドは、複数値オプションを有効にできるサポートされているフィールドの種類 (人物、ルックアップ、選択肢) である必要があります。

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"
      }
    }
    
  • share: ボタンをクリックすると、共有ダイアログ ボックスが開きます。 このボタンのタイプの例を以下に示します。

    {
      "$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 内で指定されている特定のフローが起動します。 この例については、「フローを起動するためのボタンを作成する」を参照してください。 このボタンの種類の例を以下に示します。

    {
      "$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: フロー パネルにプライマリ ボタンのテキストを設定する (省略可能)

customCardProps

ホバーまたは Click イベントで表示されるカスタム カードを要素に追加します。 以下のカスタマイズが使用できます -

  • "formatter": カスタム カードの書式設定を定義する JSON オブジェクト。
  • "openOnEvent": customCard を開く必要があるイベント。 "click"または"hover"は 2 つの許可された値です。
  • "directionalHint": カスタム カードが配置されるターゲットを基準に方向を指定します。
  • "isBeakVisible": 突起を表示するか表示しないか指定します。
  • "beakStyle": カスタム カードの突起のスタイル オブジェクトを指定します。

defaultHoverField

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

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

列フォーマッタ参照

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

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

inlineEditField

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

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

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

式は、SharePoint Online の Excel 形式の式、または SharePoint Online および SharePoint 2019 の抽象構文ツリーの式を使用して記述できます。

Excel 形式の式

Excel 形式の式はすべて等号 (=) で始まります。 このスタイルの式は、SharePoint Online でのみ使用できます (SharePoint 2019 では使用不可)。

この単純な条件付き書式は、@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))

抽象構文ツリーの式

次の例には、次の式を実行する式オブジェクトが含まれています。

(@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
  • padStart
  • padEnd
  • getUserImage
  • addDays
  • addMinutes
  • appendTo
  • removeFrom

二項算術演算子 - 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 になります
  • toLocaleString(): Date を言語に依存する表現で返します
    • "txtContent":"=toLocaleString(@now)" の結果はユーザーのロケールに応じて異なりますが、en-us の場合は "2/5/2019, 1:22:24 PM" のようになります
  • toLocaleDateString(): Date の日付部分のみを言語に依存する表現で返します
    • "txtContent":"=toLocaleDateString(@now)" の結果はユーザーのロケール応じて異なりますが、en-us の場合は "2/5/2019" のようになります
  • toLocaleTimeString(): Date の時間部分を言語に依存する表現で返します
    • "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: 指定した数値を次に大きい整数 (whole number) または整数 (integer) に切り上げます。- SharePoint Online でのみ利用可能
    • "txtContent":"=ceiling(45.5)"の結果は 46 になります
  • getDate: 指定した日付の月の日を返します。 - SharePoint Online でのみ使用可能
    • "txtContent":"=getDate(Date('12/26/1981'))"の結果は 26 になります
  • getMonth: ゼロベースの (ゼロが年の最初の月を示す) 値として、ローカル時間に従って指定した日付の月を返します。- 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, '|')" の結果は "Chris Kent|Vesa Juvonen|Jeff Teper" になります (選択した個人によって異なります)
  • 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' が削除された配列を返します
  • 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' に置き換える配列を返します。
  • 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 になります

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

  • ?: 抽象木構文で記述される条件演算子は、その演算子として ? を使用します。 これにより、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"
  }
}

画像フィールド

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

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

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

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

承認状態フィールド

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

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

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

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

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

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

次の式は、状態が 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]"
}