高度な書式設定の概念

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

次の機能のいくつかを使用して、ビューと列の書式設定をより豊富で相互作用可能なものにすることができます。

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

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

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

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

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

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

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

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

[ フロー] [フロー > ] [フローが構成されている SharePoint の一覧でフローを表示する] を選択します。
実行するフローを選択します。
URL の末尾にある 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] として値とともに使用されます。

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

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

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

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

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

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

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

インライン編集では、要素にホバー罫線を追加して、これらの要素にアクションが関連付けられていることを示します。既定の罫線はです neutralSecondary。クリックすると、エディターに罫線が themePrimary 表示されます。これらの罫線の色は、、および --inline-editor-border-colorのいくつかの特殊な属性--inline-editor-border-style--inline-editor-border-radius--inline-editor-border-widthを使用して、同じ要素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 番目に置き換えます。
ユーザーフィールドの値:
- ユーザー名またはメール
- 空の文字列 "" はフィールド値をクリアします
- これらの値を返す式
  
  注:
  
  クエリは、ユーザー列で指定された文字列値を使用して実行され、返された結果の最初のユーザーが使用されます。

高度な書式設定の概念

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

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

ポイント時の既定カード

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

インライン編集

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

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

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

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

値 actionInput のフィールド値:

その他のリソース

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

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