ビューの書式設定を使用して 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.

ヒント

この記事や他の多数のコミュニティ サンプルで例示されているサンプルは、オープン ソースのリスト形式定義専用の 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-list-formatting リポジトリ内で検索できます。You can find these samples in the sp-dev-list-formatting repository within the SharePoint GitHub organization.

ビューの書式設定の作業を開始するGet started with column formatting

ビューの書式設定ウィンドウを開くには、ビューのドロップダウンを開き、[このビューを書式設定] を選択します。To open the view formatting pane, open the view dropdown and choose Format this view.

ビューの書式設定を使用する最も簡単な方法は、例を使用して特定のビューに適用できるように編集する方法です。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-list-formatting リポジトリにも、使用可能なサンプルがいくつかあります。There are also several samples available in the SharePoint/sp-dev-column-formatting repository.

条件付きクラスを適用するApply conditional classes

ビューの書式設定を使用すると、行の 1 つ以上のフィールドの値に応じて、リスト ビューの行全体に 1 つ以上のクラスを適用できます。You can use view formatting to apply one or more classes to the entire list view row depending on the value of one or more fields in the row. これらの例では、リスト ビューの行のコンテンツと構造はそのままです。These examples leave the content and structure of list view rows intact.

内部のビューの書式設定を使用するための推奨クラスの一覧については、列の書式設定の参照ドキュメントスタイル ガイドラインのセクションを参照してください。For a list of recommended classes to use inside view formats, please see the Style Guidelines section in the Column Formatting reference document.

ヒント

additionalRowClass プロパティを使用してクラスをリスト ビューの行に適用すると、個々の列の書式設定がそのまま残ります。Using the additionalRowClass property to apply classes to list view rows will leave the formatting of individual columns in place. これにより、ビューの書式設定と列の書式設定を組み合わせて、視覚エフェクトを効果的にすることができます。This allows you to combine view formats with column formatting for some really powerful visualizations.

日付フィールドに基づく条件付きのクラスConditional classes based on a date field

次の図は、日付の列の値に基づいてクラスが適用されたリスト ビューを示しています。条件付きの書式で書式設定されたビューを含む SharePoint リストThe following image shows a list view with a class applied based on the value of a date column: SharePoint list with view formatted with conditional formatting

この例では、アイテムの DueDate が現在の日付/時刻の前にある場合に、リスト ビューの行にクラス sp-field-severity--severeWarning を適用します。This example applies the class sp-field-severity--severeWarning to a list view row when the item's DueDate is before the current date/time:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
   "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', '')"
}

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

この例は、列の書式設定の例「テキストフィールドまたは選択肢フィールドの値に基づく条件付き書式設定」を採用しています。リスト ビューの行に概念を適用するうえで、重要な相違点がいくつかあります。This example was adopted from a column formatting example, Conditional formatting based on the value in a text or choice field, with some important differences to apply the concept to list view rows. 列の書式設定の例は、@currentField の値に基づいて、列にアイコンとクラスの両方を適用します。The column formatting example applies both an icon and a class to a column based on the value of @currentField. ただし、ビューの書式設定の additionalRowClass 属性はクラスのみ指定できます (アイコンは指定できません)。The additionalRowClass attribute in view formatting, however, only allows you to specify a class and not an icon. さらに、ビューの書式設定内で参照される場合、@currentField は常に Title フィールドの値に解決されるため、このサンプルは Status フィールドを直接参照します (を使用して行に適用するクラスを決定することにより)。Additionally, since @currentField always resolves to the value of the Title field when referenced inside a view format, this sample refers to the Status field directly (by using the to determine which class to apply to the row.

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good', if([$Status] == 'In progress', 'sp-field-severity--low' ,if([$Status] == 'In review','sp-field-severity--warning', if([$Status] == 'Has issues','sp-field-severity--blocked', ''))))"
}

このサンプルには次の追加情報があります。「選択肢フィールドに基づいた条件付きの書式設定You can find this sample with additional details here: Conditional formatting based on choice field

カスタムの行レイアウトを作成するBuild custom row layouts

ビューの書式設定を使用して、列の書式設定で使用する構文と同じ構文を使用することで、行内のフィールド値の完全なカスタム レイアウトを定義できます。You can use view formatting to define a totally custom layout of field values inside a row using the same syntax used in Column Formatting.

複数行のビュー スタイルMulti-line view style

次の図は、カスタムの複数行のビュー スタイルが適用されたリストを示しています。複数行のビューのカスタマイズが含まれる SharePoint リストThe following image shows a list with a custom multi-line view style applied: SharePoint list with multi-line view customization

この例では、リスト ビューの行のレンダリングを完全に上書きする rowFormatter 要素を使用しています。This example uses the rowFormatter element, which totally overrides the rendering of a list view row. この例の rowFormatter は、各リスト ビューの行に対して境界ボックス <div /> を作成します。The rowFormatter in this example creates a bounding <div /> box for every list view row. この境界ボックスの中に、$Title フィールドと $Feedback フィールドが別々の行に表示されます。Inside this bounding box, the $Title and $Feedback fields are displayed on separate lines. これらのフィールドの下に button 要素が表示されます。この要素をクリックすると、カスタマイズされていないビューのリストの行をクリックした場合と同じこと (アイテムのプロパティ フォームを開く) が実行されます。Under those fields, a button element is displayed that, when clicked, does the same thing as clicking the list row in an uncustomized view, which is opening the property form for the item. この button は、$Assigned_x0020_To フィールド (ユーザー/グループ フィールドと仮定) の値が現在サインインしているユーザーと一致するときに、条件付きで表示されます。This button is displayed conditionally, when the value of the $Assigned_x0020_To field (assumed to be a person/group field) matches the current signed-in user:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Feedback]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Give feedback",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$Assigned_x0020_To.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

このサンプルには、次の追加情報があります。「複数行のビューのレンダリングYou can find this sample with additional details here: Multi-line view rendering

カスタムの JSON を作成するCreating custom JSON

スキーマを理解している場合は、カスタムのビューの書式設定 JSON を簡単に一から作成できます。Creating custom column formatting JSON from scratch is simple if you understand the schema. 独自の書式設定を指定するには、To create your own custom column formatting:

  1. Visual Studio Code をダウンロードしますDownload Visual Studio Code. 無料で、手早くダウンロードできます。It's free and fast to download.

  2. Visual Studio Code で新しいファイルを作成し、空のままのファイルを、ファイル拡張子 .json を付けて保存します。In Visual Studio Code, create a new file, and save the empty file with a .json file extension.

  3. 空のファイルに次のコードを貼り付けます。Paste the following lines of code into your empty file.

     {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json"
     }
    

JSON 作成のための検証機能とオートコンプリートが使えるようになりました。You now have validation and autocomplete to create your JSON. JSON の追加は、スキーマの場所を定義する最初の行の後からはじめます。You can start adding your JSON after the first line that defines the schema location.

ヒント

任意の場所で Ctrl+スペース キーを押すと、Visual Studio Code はプロパティと値の提案を表示します。At any point, select Ctrl+Space to have Visual Studio Code offer suggestions for properties and values. 詳細については、「Editing JSON with Visual Studio Code」を参照してください。For more information, see Editing JSON with Visual Studio Code.

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

rowFormatterrowFormatter

省略可能な要素です。Optional element. リスト ビューの行の書式設定を記述する JSON オブジェクトを指定します。Specifies a JSON object that describes a list view row format. この JSON オブジェクトのスキーマは、列の書式設定のスキーマと同じです。The schema of this JSON object is identical to the schema of a column format. このスキーマとその機能の詳細については、列の書式設定の詳細な構文のリファレンスを参照してください。For details on this schema and its capabilities, see the Column Format detailed syntax reference.

注意

rowFormatter プロパティを使用すると、additionalRowClass プロパティで指定されたものがすべて上書きされます。Using the rowFormatter property will override anything specified in the additionalRowClass property. これらは相互に排他的です。They are mutually exclusive.

rowFormatter 要素と列の書式設定の動作の違いDifferences in behavior between the rowFormatter element and column formatting

同じスキーマを共有しているにもかかわらず、rowFormatter 要素内の要素と列の書式設定オブジェクト内の同じ要素の動作には、いくつかの違いがあります。Despite sharing the same schema, there are some differences in behavior between elements inside a rowFormatter element and those same elements in a column formatting object.

  • @currentField は常に rowFormatter 内の Title フィールドの値に解決されます。@currentField always resolves to the value of the Title field inside a rowFormatter.

additionalRowClassadditionalRowClass

省略可能な要素です。Optional element. 行全体に適用される CSS クラスを指定します。Specifies a CSS class(es) that is applied to the entire row. 式をサポートします。Supports expressions.

additionalRowClassrowFormatter 要素が指定されていない場合にのみ有効です。additionalRowClass only takes effect when there is no rowFormatter element specified. rowFormatter が指定されている場合は additionalRowClass が無視されます。If a rowFormatter is specified, then additionalRowClass is ignored.

hideSelectionHideSelection

省略可能な要素です。Optional element. ビュー内の行を選択する機能を無効にするかどうかを指定します。Specifies whether the ability to select rows in the view is diabled or not. false はリスト ビュー内での既定の動作です (選択内容が表示され有効になっていることを示します)。false is the default behavior inside a list view (meaning selection is visiable and enabled). true はユーザーがリスト アイテムを選択できないことを示します。true means that users will not be able to select list items.

hideSelectionrowFormatter 要素が指定されている場合にのみ有効です。hideSelection only takes effect when there's a rowFormatter element specified. rowFormatter が指定されていない場合は hideSelection が無視されます。If no rowFormatter is specified, then hideSelection is ignored.

hideColumnHeaderhideColumnHeader

省略可能な要素です。Optional element. ビュー内の列見出しを非表示にするかどうかを指定します。Specifies whether the column headers in the view are hidden or not. false はリスト ビュー内での既定の動作です (列見出しが表示されることを示します)。false is the default behavior inside a list view (meaning column headers will be visible). true はビューが列見出しを表示しないことを示します。true means that the view will not display column headers.