列の書式設定で SharePoint をカスタマイズするUse column formatting to customize SharePoint

列の書式設定を使用して、SharePoint のリストやライブラリのフィールドの表示方法をカスタマイズできます。You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. それには、フィールドがリストビューに入ったときに表示する要素を記述し、加えて、要素に適用するスタイルを記述した JSON オブジェクトを作成します。To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. 列の書式設定は、リスト アイテムまたはファイルのデータを変更しません。リストを閲覧しているユーザーへの表示の方法が変わるだけです。The column formatting does not change the data in the list item or file; it only changes how it’s displayed to users who browse the list. リスト内でビューを作成および操作できるすべてのユーザーが、列の書式設定を使ってビューのフィールドの表示方法を設定できます。Anyone who can create and manage views in a list can use column formatting to configure how view fields are displayed.

たとえば、タイトル、取り組み、任命先、状態というフィールドをもつリストは、カスタマイズがなければ次のように表示されます。For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:

4 つの書式設定されていない列を含む SharePoint リスト

列の書式設定により、取り組み任命先状態 の各フィールドの外観をカスタマイズしたリストは、次のように表示されます。A list with the appearance of the Effort, Assigned To, and Status fields customized via column formatting might look like this:

3 つのフィールドが書式設定された SharePoint リスト

ヒント

この記事や他の多数のコミュニティ サンプルで例示されているサンプルは、オープン ソースの列フォーマット定義専用の GitHub リポジトリから入手できます。Samples demonstrated in this article and numerous other community samples are available from a GitHub repository dedicated for open-sourced column formatting definitions. これらのサンプルは、SharePoint GitHub 組織の sp-dev-column-format-format リポジトリから検索できます。You can find these samples from the sp-dev-column-formatting repository at SharePoint GitHub organization.

列の書式設定とフィールド カスタマイザーの違いとはHow is column formatting different than the Field Customizer?

列の書式設定も、SharePoint Framework のフィールド カスタマイザー拡張機能も、SharePoint リスト内のフィールドの表示方法をカスタマイズします。Both column formatting and SharePoint Framework Field Customizer extensions enable you to customize how fields in SharePoint lists are displayed. フィールド カスタマイザーを使用すると、フィールドの表示を制御する任意のコードを記述できるため、フィールド カスタマイザーの方がより強力です。The Field Customizer is more powerful because you can use it to write any code that you want to control how a field is displayed.

列の書式設定はより簡単で、幅広く応用されています。Column formatting is more easily and broadly applied. 一方で、柔軟性は低く、カスタムコードには対応していません。あらかじめ限定された一部の要素や属性のみが使用できます。However, it is less flexible, because it does not allow for custom code; it only allows for certain predefined elements and attributes.

次の表では、列の書式設定とフィールド カスタマイザーを比較しています。The following table compares column formatting and the Field Customizer.

フィールドの種類Field type 列の書式設定Column formatting フィールド カスタマイザーField Customizer
アイテムの値と値の範囲に基づく条件付きの書式設定Conditional formatting based on item values and value ranges サポートSupported サポートSupported
アクション リンクAction links スクリプトを起動しない静的なハイパーリンクのサポートSupport for static hyperlinks that do not launch script カスタム スクリプトを呼び出すものも含む、すべてのハイパーリンクのサポートSupport for any hyperlink, including those that invoke custom script
データ可視化Data visualizations HTML と CSS を使用して表現できるシンプルな可視化のサポートSupport for simple visualizations that can be expressed using HTML and CSS 任意のデータの可視化のサポートSupport for arbitrary data visualizations

列の書式設定で達成できるシナリオでは、多くの場合、フィールド カスタマイザーより列の書式設定のほうが速く、簡単です。If you can accomplish your scenario by using column formatting, it’s typically quicker and easier to do that than to use a Field Customizer. リスト内でビューを作成および操作できるすべてのユーザーが、列の書式設定を使用して、カスタマイズを作成および公開できます。Anyone who can create and manage views in a list can use column formatting to create and publish customizations. フィールド カスタマイザーは、書式設定がサポートしていない、より高度なシナリオで使用します。Use a Field Customizer for more advanced scenarios that column formatting does not support.

列の書式設定をはじめて使用するGet started with column formatting

[列の書式設定] ウィンドウを開くには、列の下のドロップダウン メニューを開きます。To open the column formatting pane, open the drop-down menu under a column. [列の設定] で、[この列の書式を設定する] を選択します。Under Column Settings, choose Format this column.

選択した列の書式設定が未使用なら、次のようなウィンドウが表示されます。If no one has used column formatting on the column you selected, the pane will look like the following.

空欄に列の書式設定を指定した JSON を入力またはペーストし、プレビュー、保存または取り消しを選択します。

書式を指定しないフィールドでは、既存の表示が使用されます。A field with no formatting specified uses the default rendering. 列の書式を設定するには、ボックスに書式を指定した JSON を入力します。To format a column, enter the column formatting JSON in the box.

書式設定をプレビューするには、[プレビュー] を選択します。To preview the formatting, select Preview. 変更内容を確定するには、[保存] を選択します。To commit your changes, select Save. 保存すると、リストはカスタム設定に従って表示されます。When you save, anyone who views the list will see the customization that you applied.

列の書式設定を使用する最も簡単な方法は、例をひな形として、特定のフィールドに応用できるように編集する方法です。The easiest way to use column formatting is to start from an example and edit it to apply to your specific field. 次のセクションに、シナリオに合わせてコピー、貼り付け、編集して活用できる例を示します。The following sections contain examples that you can copy, paste, and edit for your scenarios. SharePoint/sp-dev-column-formatting リポジトリでも、いくつかのサンプルを使用できます。There are also several samples available in the SharePoint/sp-dev-column-formatting repository.

注意

このドキュメントのすべての例では、SharePoint Online で使用される JSON スキーマを参照します。All examples in this document refer to the JSON schema used in SharePoint Online. SharePoint 2019 で列を書式設定するには、スキーマとしてhttps://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json をご利用ください。To format columns on SharePoint 2019, please use https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json as the schema.

フィールドの値を表示する (基本)Display field values (basic)

列の最も簡単な書式設定は、<div /> 要素の中にフィールドの値を挿入するものです。The simplest column formatting is one that places the value of the field inside a <div /> element. この例では、数値、テキスト、選択肢、および日付フィールドを操作します。This example works for number, text, choice, and date fields:

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

フィールドの種類によっては、値を取得する追加の作業が必要です。Some field types require a bit of extra work to retrieve their values. 人物フィールドは、システム内ではオブジェクトとして表され、その表示名はオブジェクトの title プロパティに入っています。Person fields are represented in the system as objects, and a person’s display name is contained within that object’s title property. これは同じ例で、人物フィールドを使用できるように変更されたものです。This is the same example, modified to work with the person field:

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

ルックアップ フィールドもオブジェクトとして表されます。表示されるテキストは、lookupValue プロパティに入っています。Lookup fields are also represented as objects; the display text is stored in the lookupValue property. この例では、ルックアップ フィールドを扱います。This example works with a lookup field:

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

条件付き書式の適用Apply conditional formatting

列の書式設定により、フィールドの中の値によってフィールドにスタイル、クラス、アイコンを適用できます。You can use column formatting to apply styles, classes, and icons to fields, depending on the value inside those fields.

数の範囲に基づく条件付き書式設定 (基本)Conditional formatting based on a number range (basic)

次の図は、数値の範囲に適用される条件付き書式設定の例を示しています。The following image shows an example of conditional formatting applied to a number range.

値が 70 になると、オレンジ色の背景で重大度を警告

この例では、Excel 形式の条件付き演算子 (=if) を使用し、現在のフィールドの値が 70 以下のときにクラス (sp-field-severity--warning) を親の <div /> 要素に適用します。This example uses an Excel-style conditional expression (=if) to apply a class (sp-field-severity--warning) to the parent <div /> element when the value in the current field is less than or equal to 70. これにより、フィールドの値が 70 以下なら強調表示され、70 を超える場合は通常表示されます。This causes the field to be highlighted when the value is less than or equal to 70, and appear normally if it's greater than 70.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= 70,'sp-field-severity--warning', '')"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= 70,'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

テキストまたは選択肢のフィールドの値に基づく条件付き書式設定 (高度)Conditional formatting based on the value in a text or choice field (advanced)

次の図は、テキストまたは選択肢のフィールドに適用される条件付き書式設定の例を示しています。The following image shows an example of conditional formatting applied to a text or choice field:

状態フィールドは、完了では緑に、ブロック状態では赤、レビュー中ではオレンジになります。

固定値のセットを含む可能性があるテキストや任意のフィールドに条件付き書式を適用することができます。You can apply conditional formatting to text or choice fields that might contain a fixed set of values. 次の例では、フィールドの値が完了、レビュー中、問題ありどれに該当するか、または他の値であるかにより、異なるクラスが適用されます。The following example applies different classes depending on whether the value of the field is Done, In Review, Has Issues, or another value. この例では、フィールドの値に基づいて、CSS クラス (sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--severeWarning, sp-field-severity--blocked) を <div /> に適用します。This example applies a CSS class (sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--severeWarning, sp-field-severity--blocked) to the <div /> based on the field's value. 次に、属性 IconName を持つ要素 <span /> を出力します。It then outputs a <span /> element with an IconName attribute. この属性は別の CSS クラスを、[Office UI Fabric] アイコンをその要素の中に表示する <span /> に自動的に適用します。This attribute automatically applies another CSS class to that <span /> that shows an Office UI Fabric icon inside that element. 最後に、フィールド内に値が含まれた別の <span /> 要素が出力されます。Finally, another <span /> element is output that contains the value inside the field.

このパターンは、緊急性または重要度のさまざまなレベルにマップした別の値を表示する場合に便利です。This pattern is useful when you want different values to map to different levels of urgency or severity. この例をひな形として編集し、かかる値にマップされるフィールドの値、スタイル、アイコンを指定します。You can start from this example and edit it to specify your own field values and the styles and icons that should map to those values.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

日付の範囲に基づいて書式を設定するApply formatting based on date ranges

多くの場合、日付は期限やプロジェクトの重要な節目の追跡に使用されるため、日付/時刻フィールドの値に従って書式設定を行うシナリオは多く見られます。Because dates are often used to track deadlines and key project timelines, a common scenario is to apply formatting based on the value in a date/time field. 日付/時刻フィールドの値に基づいて書式を適用するには、次のパターンを適用します。To apply formatting based on the value in a date/time field, apply the following patterns.

日付の列が今日の日付以前または以降の場合にアイテムの書式を設定する (高度)Formatting an item when a date column is before or after today's date (advanced)

次の図は、日付による条件付き書式が適用されたフィールドを示しています。The following image shows a field with conditional date formatting applied:

状態フィールドが期限切れの場合はテキストを赤で表示

この例では、アイテムの DueDate が現在の日付/時刻以前である場合、フィールドを赤で表示します。This example colors the current field red when the value inside an item's DueDate is before the current date/time. これまでのいくつかの例と異なり、この例では、フィールドの書式を他のフィールドを参照して決定しています。Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. DueDate は [$FieldName] 構文を使用して参照することに注意してください。Note that DueDate is referenced using the [$FieldName] syntax. フィールド名は、フィールドの内部名であると見なされます。FieldName is assumed to be the internal name of the field. この例は、日付/時刻フィールドで使用できる特殊な値 - @now も活用しています。この値には、ユーザーがリスト ビューを読み込むときの現在の日付/時刻が代入されます。This example also takes advantage of a special value that can be used in date/time fields - @now, which resolves to the current date/time, evaluated when the user loads the list view.

注意

フィールド名にスペースがある場合は、フィールド名が _x0020_ として定義されます。If you have spaces in the field name, those are defined as _x0020_. たとえば、「Due Date」という名前のフィールドは、$Due_x0020_Date として参照される必要があります。For example, a field named "Due Date" should be referenced as $Due_x0020_Date.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$DueDate] <= @now, '#ff0000', '')"
  }
}

任意の日付に基づいてアイテムの書式を設定 (高度)Formatting items based on arbitrary dates (advanced)

日付/時刻フィールドの値を @now 以外の日付と比較するには、次のパターンに従います。To compare the value of a date/time field against a date that's not @now, follow the pattern in the following example. 次の例は、期限が明日以前であれば、現在のフィールドを赤く表示します。い場合は、The following example colors the current field red if the due date was <= tomorrow. これには日付の演算を使用します。This is accomplished using date math. すべての日付にミリ秒単位の数値を加算でき、その結果は別の日付になります。You can add milliseconds to any date and the result will be a new date. たとえば、日付に 1 日を追加するには、(24*60*60*1000 = 86,400,000) を追加します。For example, to add a day to a date, you'd add (24*60*60*1000 = 86,400,000).

この例では、抽象構文ツリー内で 3 項演算子 (?) を使用して条件式を表す代替構文を示します。This example demonstrates an alternate syntax to express a conditional expression, using the ternary (?) operator inside an abstract syntax tree.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "+",
                     "operands": [
                        "@now",
                        86400000
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

これは上記と同じサンプルで、Excel 形式の式の構文を使用しています。Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= @now + 86400000, '#ff0000', '')"
   }
}

日付/時刻フィールドを日付の定数と比較するには、Date() メソッドを使用して文字列を日付に変換します。To compare a date/time field value against another date constant, use the Date() method to convert a string to a date. 次の例は、DueDate が 2017 年 3 月 22 日以前の場合に、現在のフィールドを赤で表示します。The following example colors the current field red if the value in the DueDate field is before 3/22/2017.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "Date()",
                     "operands": [
                        "3/22/2017"
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

これは上記と同じサンプルで、Excel 形式の式の構文を使用しています。Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= Date('3/22/2017'), '#ff0000', '')"
   }
}

クリック可能なアクションを作成するCreate clickable actions

列の書式設定を使用して、他の Web ページに移動するハイパーリンクや、独自の機能を起動するハイパーリンクを提供できます。You can use column formatting to provide hyperlinks that go to other webpages, or start custom functionality. この機能は、リスト内のフィールドの値でパラメーター化できる静的リンクに限定されています。This functionality is limited to static links that can be parameterized with values from fields in the list. http://https://、または mailto: 以外のプロトコルへのリンクを出力する場合、列の書式設定は使用できません。You can't use column formatting to output links to protocols other than http://, https://, or mailto:.

この例では、株価の銘柄コードを含むテキスト フィールドを yahoo ファイナンスのリアルタイム株価ページの該当銘柄へのハイパーリンクに変える方法を示します。This example shows how to turn a text field that contains stock ticker symbols into a hyperlink that targets the Yahoo Finance real-time quotes page for that stock ticker. この例では、+ 演算子を使い、現在のフィールドの値を静的なハイパーリンク http://finance.yahoo.com/quote/ に追加します。The example uses a + operator that appends the current field value to the static hyperlink http://finance.yahoo.com/quote/. さまざまなシナリオでこのパターンを拡張し、アイテムに関連するコンテキスト情報を表示できます。また、リスト アイテムの値からパラメーターが生成可能なハイパーリンクで情報やプロセスへアクセスできるのであれば、現在のアイテムと関連するビジネスプロセスを起動できます。You can extend this pattern to any scenario in which you want users to view contextual information related to an item, or you want to start a business process on the current item, as long as the information or process can be accessed via a hyperlink parameterized with values from the list item.

銘柄コードからハイパーリンクを生成した銘柄一覧

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

ヒント

リスト Web パーツでは、上記のアンカー記号タグはユーザーを新しいタブに移動します。同じタブ内を移動するには、data-interception 属性を追加して on に設定します。In a List Web Part, the above anchor tag will navigate user to a new tab. In order to navigate within the same tab, add data-interception attribute and set it to on. データ傍受属性の詳細情報。More information about data-interception attibute.

フィールドにアクション ボタンを追加する (高度)Add an action button to a field (advanced)

次の図は、フィールドに追加されたアクション ボタンを示しています。The following image shows action buttons added to a field.

名前にメールのボタンが追加された任命フィールド

列の書式を使い、フィールドの横にクイック アクション リンクを表示することができます。You can use column formatting to render quick action links next to fields. 次の例では、人物のフィールドで、親の要素である <div /> の中に 2 つの要素を表示します。The following example, intended for a person field, renders two elements inside the parent <div /> element:

  • 人物の表示名が含まれている <span /> 要素A <span /> element that contains the person’s display name.
  • 件名と本文をアイテムのメタデータから動的に生成したメールを作成するリンクである mailto: リンクを開く <a /> 要素An <a /> element that opens a mailto: link that creates an email with a subject and body populated dynamically via item metadata. <a /> 要素のスタイルは ms-Iconms-Icon—Mailms-QuickAction Fabric クラスを使用して設定され、クリック可能なメール アイコンのように見えるようになっています。The <a /> element is styled using the ms-Icon, ms-Icon—Mail, and ms-QuickAction Fabric classes to make it look like a clickable email icon.
{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px"
            },
            "txtContent": "@currentField.title"
        },
        {
            "elmType": "a",
            "attributes": {
                "iconName": "Mail",
                "class": "sp-field-quickActions",
                "href": {
                    "operator": "+",
                    "operands": [
                        "mailto:",
                        "@currentField.email",
                        "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n",
                        "@currentField.title",
                        "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=",
                        "[$ID]"
                    ]
                }
            }
        }
    ]
}

単純なデータの視覚エフェクトを作成するCreate simple data visualizations

列の書式設定を使い、条件と算術演算を組み合わせて基本的なデータ視覚化を実現します。Use column formatting to combine conditional and arithmetical operations to achieve basic data visualizations.

数値の列をデータ バーに整形する (高度)Format a number column as a data bar (advanced)

次の図は、データ バーとして書式設定された数値の列を示しています。The following image shows a number column formatted as a data bar.

リストの数値アイテムがバーとして表示された取り組みリスト

この例ではスタイル background-colorborder-top を適用し、数値フィールドである @currentField のデータ バー視覚エフェクトを作成しています。This example applies background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. バーのサイズは width 属性の設定方法に応じて変わります。値が 20 を超えると 100% に設定され、それ以外の値の場合は (@currentField * 5)% に設定されます。The bars are sized differently for different values based on the way the width attribute is set - it's set to 100% when the value is greater than 20, and (@currentField * 5)% otherwise. この例を各種の応用に対応させるには、フィールドで想定される最大値に境界条件 (20) を調整します。そして、フィールド内の値に応じてバーをどれだけ拡大するかを決める数式を変更します。To fit this example to your number column, you can adjust the boundary condition (20) to match the maximum anticipated value inside the field, and change the equation to specify how much the bar should grow depending on the value inside the field.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "width": "=if(@currentField >= 20, '100%', (@currentField * 5) + '%')"
  }
}

次の図は、上昇傾向、降下傾向のアイコンが付加されたリストを示しています。The following image shows a list with trending up/trending down icons added:

リストの横に表示された上昇傾向、降下傾向のアイコン

この例では、比較可能な 2 つの数値フィールド BeforeAfter が重要です。This example relies on two number fields, Before and After, for which the values can be compared. この例では、After フィールドの横に、このフィールドの値と Before の値との比較に従って適切な傾向アイコンを表示します。表示は、It shows the appropriate trending icon next to the After field, depending on that field's value compared to the value in Before. 2 つの値のうち、Afterの値が高ければ、sp-field-trending--up が使用され、Afterの値が低ければ sp-field-trending--down が使用されます。sp-field-trending--up is used when After's value is higher; sp-field-trending--down is used when After's value is lower.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "sp-field-trending--up",
                        "sp-field-trending--down"
                    ]
                },
                "iconName": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "SortUp",
                        {
                            "operator": "?",
                            "operands": [
                                {
                                    "operator": "<",
                                    "operands": [
                                        "[$After]",
                                        "[$Before]"
                                    ]
                                },
                                "SortDown",
                                ""
                            ]
                        }
                    ]
                }
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

これは上記と同じサンプルで、Excel 形式の式の構文を使用しています。Here's the same sample from above, using the Excel-style expression syntax:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": "=if([$After] > [$Before], 'sp-field-trending--up', 'sp-field-trending--down')",
                "iconName": "=if([$After] > [$Before], 'SortUp', "=if([$After] < [$Before], 'SortDown', ''))"
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

フローを起動するためのボタンを作成するCreate a button to launch a Flow

次のスクリーンショットは、[アクション] 列に追加する [フロー] ボタンが含まれるリストを示しています。The following screenshot shows a list with a Flow button added to the Action column:

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

列の書式設定を使用することで、選択されると対応するリスト項目のフローを実行するボタンを作成できます。You can use column formatting to create buttons that, when selected, run Flows on the corresponding list item. ボタンを選択した後、フロー起動パネルが表示され、フローが実行されます。The Flow Launch Panel will be displayed after choosing the button and the Flow will just run.

下にあるサンプルを使用するには、実行するフローの ID に置き換える必要があります。To use the sample below, you must substitute the ID of the Flow you want to run. この ID は、button 要素内にある customRowAction 属性に含まれています。This ID is contained within the customRowAction attribute inside the button element. フローの ID を取得するには、次のようにします。To obtain a Flow's ID:

  1. [フロー] をクリックして、フローが構成されている SharePoint リスト内のフローを表示します。Choose Flow > See your flows in the SharePoint list where the Flow is configured.
  2. 実行するフローを選択します。Choose the Flow you want to run.
  3. URL の末尾にある ID をコピーします。Copy the ID from the end of the URL.
{
  "$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 のオプションを使用できます。Additionally, you can use headerText and runFlowButtonText options within the actionParams property to customize portions of the Flow panel itself! 詳細については、詳しい構文のリファレンスである「ボタン要素」の部分を参照してください。See the button elements portion of the Detailed syntax reference for more details.

複数値フィールドの書式設定Formatting multi-value fields

書式設定を使用して、種類が人物、ルックアップ、選択肢の複数値フィールドの各メンバーにスタイルを適用できます。You can use column formatting to apply styles to each member of a multi-value field of type Person, Lookup and Choice.

基本的なテキストの書式設定Basic text formatting

次の図は、人物フィールドに適用される複数値フィールド書式設定の例を示しています。The following image shows an example of multi-value field formatting applied to a Person field.

各項目のすべての割り当て先を示すボタンのリスト、最初の行は空白で、2 行目は「Send email to Loyd Barham」、3 行目は「Send email to all 3 members」となっています

この例では、length 演算子を使用してフィールドのメンバーの数を検出し、join 演算子を使用してすべてのメンバーのメール アドレスを連結しています。This example uses the length operator to detect the number of members of the field, and used join operator to concatenate the email addresses of all members. この例では、メンバーがない場合はボタンが表示されず、テキスト内で複数形にする場合を考慮しています。This example hides the button when no member is found, and takes care of plurals in the text.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "style": {
        "display": "=if(length(@currentField) > 0, 'flex', 'none')"
    },
    "attributes": {
        "href": {
            "operator": "+",
            "operands": [
                "mailto:",
                "=join(@currentField.email, ';')"
            ]
        }
    },
    "children": [
        {
            "elmType": "span",
            "style": {
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": "Mail"
            }
        },
        {
            "elmType": "span",
            "txtContent": {
                "operator": "+",
                "operands": [
                    "Send email to ",
                    {
                        "operator": "?",
                        "operands": [
                            "=length(@currentField) == 1",
                            "@currentField.title",
                            "='all ' + length(@currentField) + ' members'"
                        ]
                    }
                ]
            }
        }
    ]
}

単純な HTML 要素の書式設定Simple HTML elements formatting

次の図は、複数値ルックアップ フィールドの値から、単純な文を構築する例を示しています。The following image shows an example of constructing a simple sentence from the values of a multi-value Lookup field.

フィールドのスクリーン ショットは、「North America, APAC, and Europe」となっています

この例では、演算子 loopIndexlength を用いてフィールドの最後のメンバーを特定し、属性 forEach を用いて HTML 要素に複製します。This examples uses operator loopIndex and length to identify the last member of the field, and attribute forEach to duplicate HTML elements.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "block"
    },
    "children": [
        {
            "elmType": "span",
            "forEach": "region in @currentField",
            "txtContent": {
               "operator": "?",
               "operands": [
                  "=loopIndex('region') == 0",
                  "[$region.lookupValue]",
                  {
                     "operator": "?",
                     "operands": [
                        "=loopIndex('region') + 1 == length(@currentField)",
                        "=', and ' + [$region.lookupValue]",
                        "=', ' + [$region.lookupValue]"
                     ]
                  }
               ]
            }
        }
    ]
}

複雑な HTML 要素の書式設定Complex HTML elements formatting

次の図では、メンバーの画像、メール アドレス、上部にメンバー数のシンプルなカウンターがあるユーザーのリストを作成する例を示します。The following image shows an example of building a list of users with pictures, email addresses and a simple counter for the number of members at the top.

名前が「所有者」、フィールド内の各ユーザーについてのプロファイル画像、名前、メールが表示された 3 行、左上隅には所有者の小さな灰色のカウンター (0 のときは別の色) というリストを表示します。

この例では、演算子 loopIndex を用いて 1 行目以外のすべての行の余白を制御し、属性 forEach を用いてメンバーのリストを作成します。This examples uses operator loopIndex to control the margins all rows but the first one, and attribute forEach to build the list of members.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "min-height": "1.5em",
        "flex-direction": "column",
        "align-items": "start"
    },
    "children": [
        {
            "elmType": "div",
            "txtContent": "=length(@currentField)",
            "style": {
                "border-radius": "1.5em",
                "height": "1.5em",
                "min-width": "1.5em",
                "color": "white",
                "text-align": "center",
                "position": "absolute",
                "top": "0",
                "right": "1em",
                "background-color": "=if(length(@currentField) == 0, '#ddd', '#aaa'"
            }
        },
        {
            "elmType": "div",
            "forEach": "person in @currentField",
            "style": {
                "justify-content": "center",
                "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "flex",
                        "flex-direction": "row",
                        "justify-content": "center"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "attributes": {
                                "src": "=[$person.picture]"
                            },
                            "style": {
                                "width": "3em",
                                "height": "3em",
                                "border-radius": "3em"
                            }
                        },
                        {
                            "elmType": "a",
                            "attributes": {
                                "href": "='mailto:' + [$person.email]"
                            },
                            "style": {
                                "margin-left": "0.5em"
                            },
                            "children": [
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.title]",
                                    "style": {
                                        "font-size": "1.2em"
                                    }
                                },
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.email]",
                                    "style": {
                                        "color": "gray"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

ポイント時のカスタム カードCustom cards on hover

次の画像は、リストにカスタム ホバーを追加したものです。The following image shows a list with a custom hover added to a List:

ポイント時 - "状態" 列のメタデータがビューの書式設定で利用可能になります。On hover - Metadata on the column "Status" is made available in view formatting

プレビュー画像 1

ポイント時 - 「状態」列のメタデータが列の書式設定で利用可能になります。On hover - Metadata on the column "Status" is made available in column formatting

プレビュー画像 2

列やビューの書式設定を使用して、クリックやホバーなどのユーザー定義のアクションを割り当てることができるカスタム呼び出しを定義することができます。You can use column and view formatting to define custom call out that can be commissioned basis user defined actions like click or hover

この例では、customCardProps、openOnEvent、directionalHint、isBeakVisible を使用します。This example uses customCardProps, openOnEvent, directionalHint and 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"
        }
    }
}

ポイント時の既定カードDefault cards on hover

プロファイル カードやファイルのホバー カードをフォーマッタ上に置くこともできるようになり、ユーザーは以下のこともできるようになりました。Users can now have profile card or file hover card on formatters too, some of the things users can now do - 1) 任意の列のプロファイル カードまたはファイルのホバー カードProfile card or File Hover card on any column 2) プロファイル カードやホバー カードのビューの書式設定Profile card or Hover card with view formatting

既定のファイル カードで書式設定されたファイル名へのポイントHover on a filename with formatting with default file card

プレビュー画像 3

既定のプロファイル カードで書式設定されたユーザー列へのポイントHover on a person column with formatting with default Profile card

プレビュー画像 4

どちらの例も、defaultHoverField を使用しますBoth the example uses 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": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Editor.email]",
                "title": "[$Editor.title]"
            }
        },
        {
            "elmType": "span",
            "style": {
                "vertical-align": "middle",
                "margin-left": "2px"
            },
            "txtContent": "[$Editor.title]"
        }
    ],
    "defaultHoverField": "[$Editor]"
}

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

ユーザーは別の列/ビューフォーマッタ内の列のフォーマッタ JSON を参照することができ、他の要素と共にカスタムの列可視化を構築することができます。Users can refer to a column's formatter JSON inside another column/view formatter and use it along with other elements to build a custom column visualization. これは、 columnFormatterReference プロパティを使用して行うことができます。This can be done by using columnFormatterReference property.

次の画像は、カテゴリ列フォーマッタを参照するギャラリーレイアウトを含むリストを示しています。The following image shows a list with a Gallery layout referencing the Category column formatter: Gallery layout referring Category column

List layout with Category column formatted
{
  "$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]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

サポートされている列の種類Supported column types

次の種類の列は、列の書式設定をサポートしています。The following column types support column formatting:

  • 集計値Calculated
  • 選択Choice
  • ContentTypeContentType
  • Counter (ID)Counter (ID)
  • 通貨Currency
  • 日付/時刻Date/Time
  • HyperlinkHyperlink
  • イメージImage
  • 場所Location
  • ルックアップLookup
  • 複数の選択Multi-Choice
  • 複数行テキストMulti-Line Text
  • 複数の人物Multi-Person
  • 数字Number
  • 人物またはグループPerson or Group
  • 画像Picture
  • 1 行テキストSingle line of text
  • (リスト内の) タイトルTitle (in Lists)
  • はい/いいえYes/No

現在、以下は サポートされていませんThe following are currently not supported:

  • 管理されたメタデータManaged Metadata
  • ファイル名 (ドキュメント ライブラリ内)Filename (in Document Libraries)
  • 保持ラベルRetention Label
  • シールされた列Sealed columns
  • リッチ テキストが強化された複数行のテキスト列Multi-Line Text column with enhanced rich text

スタイル ガイドラインStyle guidelines

定義済みのクラスPredefined classes

いくつかの一般的なシナリオでは、次の定義済みのクラスを使用できます。You can use the following predefined classes for several common scenarios.

クラス名Class name スクリーンショットScreenshot
sp-field-customFormatBackgroundsp-field-customFormatBackground 背景を使用するすべてのクラスのパディングとマージンを指定します。Specifies the padding and margins for all classes that use backgrounds.
sp-field-severity--goodsp-field-severity--good 「完了」のテキストとチェック マークをもつ緑のボックス
sp-field-severity--lowsp-field-severity--low 「進行中」のテキストと矢印を含む白いボックス
sp-field-severity--warningsp-field-severity--warning 「レビュー中」のテキストと危険のアイコンを含む黄色のボックス
sp-field-severity--severeWarningsp-field-severity--severeWarning 「問題あり」のテキストと危険のアイコンを含むオレンジのボックス
sp-field-severity--blockedsp-field-severity--blocked 「ブロック」のテキストと X アイコンを含む赤いボックス
sp-field-dataBarssp-field-dataBars 数値 4 を含む青いバー
sp-field-trending--upsp-field-trending--up 数値 500 と緑色の矢印
sp-field-trending--downsp-field-trending--down 数値 100 と赤の矢印
sp-field-quickActionssp-field-quickActions 名前とメール アイコン

注意

上に示す sp-field-severity クラスのアイコンは、クラスの一部では ありませんThe icons shown above for the sp-field-severity classes are NOT part of the class. 背景色のみが含まれます。Only the background color is included. アイコンは、iconName 属性を使用して追加することができます。Icons can be added by using the iconName attribute.

上記のクラス以外にも、Office UI Fabric によって定義されたクラス (テーマの色、文字体裁、グリッド システムなど) を使用できます。In addition to the classes listed above, the classes (such as the theme color, typography, grid system, etc.) defined by the Office UI Fabric can be used. 詳しくは、Fabric Web サイト を参照してください。For details, see the Fabric website.

定義済みのアイコンPredefined icons

Office UI ファブリックの定義済みアイコンを使用できます。You can use predefined icons from Office UI Fabric. 詳しくは、ファブリック Web サイト を参照してください。For details, see the Fabric website.

カスタム JSON の作成Creating custom JSON

ユーザーがスキーマを理解している場合は、カスタムの列の書式設定JSONを一から作成するのが簡単になりました。設定ウィンドウに事前入力されたJSON列スキーマ参照と一緒にモナコエディターが組み込まれており、列書式を作成する際に役立ちます。モナコエディターには検証とオートコンプリートがあるので、正しい JSON を作成できます。Creating custom column formatting JSON from scratch is simple if user understands the schema, Monaco Editor is integrated in the formatting pane with pre-filled JSON column schema reference to assist in creation of column formatting, Monaco editor has validation and autocomplete to help in crafting right JSON. JSON の追加は、スキーマの場所を定義する最初の行の後から始めます。User can start adding JSON after the first line that defines the schema location.

ヒント

プロパティや値の候補を表示するには、任意の時点で、Ctrl+スペース を選択します。At any point, select Ctrl+Space for property/value suggestions.

ヒント

HTMLとCSS をインラインスタイルのフォーマッタ JSON に変換するができる フォーマッタヘルパーツールを使用して HTML から開始することができます。You can start from a HTML using formatter helper tool, which can convert HTML and CSS into formatter JSON with inline styles.

ヒント

SharePoint のパターンとプラクティスは、ブラウザーで書式の編集と適用を直接行える、無料の Web パーツの Column Formatter を提供します。SharePoint Patterns and Practices provides a free web part, Column Formatter, that can be used to edit and apply formats directly in the browser.

詳しい構文のリファレンスDetailed syntax reference

elmTypeelmType

作成する要素の種類を指定します。Specifies the type of element to create. 有効な要素は次のとおりです。Valid elements include:

  • divdiv
  • spanspan
  • aa
  • imgimg
  • svgsvg
  • pathpath
  • buttonbutton

その他の値を指定すると、エラーが発生します。Any other value will result in an error.

ボタン要素button elements

Button 要素を使用すると、親アイテムで特定のアクションを起動することができます。Button elements can be used to launch a specific action on the parent item. すべての button 要素は、ボタンがクリックされたときに取得される action を指定する customRowAction という必須のプロパティを持っています。Every button element has a required property, customRowAction, that specifies an action that's taken when the button is clicked. このアクションは、次のいずれかの値である必要があります。This action must be one of the following values:

  • defaultClick: このアクションのボタンは、カスタマイズされていないビューでリスト アイテムをクリックした場合と同じ操作を実行します。defaultClick: buttons with this action will do the same thing as clicking the list item in an uncustomized view. 以下は、クリックするとアイテムのクリックをシミュレートするボタンの例です。これにより、リストアイテムが開きます。Below is an example of a button that, when clicked, simulates a click on the item, which results in opening the list item. このサンプル ボタンをドキュメント ライブラリに追加すると、ファイルまたはフォルダーのクリックがシミュレートされ、ファイルまたはフォルダーが開きます。Adding this example button to a document library simulates a click on the file or folder, which results in the file or folder being opened.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}

  • share: ボタンをクリックすると、共有ダイアログ ボックスが開きます。share: Clicking the button will open the sharing dialog. このボタンのタイプの例を以下に示します。Below is an example of this type of button.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Share this item",
  "customRowAction": {
    "action": "share"
  }
}

  • delete: ボタンをクリックすると、削除の確認のダイアログ ボックスが開きます。delete: Clicking the button will open the delete confirmation dialog.
  • editProps: ボタンをクリックすると、アイテム プロパティのページが編集モードで開きます。editProps: Clicking the button will open the item properties page in edit mode.
  • executeFlow: ボタンをクリックすると、actionParams 属性の ID 内で指定されている特定のフローが起動します。executeFlow: Clicking the button will launch the specified Flow, specified by ID inside the actionParams attribute. このボタンの例は、「フローを起動するためのボタンの作成」を参照してください。For an example of this, see the Create a button to launch a Flow section in this document. このボタンの種類の例を以下に示します。Below is an example of this type of button.
{
  "$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 属性には次のオプションがあります。The actionParams attribute can have the following options when using the executeFlow action:

  • id: フローの ID での起動 (必須)id: ID of the Flow to launch (required)
  • headerText: フロー パネルの上部でテキストを設定する (省略可能)headerText: Sets the text at the top of the flow panel (optional)
  • runFlowButtonText: フロー パネルにプライマリ ボタンのテキストを設定する (省略可能)runFlowButtonText: Sets the text of the primary button in the flow panel (optional)

txtContenttxtContent

elmType で指定した要素のテキスト コンテンツを任意に指定するプロパティ。An optional property that specifies the text content of the element specified by elmType. このプロパティの値には、文字列 (特殊な文字列を含む) または式オブジェクトを指定できます。The value of this property can either be a string (including special strings) or an Expression object.

stylestyle

elmType で指定した要素に適用するスタイル属性を任意に指定するプロパティ。An optional property that specifies style attributes to apply to the element specified by elmType. これは、CSS の名前と値に対応する名前と値のペアを持つオブジェクトです。This is an object with name-value pairs that correspond to CSS names and values. スタイル オブジェクトの各属性の値には文字列 (特殊な文字列を含む) または式オブジェクトを指定できます。The values of each property in the style object can either be a string (including special strings) or an Expression object. 次のスタイル属性を使用できます。The following style attributes are allowed.

'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'

次の例は、スタイル オブジェクトの値を示します。The following example shows the value of a style object. この例では、2 つのスタイルのプロパティ (paddingbackground-color) が適用されます。In this example, two style properties (padding and background-color) will be applied. padding の値は、ハード コーディングされた文字列値です。The padding value is a hard-coded string value. background-color の値は、現在のフィールド (@currentField で指定) の値が 40 未満かどうかに応じて赤 (#ff0000) または緑 (#00ff00) のいずれかに評価される式です。The background-color value is an Expression that is evaluated to either red (#ff0000) or green (#00ff00) depending on whether the value of the current field (specified by @currentField) is less than 40. 詳細については、式オブジェクトのセクションを参照してください。For more information, see the Expression object section.

{
   "$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 形式の式の構文を使用しています。Here's the same sample from above, using the Excel-style expression syntax:

{
   "$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 で指定した要素に追加するさらなる属性を任意に指定するプロパティ。An optional property that specifies additional attributes to add to the element specified by elmType. これは、名前と値のペアを持つオブジェクトです。This is an object with name-value pairs. この属性の名前は、次のいずれかである必要があります。Attribute names must be one of the following:

  • hrefhref
  • relrel
  • srcsrc
  • classclass
  • targettarget
  • titletitle
  • rolerole
  • iconNameiconName
  • dd
  • ariaaria
  • データ傍受data-interception
  • viewBoxviewBox
  • preserveAspectRatiopreserveAspectRatio

その他の属性を指定すると、エラーが発生します。Any other attribute name will result in an error. 属性の値は式オブジェクトまたは文字列とすることができます。Attribute values can either be Expression objects or strings. 次の例では、2 つの属性 (targethref) を elmType により指定された要素に追加します。The following example adds two attributes (target and href) to the element specified by elmType. target 属性は、文字列にハードコードされています。The target attribute is hard-coded to a string. href 属性は、実行時に http://finance.yahoo.com/quote/ + 現在のフィールド値 (@currentField) に評価される式です。The href attribute is an expression that will be evaluated at runtime to http://finance.yahoo.com/quote/ + the value of the current field (@currentField).

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

childrenchildren

elmType で指定した要素の子要素を任意に指定するプロパティ。An optional property that specifies child elements of the element specified by elmType. この値は elm オブジェクトの配列として指定します。The value is specified as an array of elm objects. 任意のレベルの入れ子にすることができます。There can be an arbitrary level of nesting. 要素に txtContent プロパティがある場合、子のプロパティは無視されます。If an element has the txtContent property, the child properties are ignored.

debugModedebugMode

デバッグで使用する、任意のプロパティです。An optional property that is meant for debugging. エラー メッセージを出力し、コンソールに警告を記録します。It outputs error messages and logs warnings to the console.

forEachforEach

特定の複数値フィールドの各メンバーについて、要素自体の重複を許可するオプション プロパティ。An optional property that allows an element to duplicate itself for each member of a specific multi-value field. "forEach" プロパティの値は、"iteratorName in @currentField" または "iteratorName in [$FieldName]" のいずれかの形式である必要があります。The value of "forEach" property should be in the format of either "iteratorName in @currentField" or "iteratorName in [$FieldName]".

iteratorName は、複数値フィールドの現在のメンバーを表すために使用される反復子変数の名前を表します。iteratorName represents the name of iterator variable that is used to represent the current member of the multi-value field. 反復子の名前は英数字とアンダー スコア (_) の任意の組み合わせにすることができますが、数字で始まってはいけません。The name of the iterator can be any combination of alphanumeric characters and underscore (_) that does not start with a digit.

ループで使用されるフィールドは、複数値オプションを有効にできるサポートされているフィールドの種類 (人物、ルックアップ、選択肢) である必要があります。The field used in the loop must be in a supported field type with multi-value option enabled: Person, Lookup, and Choice.

forEach のある要素かその子要素では、反復子変数は新しいフィールドであるかのように参照することができます。In the element with forEach or its children elements, the iterator variable can be referred as if it is a new field. 反復子のインデックスは、loopIndex 演算子でアクセスできます。The index of the iterator can be accessed with loopIndex operator.

forEach はルート要素に適用することはできず、フィールドに値がない場合は要素はレンダリングされません。forEach cannot be applied to the root element, and will render no element if there is no value in the field.

例については、ここを参照してください。See here for examples.

Expressions

実行時に、現在のフィールド (または行) のコンテキストに基づき、実行時に評価できるよう、txtContent の値、スタイルのプロパティ、および属性のプロパティを式として表現します。Values for txtContent, style properties, and attribute properties can be expressed as expressions, so that they are evaluated at runtime based on the context of the current field (or row). 式オブジェクトは、別の式オブジェクトを入れ子にできます。Expression objects can be nested to contain other Expression objects.

式は、SharePoint Online の Excel 形式の式、または SharePoint Online および SharePoint 2019 の抽象構文ツリーの式を使用して記述できます。Expressions can be written using Excel-style expressions in SharePoint Online, or by using Abstract Syntax Tree expressions in SharePoint Online and SharePoint 2019.

Excel 形式の式Excel-style expressions

Excel 形式の式はすべて等号 (=) で始まります。All Excel-style expressions begin with an equal (=) sign. このスタイルの式は、SharePoint Online でのみ使用できます (SharePoint 2019 では使用不可)。This style of expression is only available in SharePoint Online (not SharePoint 2019).

この単純な条件付き書式は、@me[$Author.email] と等しくない場合は none と評価され、それ以外の場合は `` と評価されます。This simple conditional expression evaluates to none if @me is not equal to [$Author.email], and evaluates to `` otherwise:

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

より複雑な if/else ステートメントは、次のように書きます。More complex if/else statements can be written like this:

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

1 つまたは 2 つのオペランドを取る非条件演算子は、次のように書きます。Non-conditional operators that take one or two operands can be written like this:

=[$foo] * -7 
=sin(@currentField) 
=toString(60 + (sin(6.2831853 * @currentField) * 60)) 

抽象構文ツリーの式Abstract Syntax Tree expressions

次の例には、次の式を実行する式オブジェクトが含まれています。The following example contains an Expression object that performs the following 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
                     ]
                  }
               ]
            },
            "%"
         ]
      }
   ]
}

演算子Operators

演算子は、実行する演算の種類を指定します。Operators specify the type of operation to perform. 有効な値は次のとおりです。The following operators are valid values:

  • +
  • -
  • /
  • *
  • <
  • >
  • %
  • ==
  • !=!=
  • <=
  • >=
  • ||
  • &&
  • toString()toString()
  • Number()Number()
  • Date()Date()
  • coscos
  • sinsin
  • ??
  • ::
  • toLocaleString()toLocaleString()
  • toLocaleDateString()toLocaleDateString()
  • toLocaleTimeString()toLocaleTimeString()
  • indexOfindexOf
  • toLowerCasetoLowerCase
  • joinjoin
  • lengthlength
  • absabs
  • loopIndexloopIndex
  • floorfloor
  • ceilingceiling
  • powpow
  • substringsubstring
  • getDategetDate
  • getMonthgetMonth
  • getYeargetYear
  • toUpperCasetoUpperCase
  • lastIndexOflastIndexOf
  • startsWithstartsWith
  • endsWithendsWith
  • replacereplace
  • padStartpadStart
  • padEndpadEnd

二項算術演算子 - 2 つのオペランドを必要とする標準的な算術二項演算子を次に示します。Binary arithmetic operators - The following are the standard arithmetic binary operators that expect two operands:

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

単項演算子 - 1 つのオペランドのみを必要とする標準的な算術単項演算子を次に示します。Unary operators - The following are standard unary operators that expect only one operand:

  • toString(): オブジェクトを表す文字列を返しますtoString(): returns a string representing the object

    • "txtContent": "=toString(45)" の結果は "45" になります"txtContent": "=toString(45)" results in "45"
  • Number(): 数値を返します (オペランドが数値ではない場合は NaN が返されます)Number(): returns the numeric value, if the operand is not a number, NaN is returned

    • "txtContent": "=Number('365')" の結果は 365 になります"txtContent": "=Number('365')" results in 365
    • "txtContent": "=Number('Wowee')" の結果は NaN になります"txtContent": "=Number('Wowee')" results in NaN
    • "txtContent": "=Number(Date('12/26/1981'))" の結果は 378190800000 になります"txtContent": "=Number(Date('12/26/1981'))" results in 378190800000
  • Date(): パラメーターから DateTime オブジェクトを返します (文字列または数値をロケールに依存する日付に変換します)Date(): returns a datetime object from the parameter (converts strings or numbers to dates, sensitive to locale)

    • "txtContent": "=Date('12/26/1981')" の結果は 12/26/1981, 12:00:00 AM になります"txtContent": "=Date('12/26/1981')" results in 12/26/1981, 12:00:00 AM
  • cos: 指定した角度のコサインを返します (ラジアン単位で指定する必要があります)cos: returns the cosine of the specified angle which should be specified in radians

    • "txtContent": "=cos(5)" の結果は 0.28366218546322625 になります"txtContent": "=cos(5)" results in 0.28366218546322625
  • sin: 数値のサインを返しますsin: returns the sine of a number

    • "txtContent": "=sin(90)" の結果は 0.8939966636005579 になります"txtContent": "=sin(90)" results in 0.8939966636005579
  • toLocaleString(): Date を言語に依存する表現で返しますtoLocaleString(): returns a language sensitive representation of a date

    • "txtContent":"=toLocaleString(@now)" の結果はユーザーのロケールに応じて異なりますが、en-us の場合は "2/5/2019, 1:22:24 PM" のようになります"txtContent":"=toLocaleString(@now)" results vary based on user's locale, but en-us looks like "2/5/2019, 1:22:24 PM"
  • toLocaleDateString(): Date の日付部分のみを言語に依存する表現で返しますtoLocaleDateString(): returns a language sensitive representation of just the date portion of a date

    • "txtContent":"=toLocaleDateString(@now)" の結果はユーザーのロケール応じて異なりますが、en-us の場合は "2/5/2019" のようになります"txtContent":"=toLocaleDateString(@now)" results vary based on user's locale, but en-us looks like "2/5/2019"
  • toLocaleTimeString(): Date の時間部分を言語に依存する表現で返しますtoLocaleTimeString(): returns a language sensitive representation of just the time portion of a date

    • "txtContent":"=toLocaleTimeString(@now)" の結果はユーザーのロケールに応じて異なりますが、en-us の場合は "1:22:24 PM" のようになります"txtContent":"=toLocaleTimeString(@now)" results vary based on user's locale, but en-us looks like "1:22:24 PM"
  • toLowerCase: 小文字に変換された値を返します (文字列に対してのみ有効) - SharePoint Online でのみ使用可能toLowerCase: returns the value converted to lower case (only works on strings) - Only available in SharePoint Online

    • "txtContent":"=toLowerCase('DogFood')" の結果は "dogfood" になります"txtContent":"=toLowerCase('DogFood')" results in "dogfood"
  • abs: 指定した数値の絶対値を返します - SharePoint Online でのみ使用可能abs: returns the absolute value for a given number - Only available in SharePoint Online

    • "txtContent":"=abs(-45)" の結果は 45 になります"txtContent":"=abs(-45)" results in 45
  • length: 配列内の項目数を返します (複数選択の個人フィールドまたは選択肢フィールド)。その他すべての値型については、true の場合は 1、false の場合は 0 を返します。length: returns the number of items in an array (multi-select person or choice field), for all other value types it returns 1 when true and 0 when false. これは、文字列値の長さは指定しません (このような操作については、後述する indexOf 回避策を参照してください)。It does NOT provide the length of a string value (see the indexOf workaround explained later on for such operation). - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=length(@currentField)" は、選択された値が 2 つある場合は 2 を返します"txtContent":"=length(@currentField)" might result in 2 if there are 2 selected values
    • "txtContent":"=length('Some Text')" の結果は 1 になります"txtContent":"=length('Some Text')" results in 1
    • "txtContent":"=length('')" の結果は 0 になります"txtContent":"=length('')" results in 0
    • "txtContent":"=length(45)" の結果は 1 になります"txtContent":"=length(45)" results in 1
    • "txtContent":"=length(0)" の結果は 0 になります"txtContent":"=length(0)" results in 0
  • floor: 指定した数値以下の最大の整数を返します。floor: returns the largest integer less than or equal to a given number. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=floor(45.5)"の結果は 45 になります"txtContent":"=floor(45.5)" results in 45
  • ceiling: 指定した数値を次に大きい整数 (whole number) または整数 (integer) に切り上げます。ceiling: rounds the given number up to the next largest whole number or integer. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=ceiling(45.5)"の結果は 46 になります"txtContent":"=ceiling(45.5)" results in 46
  • getDate: 指定した日付の月の日を返します。getDate: returns the day of the month of the given date. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=getDate(Date('12/26/1981'))"の結果は 26 になります"txtContent":"=getDate(Date('12/26/1981'))" results in 26
  • getMonth: ゼロベースの (ゼロが年の最初の月を示す) 値として、ローカル時間に従って指定した日付の月を返します。getMonth: returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year). - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=getMonth(Date('12/26/1981'))"の結果は 11 になります"txtContent":"=getMonth(Date('12/26/1981'))" results in 11
  • getYear: 指定した日付の年を返します。getYear: returns the year of the given date. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=getYear(Date('12/26/1981'))"の結果は 1981 になります"txtContent":"=getYear(Date('12/26/1981'))" results in 1981
  • toUpperCase: 大文字に変換された値を返します (文字列に対してのみ有効) - SharePoint Online でのみ使用可能toUpperCase: returns the value converted to upper case (only works on strings) - Only available in SharePoint Online

    • "txtContent":"=toUpperCase('DogFood')" の結果は "DOGFOOD" になります"txtContent":"=toUpperCase('DogFood')" results in "DOGFOOD"

二項演算子 - 2 つのオペランドを必要とする演算子を次に示します。Binary operators - The following are operators that expect two operands:

  • indexOf: 2 つのオペランドを取ります。indexOf: takes 2 operands. 最初のテキストが検索範囲になり、2 番目のテキストが検索対象になります。The first is the text you would like to search within, the second is the text you would like to search for. 文字列内で検索語句が最初に出現した位置のインデックス値を返します。Returns the index value of the first occurrence of the search term within the string. インデックスは 0 から始まります。Indexes start at 0. テキスト内に検索語句が見つからなかった場合は、-1 が返されます。If the search term is not found within the text, -1 is returned. この演算子では大文字と小文字が区別されます。This operator is case-sensitive. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent": "=indexOf('DogFood', 'Dog')" の結果は 0 になります"txtContent": "=indexOf('DogFood', 'Dog')" results in 0
    • "txtContent": "=indexOf('DogFood', 'F')" の結果は 3 になります"txtContent": "=indexOf('DogFood', 'F')" results in 3
    • "txtContent": "=indexOf('DogFood', 'Cat')" の結果は -1 になります"txtContent": "=indexOf('DogFood', 'Cat')" results in -1
    • "txtContent": "=indexOf('DogFood', 'f')" の結果は -1 になります"txtContent": "=indexOf('DogFood', 'f')" results in -1
  • join: 2 つのオペランドを取ります。join: takes 2 operands. 最初のものは配列 (複数選択の個人フィールドまたは選択肢フィールド) であり、2 番目のものは区切り文字列です。The first is an array (multi-select person or choice field) and the second is the separating string. 区切り文字列で区切られた配列値による文字列の連結を返します。Returns a string concatenation of the array values separated by the separating string. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent": "=join(@currentField, ', ')" の結果は "Apple, Orange, Cherry" になります (選択した値に応じて異なります)"txtContent": "=join(@currentField, ', ')" might result in "Apple, Orange, Cherry" (depending on the selected values)
    • "txtContent": "=join(@currentField.title, '|')" の結果は "Chris Kent|Vesa Juvonen|Jeff Teper" になります (選択した個人によって異なります)"txtContent": "=join(@currentField.title, '|')" might result in "Chris Kent|Vesa Juvonen|Jeff Teper" (depending on the selected persons)
  • pow: 基数を指数のべき乗で返します。pow: returns the base to the exponent power. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=pow(2,3)" の結果は 8 になります"txtContent":"=pow(2,3)" results in 8
  • lastIndexOf: 文字列の指定した値の最後の出現位置を返しますlastIndexOf: returns the position of the last occurrence of a specified value in a string

    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" の結果は 8 になります"txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" results in 8
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'F')" の結果は 11 になります"txtContent": "=lastIndexOf('DogFood DogFood', 'F')" results in 11
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')" の結果は -1 になります"txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')" results in -1
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'f')" の結果は -1 になります"txtContent": "=lastIndexOf('DogFood DogFood', 'f')" results in -1
  • startsWith: 指定した文字列の文字で始まるかどうかを決定しますstartsWith: determines whether a string begins with the characters of a specified string

    • "txtContent":"=startsWith('DogFood', 'Dog')" の結果は true になります"txtContent":"=startsWith('DogFood', 'Dog')" results in true
    • "txtContent":"=startsWith('DogFood', 'Food')" の結果は false になります"txtContent":"=startsWith('DogFood', 'Food')" results in false
  • endsWith: 指定した文字列の文字で終わるかどうかを決定しますendsWith: determines whether a string ends with the characters of a specified string

    • "txtContent":"=endsWith('DogFood', 'Dog')" の結果は false になります"txtContent":"=endsWith('DogFood', 'Dog')" results in false
    • "txtContent":"=endsWith('DogFood', 'Food')" の結果は true になります"txtContent":"=endsWith('DogFood', 'Food')" results in true

三項演算子 - 3 つのオペランドを必要とする演算子を次に示します。Ternary operators - The following are operators that expect three operands:

  • substring: 開始インデックスと終了インデックスの間の文字列の一部を返します。substring: returns the part of the string between the start and end indices. - SharePoint Online でのみ使用可能 - Only available in SharePoint Online

    • "txtContent":"=substring('DogFood', 3, 4)" の結果は F になります"txtContent":"=substring('DogFood', 3, 4)" results in F
    • "txtContent":"=substring('DogFood', 4, 3)" の結果は F になります"txtContent":"=substring('DogFood', 4, 3)" results in F
    • "txtContent":"=substring('DogFood', 3, 6)" の結果は Foo になります"txtContent":"=substring('DogFood', 3, 6)" results in Foo
    • "txtContent":"=substring('DogFood', 6, 3)" の結果は Foo になります"txtContent":"=substring('DogFood', 6, 3)" results in Foo

    substring() メソッドは、開始インデックスと終了インデックスの間に位置する文字列の一部または文字列の末尾までを返します。The substring() method returns the part of the string between the start and end indexes, or to the end of the string.

  • replace: 文字列で指定された値を検索し、指定された値が置き換えられた新しい文字列を返しますreplace: searches a string for a specified value and returns a new string where the specified value is replaced. 値の最初のインスタンスのみが置き換えられますOnly the first instance of the value will be replaced.

    • "txtContent":"=replace('Hello world', 'world', 'everyone')" の結果は Hello everyone になります"txtContent":"=replace('Hello world', 'world', 'everyone')" results in Hello everyone
  • padStart: 結果の文字列が指定された長さに達するまで、現在の文字列を別の文字列で埋め込みます。padStart: pads the current string with another string until the resulting string reaches the given length. 埋め込みは現在の文字列の先頭から適用されます。The padding is applied from the start of the current string.

    • "txtContent":"=padStart('DogFood', 10, 'A')" の結果は AAADogFood になります"txtContent":"=padStart('DogFood', 10, 'A')" results in AAADogFood
    • "txtContent":"=padStart('DogFood', 10, 'AB')" の結果は ABADogFood になります"txtContent":"=padStart('DogFood', 10, 'AB')" results in ABADogFood
    • "txtContent":"=padStart('DogFood', 5, 'A')" の結果は DogFood になります"txtContent":"=padStart('DogFood', 5, 'A')" results in DogFood
  • padEnd: 結果の文字列が指定された長さに達するまで、現在の文字列を別の文字列で埋め込みます。padEnd: pads the current string with a given string until the resulting string reaches the given length. 埋め込みは現在の文字列の末尾から適用されます。The padding is applied from the end of the current string.

    • "txtContent":"=padEnd('DogFood', 10, 'A')" の結果は DogFoodAAA になります"txtContent":"=padEnd('DogFood', 10, 'A')" results in DogFoodAAA
    • "txtContent":"=padEnd('DogFood', 10, 'AB')" の結果は DogFoodABA になります"txtContent":"=padEnd('DogFood', 10, 'AB')" results in DogFoodABA
    • "txtContent":"=padEnd('DogFood', 5, 'A')" の結果は DogFood になります"txtContent":"=padEnd('DogFood', 5, 'A')" results in DogFood

条件演算子 - 条件演算子は以下のとおりです。Conditional operator - The conditional operator is:

  • ?: 抽象木構文で記述される条件演算子は、その演算子として ? を使用します。?: Conditional operations written in Abstract Tree Syntax use ? as the operator. これにより、a ?This is to achieve an expression equivalent to a ? b: c と等価な式を実現します。a の評価が true の場合は結果が b になり、それ以外の場合は結果が c になります。b : c, where if the expression a evaluates to true, then the result is b, else the result is c. Excel スタイルの式では、こうした式を if ステートメントで記述します。For Excel style expressions you write these with an if statement. どちらにしても、3 つのオペランドが存在します。Regardless, there are 3 operands. 最初のものは評価する条件です。The first is the condition to evaluate. 2 つ目は条件が true の場合の結果です。The second is the result when the condition is true. 3 つ目は条件が false の場合の結果です。The third is the result when the condition is false.
    • "txtContent":"=if(4 < 5, 'yes', 'no')" の結果は "yes" になります"txtContent":"=if(4 < 5, 'yes', 'no')" results in "yes"
    • "txtContent":"=if(4 > 5, 'yes', 'no')" の結果は "no" になります"txtContent":"=if(4 > 5, 'yes', 'no')" results in "no"

複数値フィールドに関連する演算子 - 次の演算子は、人物、ルックアップ、選択肢の種類の複数値フィールドのコンテキストでのみ使用します。Multi-value field-related operators - The following operators are only used in a context with multi-value field of type Person, Lookup, or Choice.

  • lengthlength
  • joinjoin
  • loopIndexloopIndex

length は、フィールド名を指定すると、複数値フィールドのメンバーの数を返します。length, when provided with a field name, returns the number of members in a multi-valued field. 単一値フィールドを指定すると、length はそのフィールドに値がある場合には 1 を返します。When a single-value field is provided, length will return 1 when there is a value in that field.

join は、指定した区切り記号で複数値フィールドの値を連結します。join concatenates values in a multi-value field with a specified separator. 最初のオペランドが複数値フィールドの値を指します (例: "@currentField.lookupValue""[$AssignedTo.title]")。The first operand shall point to a value in a multi-value field, e.g. "@currentField.lookupValue", "[$AssignedTo.title]". 2 番目のオペランドは、値を一つに連結する区切り文字の文字列リテラル値になります。The second operand shall be a string literal that is the separator that joins the values together.

loopIndex は、反復子変数の名前を指定する場合は、反復子の現在のインデックス (0 から始まる) を返します。loopIndex, when provided with a name of iterator variable, returns the current index (starting from 0) of the iterator. 反復子の名前は、文字列リテラルとして指定する必要があります。The name of iterator must be provided as a string literal. loopIndex は、それぞれの forEach が有効になっている要素内、またはその子要素要素内でのみ動作します。loopIndex would only work within the element with respective forEach enabled or its children elements.

例については、ここを参照してください。See here for examples.

文字列関連の演算子 - 文字列値を扱うときには、以前説明した演算子のいくつかを使用することができます。String related operators - Some of the previously detailed operators can be used when working with string values

  • +
  • indexOf (文字列の長さについての回避策)indexOf ( for string length workaround )

+ は、文字列を連結する必要がある場合に使用することができます。 たとえば、このようになります: "txtContent": "=[$column1] + ' ' + [$column2] + 'some other text"+ can be used when there is a need to concatenate strings, for instance : "txtContent": "=[$column1] + ' ' + [$column2] + 'some other text"

indexOf 演算子 length は文字列値型に対しては動作しないので (1 や 0 を返す)、indexOf は文字列の長さを取得する場合の良い回避策となります。たとえば、indexOf([$column1] + '^', '^') のようになります。indexOf Since the operator length doesn't work for string value types ( it will return 1 or 0 ), indexOf can serve us as a nice workaround to get the length of a string, for instance: indexOf([$column1] + '^', '^'). 文字列の末尾を特定するには、'^' などの文字を使用します。We will use '^' or any other character we may want to use to find out the end of the string.

オペランドoperands

式のパラメーターやオペランド指定します。Specifies the parameters, or operands for an expression. これは、式のオブジェクトまたは基本的な値の配列です。This is an array of Expression objects or base values.

特別な文字列値Special string values

txtContent、スタイル、および属性の値には文字列または式オブジェクトを指定できます。The values for txtContent, styles, and attributes can be either strings or Expression objects. リストと、ユーザーのコンテキスト内のフィールドから値を取得するためのいくつかの特別な文字列パターンがサポートされています。A few special string patterns for retrieving values from the fields in the list and the user's context are supported.

"@currentField""@currentField"

現在のフィールドの値として評価されます。Will evaluate to the value of the current field.

一部のフィールドの種類はオブジェクトとして表されます。Some field types are represented as objects. オブジェクトから値を出力するには、そのオブジェクト内の特定のプロパティを参照してください。To output a value from an object, refer to a particular property inside that object. たとえば、現在のフィールドが人物/グループのフィールドであれば、担当者の名前を取得するには @currentField.title を指定します。通常、これはリスト ビューに表示されます。For example, if the current field is a person/group field, specify @currentField.title to retrieve the person's name, which is normally displayed in list views. プロパティのリストを持つオブジェクトとして表されるフィールドの種類を次に示します。The following are the field types that are represented as objects with a list of their properties.

注意

@currentField.title は既定で個人の名前を返します。The @currentField.title returns a person's name by default. ただし、個人フィールドの Show Field が調整されている場合は、title プロパティの値が変更されることがあります。However, if the person field's Show Field has been adjusted, it may change the value of the title property. たとえば、Department として構成された Show Field がある個人フィールドには、title プロパティの個人の部署があります。For example, a person field with the Show Field configured as Department will have the person's department for the title property.

人物フィールドPeople fields

人物フィールド オブジェクトには、次のプロパティ (例の値) があります。The people field object has the following properties (with example values):

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

"ユーザー" フィールドは、書式設定と一緒にプロファイルのホバー カードを持つことができますPeople field can have profile hover cards along with formatting

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

日付/時刻フィールドDate/Time fields

日付/時刻型フィールドの値は、表示する形式に応じて異なる方法で取得できます。The value of Date/Time fields can be retrieved a few different ways, depending on the date format you'd like to display. 日付型の値を特定の形式に変換するために、次のメソッドがサポートされています。The following methods for converting date values to specific formats are supported:

  • toLocaleString()-日付型を完全に展開し、日付、時刻を含めて表示します。toLocaleString() - Displays a date type fully expanded with date and time.
  • toLocaleDateString()-日付型の日付だけを表示します。toLocaleDateString() - Displays a date type with just the date.
  • toLocaleTimeString()-日付型の時刻だけを表示します。toLocaleTimeString() - Displays a date type with just the time.

たとえば、次の JSON は現在のフィールド (日付フィールドであると仮定) を日付と時刻の文字列として表示します。For example, the following JSON will display the current field (assuming it's a date field) as a date and time string.

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

これは上記と同じサンプルで、Excel 形式の式の構文を使用しています。Here's the same sample from above, using the Excel-style expression syntax:

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

場所フィールドLocation fields

場所フィールド オブジェクトには、次のプロパティ (サンプル値付き) があります。The location field object has the following properties (with example values):

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

注意

現在、場所フィールドには、リスト ビューの [この列の書式を設定する] オプションがありませんので、これらのフィールドに書式が直接適用されるには、フィールドの設定を使用して行われる必要があります。Location fields do not currently have a "Format this column" option in the list view and formats applied directly to these fields will need to be done through field settings.


次の例では、現在のフィールドで場所フィールドを活用する方法を示します。The following example shows how a location field might be used on a current field.

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

ルックアップ フィールドLookup fields

ルックアップ フィールド オブジェクトには、次のプロパティ (例の値) があります。The lookup field object has the following properties (with example values):

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

次の例では、現在のフィールドにルックアップ フィールドを活用する方法を示します。The following example shows how a lookup field might be used on a current field.

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

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

ハイパーリンク フィールド オブジェクトには、次のプロパティがあります (値の例を示します)。The hyperlink field object has the following property (with example value):

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

URL の値を参照するには、@currentField を使用します。To reference the URL value, use @currentField.

現在のフィールドでハイパーリンク フィールドを使用する例を次に示します。The following example shows how a hyperlink field might be used on a current field.

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

画像フィールドImage fields

画像フィールド オブジェクトには、次のプロパティ (値はサンプルです) があります。The image field object has the following properties (with example values):

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


次の例では、現在のフィールドで画像フィールドを活用する方法を示します。The following example shows how an image field can be used on a current field.

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

"[$FieldName]""[$FieldName]"

列は行全体のコンテキスト内で書式設定されます。The column is formatted within the context of the entire row. このコンテキストを使用すると、[$InternalName] のように、ドル記号に続く 内部名 を角カッコで囲んで指定することにより、同じ行内の他のフィールドの値を参照することができます。You can use this context to reference the values of other fields within the same row by specifying the internal name of the field surrounded by square brackets and preceded by a dollar sign: [$InternalName]. たとえば、"MarchSales" という内部名のフィールドの値を取得するには、[$MarchSales] を使用します。For example, to get the value of a field with an internal name of "MarchSales", use [$MarchSales].

フィールドの値がオブジェクトの場合は、オブジェクトのプロパティにアクセスできます。If the value of a field is an object, the object's properties can be accessed. たとえば、"SalesLead" という名前の個人フィールドの "Title" プロパティにアクセスするには、"[$SalesLead.title]" を使用します。For example, to access the "Title" property of a person field named "SalesLead", use "[$SalesLead.title]".

"[!FieldName]""[!FieldName]"

列とビューの書式設定では、次のようにフィールドの 内部名 を角括弧で囲み、その前に感嘆符を付けることで、任意のフィールドのメタデータを参照することができます: [!InternalName]In column and view formatting, you can refer to any field's metadata by specifying the internal name of the field surrounded by square brackets and preceded by a exclamation mark: [!InternalName].

現在のフィールドの表示名はこのメタデータで利用可能で、DisplayName プロパティを使用してアクセスできます: [!SalesLead.DisplayName]Currently field's display name is available in this metadata, and can be accessed using DisplayName property: [!SalesLead.DisplayName].

"@currentWeb""@currentWeb"

これはサイトの絶対 URL に評価されます。This will evaluate to the absolute URL for the site. これはページのコンテキスト内の webAbsoluteUrl と同値です。This is equivalent to the webAbsoluteUrl value within the page context. この値は SharePoint Online でのみ使用できます。This value is only available in SharePoint Online.

"@me""@me"

これは、現在のログイン済みのユーザーのメール アドレスとして評価されます。This will evaluate to the email address of the current logged in user.

このフィールドは現在のユーザーの電子メール アドレスを表示するために使用できますが、多くの場合、条件内で使用されます。This field can be used to display the current user's email address, but more likely it will be used within conditions. 次の例は、個人フィールドの色を設定します。現在ログインしているユーザーと等しい場合は赤、そうでない場合は青に設定します。The following is an example of setting the color for a person field to red when it is equal to the current logged in user and blue otherwise:

{
   "$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 形式の式の構文を使用しています。Here's the same sample from above, using the Excel-style expression syntax:

{
   "$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""@now"

これは、現在の日付と時刻として評価されます。This will evaluate to the current date and time.

"@rowIndex""@rowIndex"

これはビュー内の行の表示されたインデックスに評価されます。This will evaluate to the rendered index of a row within a view. この値は表示位置に基づいており、ビューが並べ替えやフィルター処理されている場合でも位置に基づいて一貫性が保たれます。This value is based on render position and will remain consistent based on position even as views are sorted and filtered. インデックスは 0 から始まります。Indexes start at 0. この値は SharePoint Online でのみ使用できます。This value is only available in SharePoint Online.

ビューの書式内で値を使用して、行に代替形式を適用する例を以下に示します。Here's an example of using the value within a view format to apply alternating styles to rows:

{
  "$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.innerHeight"

これは、一覧が表示される際に、ブラウザー ウィンドウの高さ (ピクセル単位) と等しい数値に評価されます。This will evaluate to a number equal to the height of the browser window (in pixels) when the list was rendered.

"@window.innerWidth""@window.innerWidth"

これは、一覧が表示される際に、ブラウザー ウィンドウの幅 (ピクセル単位) と等しい数値に評価されます。This will evaluate to a number equal to the width of the browser window (in pixels) when the list was rendered.

サムネイルThumbnails

ドキュメント ライブラリには、ファイルのサムネイルの URL を取得するために利用できる一連のトークンがあります。それには以下が含まれます。In a document library, there is a series of tokens that can be used to retrieve the URL to the thumbnail of a file, including:

  • @thumbnail.small@thumbnail.medium@thumbnail.large は、3 種類の事前定義済みサイズでサムネイル URL に評価されます。@thumbnail.small, @thumbnail.medium, and @thumbnail.large evaluate to the thumbnail URL in 3 different predefined sizes.
  • @thumbnail.<bounding size> は、幅、高さとも境界サイズよりも大きくない最大のサムネイルへの URL に評価されます。@thumbnail.<bounding size> evaluates to the URL to the largest thumbnails that is not larger than the bounding size in both width and height. たとえば、@thumbnail.150 は 150×150 ピクセルを超えないサムネイルへの URL に評価されます。For example, @thumbnail.150 evaluates to the URL to a thumbnail not larger than 150×150 pixels.
  • @thumbnail.<bounding width>x<bounding height> は、境界の幅、境界の高さよりも大きくない最大のサムネイルへの URL に評価されます。@thumbnail.<bounding width>x<bounding height> evaluates to the URL to the largest thumbnail that is not larger than the bounding width and bounding height. たとえば、@thumbnail.100x200 は幅 100 ピクセル以下、高さ 200 ピクセル以下のサムネイルへの URL に評価されます。For example, @thumbnail.100x200 evaluates to the URL to a thumbnail not wider than 100 pixels and not higher than 200 pixels.

これらのトークンは、フォルダーなどの、ファイルでない項目については値を返しません。These tokens will yield no value on non-file items including folders.

注意

生成されたサムネイルの縦横比は、ファイルの見た目と同じで、境界サイズを変更してもサムネイルの縦横比には影響ありません。The aspect ratio of thumbnail generated is the same as how the file looks like, changing the bounding sizes will not affect the aspect ratio of the thumbnail.

ヒント

サムネイルはサポートされているファイル形式の一覧でのみ使用できます。Thumbnails are only available for a list of supported file formats. そのため、特定の形式がサポートされていないために、生成された URL にアクセスできない場合があります。It means that sometimes the URL generated is not accessible due to lack of support on certain formats. ただし、有効なサムネイル トークンが、img タグの 唯一のsrc 属性として設定されている場合は、自動的に処理され、アクセスできない場合には画像が非表示になります。However, if a valid thumbnail token is set as the only src attribute of an img tag, we will take care of it and hide the image when it is not available.

{
   "$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 を使用した既定のファイルのホバー カードDefault file hover card using FileLeafRef

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

displayValuedisplayValue

次の列の種類は、displayValue プロパティを使用して、列設定に基づいて既定の表示値を取得できますThe following column types can use displayValue property to get the default rendered value, based on the column setting

  • 日付/時刻Date/Time
  • 番号Number
  • はい/いいえYes/No
  • 通貨Currency
 {
    "elmType": "div",
    "txtContent": "@currentField.displayValue"
}

これはフィールド名にも使用できます。This also works with field name

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

列フォーマッタ参照columnFormatterReference

これは参照された列のフォーマッタ JSON に置き換えられます。This will be replaced with the referenced column's formatter JSON. 複数レベルの参照はサポートされていません。Multi level reference is not supported.

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

関連項目See also