高度な書式設定の概念

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

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

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

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

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

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

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

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

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

  1. フローが構成されている SharePoint リストで [フロー] > [フローを表示] の順に選択します。
  2. 実行するフローを選択します。
  3. 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

書式設定を使用して、クリックやホバーなどのユーザー定義のアクションを割り当てることができるカスタム呼び出しを定義することができます。

この例では customCardPropsopenOnEventdirectionalHint、および isBeakVisible を使用します。

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

ポイント時の既定カード

プロファイル カードやファイルのホバー カードをフォーマッタ上に置くこともできるようになり、ユーザーは以下のこともできるようになりました。

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

既定のファイル カードで書式設定されたファイル名へのポイント

プレビュー画像 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-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_1FieldInternalName_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 トークン
    • 組み込みの日付関数を使用して日付を返す
    • addDaysaddMinutes、今日から 7 日後のようなをサポートする 2 つの新機能
    • 空の文字列 "" はフィールド値をクリアします
  • Multi-Choice および Multi-Person:

    • 複数の値を保存するには配列値が必要なため、複数の値のフィールドは特別です。
    • 複数値フィールドで動作する appendToremoveFrom、および replace の 3 つの新しい関数。
      • appendTo([$MultiChoiceField], 'MyValue')
      • removeFrom([$MultiUserField], @me): 2 番目のパラメーターに一致するすべての出現箇所を削除する
      • replace([$MultiChoiceField], 'Choice 1', 'Choice 3'): 2 番目のパラメーターのすべての出現回数を 3 番目に置き換えます。
  • ユーザー フィールドの値:

    • ユーザー名またはメール

    • 空の文字列 "" はフィールド値をクリアします

    • これらの値を返す

      注意

      クエリは、ユーザー列で指定された文字列値を使用して実行され、返された結果の最初のユーザーが使用されます。