高度な書式設定の概念

次の機能の一部を使用して、ビューと列の書式設定を情報が豊富で対話型にすることができます。

フローを起動するためのボタンを作成する

次のスクリーンショットは、[アクション] 列に追加する [フロー] ボタンが含まれるリストを示しています。

サンプルのスクリーンショット

列の書式設定を使用することで、選択されると対応するリスト項目のフローを実行するボタンを作成できます。ソリューション対応のフローの場合は、ボタンを選択するとフロー起動パネルが表示され、[フローの実行] を選択してフローを開始する必要があります。ソリューションに対応していないフローの場合は、ボタンを選択するとフロー起動パネルが表示され、フローが実行されます。

下にあるサンプルを使用するには、実行するフローの ID に置き換える必要があります。この ID は、button 要素内の customRowAction 属性の actionParams プロパティに含まれています。

ソリューション対応のフローの ID を取得するには:

[ フロー] > [フロー] が構成されている SharePoint リストにフローを表示する] を選択します。
該当する場合は、フローがホストされている環境に切り替えます。
[ソリューション] 領域を選択します。
フローが作成されたソリューションを選択します。
クラウドフローをフィルター処理し、実行するフローを選択します。
[エクスポート] > [フロー識別子の取得] を選択します。
ID をコピーします。

ソリューションに対応していないフローの ID を取得するには:

フローがホストされている環境に切り替えます。
実行するフローを選択します。
[エクスポート] > [フロー識別子の取得] を選択します。

ID をコピーします。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "Send to Manager"
    }
  ]
}

加えて、フローパネル自体の一部をカスタマイズするには、actionParams プロパティの範囲内のheaderText および runFlowButtonText のオプションを使用できます。詳細については、詳しい構文のリファレンスである「ボタン要素」の部分を参照してください。

ポイント時のカスタムカード

次の画像は、リストにカスタムホバーを追加したものです。

ポイント時 - "状態" 列のメタデータが以下のビューの書式設定で利用可能になります。

プレビュー画像 1

ポイント時 - 「状態」列のメタデータが以下の列の書式設定で利用可能になります。

プレビュー画像 2

書式設定を使用して、ユーザー定義の基準 (クリックやホバーなどのアクション) を委託できるカスタム吹き出しを定義できます。

この例では、 customCardProps、 openOnEvent、 directionalHint、 isBeakVisibleを使用します。

{
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "[$Status]",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "Define your formatter options inside the customCardProps/formatter property"
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle" : {
      "backgroundColor": "white"
    }
  }
}

ポイント時の既定カード

ユーザーは、プロファイルカードまたはファイルホバーカードフォーマッタも使用できるようになりました。ユーザーができることの一部は次のとおりです。

任意の列のプロファイルカードまたはファイルのホバーカード
プロファイルカードやホバーカードのビューの書式設定

既定のファイルカードを使用して書式設定を行うファイル名にカーソルを合わせます。

プレビュー画像 3

既定の [プロファイル] カードを使用して書式設定を行っているユーザー列にカーソルを合わせます。

プレビュー画像 4

この例では、次の defaultHoverFieldを使用します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
      },
      "attributes": {
        "src": "=getUserImage([$Editor.email], 's')",
        "title": "[$Editor.title]"
      }
    },
    {
      "elmType": "span",
      "style": {
        "vertical-align": "middle",
        "margin-left": "2px"
      },
      "txtContent": "[$Editor.title]"
    }
  ],
  "defaultHoverField": "[$Editor]"
}

列フォーマッタリファレンス

ユーザーは別の列/ビューフォーマッタ内の列のフォーマッタ JSON を参照することができ、他の要素と共にカスタムの列可視化を構築することができます。これは、 columnFormatterReference プロパティを使用して行うことができます。

次の画像は、カテゴリ列フォーマッタを参照するギャラリーレイアウトを含むリストを示しています。

カテゴリ列を参照するギャラリーレイアウト

カテゴリ列が書式設定されたリストレイアウト

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 127,
  "width": 254,
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Category.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content"
                },
                "style": {
                  "height": "32px",
                  "font-size":"12px"
                },
                "children": [
                  {
                    "columnFormatterReference": "[$Category]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

インライン編集

インライン編集を使用すると、フォーマッタはフィールドエディターを読み込んでアイテムのフィールドデータを編集することができます。ユーザーはリストアイテムに対する編集アクセス許可を持っている必要があり、この機能を機能させるには、フィールドの種類がサポートされている一連の型に属している必要があります。

特殊な JSON プロパティ inlineEditField は、JSON 内のターゲット要素に [$FieldName] フィールド内部名として value と共に使用されます。

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

inlineEditField プロパティを使用したインライン編集

これにより、ユーザーはグリッドベースの編集フォームやアイテム編集フォームに移動することなく、ビュー内でアイテムをインプレースで編集できます。

サポートされているフィールド型

インライン編集でサポートされているフィールドの種類の一覧は以下のとおりです。

1 行テキスト
複数行テキスト (RTF なし)
番号
DateTime
選択と複数選択
ユーザーとマルチユーザー
参照

ホバー罫線とカスタマイズ

インライン編集では、要素にホバー罫線が追加され、これらの要素にアクションが関連付けられていることを示します。既定の罫線は neutralSecondaryで、クリックするとエディターに themePrimary の罫線が表示されます。これらの罫線の色は、--inline-editor-border-width、--inline-editor-border-style、--inline-editor-border-radius、--inline-editor-border-colorなどの特殊な属性を使用して、inlineEditFieldを使用して同じ要素のスタイルを設定することでオーバーライドできます。

{
  "elmType": "div",
  "inlineEditField": "[$FieldName]",
  "txtContent": "[$FieldName]",
  "style": {
    "--inline-editor-border-color": "transparent transparent red transparent",
    "border-color": "gray",
    "border-width": "1px",
    "border-style": "solid"
  }
}

customRowAction を使用してアイテムの複数のフィールド値を設定する

新しい setValue プロパティと customRowAction プロパティを使用すると、フォーマッタはエディターやフォームを開かずにアイテムを内部的に変更するアクションボタンをレンダリングできます。 setValue では、アイテムの複数のフィールド値を一度に設定することもできます。

次の JSON では、 FieldInternalName_1、 FieldInternalName_2、 FieldInternalName_3の値が設定され、指定された値が設定されます。

{
  "elmType": "div",
  "txtContent": "[$FieldName]",
  "customRowAction":{
    "action": "setValue",
    "actionInput": {
      "FieldInternalName_1": "FieldValue_1",
      "FieldInternalName_2": "FieldValue_2",
      "FieldInternalName_3": "=if([$Status] == 'Completed', 'yes', 'no')"
    }
  }
}

サポートされているフィールド型

1 行テキスト
複数行テキスト (RTF なし)
番号
DateTime
選択と複数選択
ユーザーとマルチユーザー

値 `actionInput` のフィールド値:

テキスト値:
- "Choice 1" のような有効な文字列
- 他の列の値: [$ColumnName]
- 次のような式:
```
"if([$column]> 10, "Choice A", "Choice B")"
```
  または
```
{operator: "+", operands" : ["Choice", "A"]}
```
数値:
- 有効な番号
- 他の列の値: [$ColumnName]
- 式
日付値:
- 日付文字列
- @now トークン
- 組み込みの日付関数を使用して日付を返す式
- addDays addMinutes、今日から 7 日間のような式をサポートする 2 つの新しい関数
- 空の文字列 "" はフィールド値をクリアします
Multi-Choice および Multi-Person:
- 複数値フィールドは、複数の値を保存するために配列値が必要であるため、特別です。
- appendTo、 removeFrom、および replace、複数値フィールドで動作できる 3 つの関数。
  - appendTo([$MultiChoiceField], 'MyValue')
  - removeFrom([$MultiUserField], @me): 2 番目のパラメーターに一致するすべての出現箇所を削除する
  - replace([$MultiChoiceField], 'Choice 1', 'Choice 3'): 2 番目のパラメーターのすべての出現箇所を 3 番目のパラメーターに置き換えます。
ユーザーフィールドの値:
- ユーザー名またはメール
- 空の文字列 "" はフィールド値をクリアします
- これらの値を返す式
  
  注:
  
  クエリは people 列に指定された文字列値で実行され、返された結果の最初のユーザーが使用されます。

Last updated on 2025-08-14

次の方法で共有

高度な書式設定の概念

フローを起動するためのボタンを作成する

ポイント時のカスタム カード

ポイント時の既定カード

列フォーマッタリファレンス

インライン編集

サポートされているフィールド型

ホバー罫線とカスタマイズ

customRowAction を使用してアイテムの複数のフィールド値を設定する

サポートされているフィールド型

値 actionInput のフィールド値:

その他のリソース

ポイント時のカスタムカード

値 `actionInput` のフィールド値: