はじめに
こんにちは、くらっちです。
先日、部内のメンバー紹介するための仕組みをSharePointで作りたいという要望があったので早速ビューの書式設定を使って自己紹介カードを作ってみました。
サンプルのJSONも用意したので「ビューの書式設定」が気になっている方はぜひお試しください。
この記事のサンプルを見れば使い方がざっくりとでも理解してもらえると思います。
目次
実装例
今回作成する自己紹介カードの完成イメージはこんな感じです。
JSONの中身が理解がしやすいようにシンプルな構成にしています。
機能の紹介
今回作る自己紹介カードには以下の機能を付けました。
SharePointリストの「ビューの書式設定」を使ってカードを作ります。
リストの設定内容については以下を参考にしてください。
使用する列
今回作成する自己紹介カードに必要な列はこちら。
リストに下記列を追加してください。
| 表示名 |
内部名 |
列の種類 |
備考 |
| ユーザー |
Person |
ユーザーまたはグループ |
ユーザーのみ選択可 |
| 電話番号 |
PhoneNumber |
１行テキスト |
ー |
| 所属部署 |
Department |
選択肢 |
ドロップダウン形式 |
ビューの設定
ビューには下記の列を表示させます。
- ID ⇒（名前クリックでアイテムのフォームを開くため）
- ユーザー ⇒（写真・名前・メールアドレスを表示するため）
- 電話番号 ⇒（電話番号を表示するため）
- 所属部署 ⇒（所属部署を表示するため）
ビューの書式設定をカスタマイズ
下記手順を実施して、ビューの書式設定を編集します。
- 自己紹介カードを表示させたいリストを開く。
- 「現在のビューの書式設定」をクリック。
- 「ビューの書式設定」タブで「詳細モード」をクリック。
- この後のサンプルコードを全文コピーして貼り付ける。
- 保存する。
サンプルコード
下記のコードをコピーして「ビューの書式設定」に貼り付けて下さい。
コード内の「テナント名]、[サイト名]、[リスト名]は実際のリストに合わせてください。
また、[$Department] == '総務部' の部分も選択肢の内容に合わせてください。
ビューの書式設定は、HTMLをjson形式で記述しているイメージです。
HTMLを知っていればカスタマイズも簡単です。
試行錯誤しながら色々使い倒してください。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideListHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"width": "320px",
"margin": "10px",
"float": "left",
"padding": "0px 0px 0px 10px",
"box-shadow": "3px 3px 5px 0 darkgrey"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "img",
"style": {
"display": "block",
"width": "75px",
"border-radius": "50%"
},
"attributes": {
"src": "='/_layouts/15/userphoto.aspx?size=M&username=' + [$Person.email]"
}
}
]
},
{
"elmType": "div",
"style": {
"width": "200px",
"font-size": "1.0em",
"text-align": "left",
"overflow": "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap",
"padding": "5px 5px 10px 5px",
"margin": "0px 0px 0px 10px"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "a",
"style": {
"cursor": "pointer",
"font-size": "1.2rem",
"text-decoration": "none",
"class": "ms-fontColor-neutralPrimary"
},
"attributes": {
"href": "='https://[テナント名].sharepoint.com/sites/[サイト名]/Lists/[リスト名]/DispForm.aspx?ID=' + [$ID]",
"target": "_blank"
},
"children": [
{
"elmType": "span",
"txtContent": "[$Person.title]",
"attributes": {
"class": "ms-fontColor-neutralPrimary"
}
}
]
},
{
"elmType": "span",
"style": {
"float": "right",
"margin": "5px 5px 5px 15px"
},
"children": [
{
"elmType": "a",
"style": {
"cursor": "pointer"
},
"attributes": {
"href": "='https://teams.microsoft.com/l/chat/0/0?users=' + [$Person.email]",
"target": "_blank"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "OfficeChat",
"class": "ms-fontColor-neutralPrimary"
},
"style": {
"font-size": "1.3em"
}
}
]
}
]
}
]
},
{
"elmType": "div",
"txtContent": "[$Department]"
},
{
"elmType": "div",
"txtContent": "[$PhoneNumber]"
},
{
"elmType": "div",
"txtContent": "[$Person.email]"
}
]
},
{
"elmType": "div",
"style": {
"display": "block",
"width": "25px",
"height": "94px",
"background-color": "=if([$Department] == '総務部', 'gold',if([$Department] == '営業部','bisque',if([$Department] == 'インフラ事業部','cornflowerblue',if([$Department] == 'クラウド事業部','forestgreen','white')))"
}
}
]
}
}
文末感想
今度はこのカードをカスタマイズして、ユーザーの自己紹介文を吹き出しみたいに表示できるようにチャレンジしてみようと思います✨
この記事が気に入った、参考になったという場合は評価して頂けるとすごく励みになります！
最後まで読んでいただいてありがとうございました。
参考
SharePointリストの書式設定(JSON) チートシート #JSON - Qiita
