SharePoint OnlineのモダンUIでは、クラシックUIのカスタマイズに利用していた「JSLink」がサポートされなくなっています。
また、JavaScriptの埋め込み方法も制限されているので、ビューのHTMLをJQueryとかで無理くり変えることも難しくなっています。
代わりに、より洗練された方法が提供されていますので紹介します。
尚、このページはカスタマイズの方法論の紹介です。
構築例などは別のページでまとめています。
www.micknabewata.com
[ブラウザで実施] 列の書式設定
列の書式設定では、列ごとにJSONで描画方法を指定できます。
設定はリストの設定画面で行います。

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

モダンUI標準ビュー
列の書式設定を使えば、例えばこんなカスタマイズができます。

列の書式設定で「進捗率」の列をカスタマイズした例
上記例の設定値はこうです。
{
"$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
[ブラウザで実施] ビューの書式設定
ビューの書式設定では、ビューの「列」ではなく「行」のカスタマイズを行います。

期限を過ぎた行を赤くした例
列の書式設定と同じくJSONで記述しますが、行を対象とする分、書き方はやや異なります。
また、設定したビューのみに適用され、他のビューには影響しません。
上記の例では以下のJSONを記述しています。
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "=if([$LimitDate] <= @now, 'sp-field-severity--severeWarning', '')"
}
列の書式設定と併用することもできます。

列とビューの両方で書式設定したら背景色が被って見づらかったの例
これだと例としてショボいので、背景色だけでなく丸ごとカスタマイズしてみました。

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]+'%'"
}
]
}
]
}
]
}
}
[開発] SharePoint Framework (SPFx)
SharePoint Frameworkの「フィールドカスタマイザー」は、JSLinkの代替手段です。
JavaScriptを使って高度なカスタマイズを行うことができます。
SharePoint Frameworkについてはこちらをどうぞ。
SharePoint Framework (SPFx) 開発環境構築 (Windows 10) - 鍋綿ブログ
フィールドカスタマイザーのコードサンプルとしては以下をお勧めします。
SharePoint Framework フィールドカスタマイザーでリストビューに完了ボタンを付けてみた - 鍋綿ブログ
複数の方法を組み合わせる
以下は組み合わせ可能です。
- ビューの書式設定と列の書式設定
- ビューの書式設定とフィールドカスタマイザー
ただし、ビューの書式設定でrowFormatter属性を利用する場合、ビューの書式設定だけが適用されます。
以上、参考になれば幸いです。