こんにちは、くらっちです。
前回の下記事に続き、SharePoint の「列の書式設定」のサンプルを紹介します。
列の書式設定は、アイテムやファイルに影響はなく表示のみが変更されます。
本記事では「▲サンプルコード」をクリックすることで、サンプルを参照できます。
kurattyodiary.hatenablog.com
目次
１．対象列のユーザー宛にメールを送信する
メールアイコンをクリックすると、メールソフトが起動します。
必ず列の種類「ユーザーまたはグループ」列に対して書式設定を行ってください。
メール作成にあたってリストに必要な列は下表の通りです。
| メール項目 |
列内部名 |
列の種類 |
| 宛先 |
(任意) |
ユーザーまたはグループ |
| 件名 |
Title |
１行テキスト |
| 本文 |
Comment |
複数行テキスト（書式なしテキスト） |
| アイテムのID |
ID |
※標準のID列を使用 |
サンプルコード
{
"$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=",
"[$Title]",
"&body=",
"[$Comment]",
"\r\n---\r\n",
"@currentField.title",
"\r\n詳細はコチラをクリック！\r\n https://contoso.sharepoint.com/sites/[サイト名]/Lists/[リスト名]/DispForm.aspx?ID=",
"[$ID]"
]
}
}
}
]
}
２．複数人宛のメールを作成する
承認者が１人の場合は「Send email to ユーザー名」
承認者が複数の場合は「Send email to N members」と列に表示されます。
リンククリックで、メールソフトが起動して宛先には全員のメールアドレスが入力されます。
列の種類は「ユーザーまたはグループ」列を使ってください。
サンプルコード
{
"$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",
"txtContent": {
"operator": "+",
"operands": [
"Send email to ",
{
"operator": "?",
"operands": [
"=length(@currentField) == 1",
"@currentField.title",
"='all ' + length(@currentField) + ' members'"
]
}
]
}
}
]
}
３．数値によって進む進捗アイコン
書式設定を適用した列の数値に従ってプログレスアイコンが進んでいきます。
下図の場合、Progress列には上から「2、1、3」が入力されており、その数値に従ってアイコンが表示されます。
列の種類は「数値列」を使ってください。
サンプルコード
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "16px"
},
"children": [
{
"elmType": "span",
"attributes": {
"title": "Step 1",
"iconName": "=if(@currentField < 1, 'TriangleRight12', 'TriangleSolidRight12')",
"class": "='ms-fontColor-' + if(@currentField == 1, 'green', if(@currentField > 1, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 2",
"iconName": "=if(@currentField < 2, 'TriangleRight12', 'TriangleSolidRight12')",
"class": "='ms-fontColor-' + if(@currentField == 2, 'green', if(@currentField > 2, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 3",
"iconName": "=if(@currentField < 3, 'TriangleRight12', 'TriangleSolidRight12')",
"class": "='ms-fontColor-' + if(@currentField == 3, 'green', if(@currentField > 3, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
}
]
}
４．他列の承認状況に従って進む進捗アイコン
他の列の入力値に従ってプログレスアイコンが進んでいきます。
下図の場合、承認ステータスの値（進捗状況）に従ってアイコンが表示されます。
Proguress列は列の種類に指定はありませんが、承認ステータス列は「選択肢列」にしてください。
サンプルコード
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "16px"
},
"children": [
{
"elmType": "span",
"attributes": {
"title": "Step 1",
"iconName": "=if([$Status] == '申請中', 'TriangleSolidRight12', 'TriangleRight12')",
"class": "='ms-fontColor-' + if([$Status] == '申請中', 'green', if([$Status] == '審査中', 'greenLight', if([$Status] == '承認', 'greenLight', 'neutralLight')))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 2",
"iconName": "=if([$Status] == '審査中', 'TriangleSolidRight12', 'TriangleRight12')",
"class": "='ms-fontColor-' + if([$Status] == '審査中', 'green', if([$Status] == '承認', 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 3",
"iconName": "=if([$Status] == '承認', 'TriangleSolidRight12', 'TriangleRight12')",
"class": "='ms-fontColor-' + if([$Status] == '承認', 'green', 'neutralLight')"
},
"style": {
"padding": "0 2px"
}
}
]
}
参考ページ
Use column formatting to customize SharePoint
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
Office UI Fabric Icons （IconNameの検索に役立ちます）
https://uifabricicons.azurewebsites.net/
