【SharePointをマスターしよう】実践！列の書式設定 サンプルコード付き
SharePoint をカスタマイズするための「列の書式設定」って難しいですよね。
「jsonってどんな風に書けばいいのかわからない💦」という方が多いのではないでしょうか？
そこで今回は 列の書式設定で即利用できるものをいくつかまとめました。
列の書式設定は、リストアイテムやファイルのデータに影響はなく表示方法のみが変更されます。
安心してご活用ください。
下記の各種サンプルコードは「▲サンプルコード」の部分をクリックすると、展開されます。
１．フローを起動するボタン
「承認依頼」ボタンをクリックすると、サンプルコードの"actionParams"に記述したIDのフロー（Power Automate）が起動します。
フローを実行するためには、事前にPower Automateから対象フローのIDを取得してください。
参考：【PowerAutomate】フローのIDを確認する方法
列の種類に指定はなく、また、列が未入力の状態でも利用可能です。
サンプルコード
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"フローのIDを入力する\"}"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"cursor": "pointer",
"padding":"2px 5px 1px 5px",
"margin-top":"2px",
"border-radius":"5px"
},
"children": [
{
"elmType": "span",
"txtContent": "承認依頼"
}
]
}
２．対象列のユーザー宛にメールを送信する
メールアイコンをクリックすると、メールソフトが起動します。
必ず列の種類「ユーザーまたはグループ」列に対して書式設定を行ってください。
メール作成にあたって最低限リストに必要な列は下表の通りです。
| メール項目 | 列内部名 | 列の種類 |
|---|---|---|
| 宛先 | (任意) | ユーザーまたはグループ |
| 件名 | Title | １行テキスト |
| 本文 | Comment | 複数行テキスト（書式なしテキスト） |
| アイテムの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/SiteName/Lists/ListName/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'"
]
}
]
}
}
]
}
４．ユーザー列にユーザーのアイコンを表示する
ユーザー列は標準ではユーザー名のみ表示されますが、同時に自分のアイコンも表示させます。
必ず列の種類「ユーザーまたはグループ」列に対して書式設定を行ってください。
サンプルコード
{
"$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=' + @currentField.email",
"title": "@currentField.title"
}
},
{
"elmType": "span",
"style": {
"vertical-align": "middle",
"margin-left": "2px"
},
"txtContent": "@currentField.title"
}
],
"defaultHoverField": "@currentField"
}
５．入力値の中央揃え
リストアイテムの文字表示は、基本的に左寄せです。
中央揃えに変更するには下記コードを利用します。
列の種類はどれでも利用可能です。
サンプルコード
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "table",
"width": "100%"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"display": "table-cell",
"text-align": "center",
"vertical-align": "middle"
}
}
]
}
６．選択肢をタグ化して表示する
選択した値をタグのように表示します。
必ず列の種類は、複数選択可能な「選択肢列」に対して書式設定を行ってください。
列の幅に合わせてタグの横幅が決まります。
選択数が多い場合は、列の横幅を多く確保するか、横幅を固定してください。
サンプルコード
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"forEach": "choiceIterator in @currentField",
"elmType": "div",
"txtContent": "[$choiceIterator]",
"attributes": {
"class": "ms-bgColor-themePrimary",
"title": "=[$choiceIterator]"
},
"style": {
"width": "100%",
"height": "16px",
"text-align": "center",
"margin": "2px 2px 2px 2px",
"padding": "2px 4px 4px 4px",
"border-radius": "5px",
"color": "#FFFFFF",
"overflow": "hidden"
}
}
]
}
７．数値によって進むプログレスアイコン
書式設定を適用した列の数値に従ってプログレスアイコンが進んでいきます。
下図の場合、Progress列には上から「2、1、3」が入力されており、その数値に従ってアイコンが表示されます。
必ず列の種類は「数値列」に対して書式設定を行ってください。
サンプルコード
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/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/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
sp-dev-list-formatting
https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples
Office UI Fabric Icons （IconNameの検索に役立ちます）
https://uifabricicons.azurewebsites.net/
Author And Source
この問題について(【SharePointをマスターしよう】実践！列の書式設定 サンプルコード付き), 我々は、より多くの情報をここで見つけました https://qiita.com/kura_yu/items/afbe1ed940bb39d8f26f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .