【2020年06月時点最新】SharePointのモダンUIでビューをカスタマイズする方法3通り

SharePoint OnlineのモダンUIでは、クラシックUIのカスタマイズに利用していた「JSLink」がサポートされなくなっています。
また、JavaScriptの埋め込み方法も制限されているので、ビューのHTMLをJQueryとかで無理くり変えることも難しくなっています。
代わりに、より洗練された方法が提供されていますので紹介します。

尚、このページはカスタマイズの方法論の紹介です。
構築例などは別のページでまとめています。

www.micknabewata.com

[ブラウザで実施] 列の書式設定
[ブラウザで実施] ビューの書式設定
[開発] SharePoint Framework (SPFx)
複数の方法を組み合わせる

[ブラウザで実施] 列の書式設定

列の書式設定では、列ごとにJSONで描画方法を指定できます。
設定はリストの設定画面で行います。

f:id:micknabewata:20181010210851j:plain — 列の書式設定

まず、モダンUIの標準だとこんな画面です。

f:id:micknabewata:20181010212913j:plain — モダンUI標準ビュー

列の書式設定を使えば、例えばこんなカスタマイズができます。

f:id:micknabewata:20181010213143j:plain — 列の書式設定で「進捗率」の列をカスタマイズした例

上記例の設定値はこうです。

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "debugMode": true,
  "elmType": "div",
  "style":{
    "width": "=@currentField + '%'"
  },
  "attributes": {
    "class": "=if(@currentField == 100, 'sp-field-severity--good', if([$LimitDate] <= @now, 'sp-field-severity--warning' ,'sp-field-severity--blocked'))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 100, 'CheckMark', if([$LimitDate] <= @now, 'Forward', 'Warning'))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

詳細は公式サイトをご確認いただくとして、ここでは簡単に解説します。

elmType：描画するHTMLタグ
txtContent：描画する値
style：HTMLタグに付与するstyle属性
attributes：HTMLタグに付与するstyle以外の属性(classとか)
children：子要素

だいたいこれを組み合わせれば実現できます。
また、各設定値にはif文が記述できますので、
上記例のように値によって見せ方を変えることができます。

フィールドの値は@currentFieldで現在のフィールドを指定するか、
[$fieldInternalName]で別のフィールドを指定します。

列の書式設定で SharePoint をカスタマイズする | Microsoft Docs

[ブラウザで実施] ビューの書式設定

ビューの書式設定では、ビューの「列」ではなく「行」のカスタマイズを行います。

f:id:micknabewata:20181010215847j:plain — 期限を過ぎた行を赤くした例

列の書式設定と同じくJSONで記述しますが、行を対象とする分、書き方はやや異なります。
また、設定したビューのみに適用され、他のビューには影響しません。
上記の例では以下のJSONを記述しています。

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

列の書式設定と併用することもできます。

f:id:micknabewata:20181010220346j:plain — 列とビューの両方で書式設定したら背景色が被って見づらかったの例

これだと例としてショボいので、背景色だけでなく丸ごとカスタマイズしてみました。

f:id:micknabewata:20181010224740j:plain — 1行を1つのカードで表現した例

この例は以下のJSONで実現しています。

{
  "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": "[$LimitDate]"
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "class": {
                            "operator": "?",
                            "operands": [
                                { "operator": "==","operands": ["[$Percent]", 100] },
                                "sp-field-severity--good",
                                {
                                    "operator": "?",
                                    "operands": [
                                        { "operator": "<=","operands": ["[$LimitDate]", "@now"] },
                                        "sp-field-severity--warning",
                                        "sp-field-severity--blocked"
                                    ]
                                }
                            ]
                        }
                    },
                    "style":{ "width": "=[$Percent] + 50 + 'px'" },
                    "children": [
                        {
                            "elmType": "span",
                            "style": { "display": "inline-block", "padding": "0 4px" },
                            "attributes": {
                                "iconName":{
                                    "operator": "?",
                                    "operands": [
                                        { "operator": "==","operands": ["[$Percent]", 100] },
                                        "CheckMark",
                                        {
                                            "operator": "?",
                                            "operands": [
                                                { "operator": "<=","operands": ["[$LimitDate]", "@now"] },
                                                "Forward",
                                                "Warning"
                                            ]
                                        }
                                    ]
                                }
                            }
                        },
                        {
                            "elmType": "span",
                            "txtContent": "=[$Percent]+'%'"
                        }
                    ]
                }
            ]
        }
    ]
  }
}