はじめに
こんにちは、くらっちです。
以前別の記事で、SharePointOnlineのビューの書式設定を使って自己紹介カードを作ったので今回はカーソルをあてた時に吹き出しが表示される機能を追加しました。
サンプルのJSONも用意しているので気になっている方はぜひお試しください。
この記事のサンプルを見れば使い方がざっくりとでも理解してもらえると思います。
※前回記事 kurattyodiary.hatenablog.com
目次
実装例
サンプルコードをリストビューに設定すると下図のようになります。
自己紹介カードの右側色付きの部分にカーソルを合わせると吹き出しが表示されます。
使用する列
今回作成する自己紹介カードに必要な列はこちら。
リストに下記列を追加してください。
| 表示名 | 内部名 | 列の種類 | 備考 |
|---|---|---|---|
| ユーザー | Person | ユーザーまたはグループ | ユーザーのみ選択可 |
| 電話番号 | PhoneNumber | １行テキスト | ー |
| 所属部署 | Department | 選択肢 | ドロップダウン形式 |
| 紹介文 | Introduction | 複数行テキスト | プレーンテキスト |
ビューの設定
ビューには下記の列を表示させます。
- 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": "350px",
"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": "230px",
"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')))"
},
"customCardProps": {
"openOnEvent": "hover",
"isBeakVisible": true,
"directionalHint": "rightTopEdge",
"formatter": {
"elmType": "div",
"style": {
"max-width": "300px",
"padding": "20px"
},
"txtContent": "[$Introduction]"
}
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "",
"class": "ms-fontColor-neutralPrimary"
}
}
]
}
]
}
}
ここが吹き出し
上記コードの中で、吹き出しを作っているのはこの部分です。
それ以外の部分でカードを作っています。
"customCardProps": {
"openOnEvent": "hover",
"isBeakVisible": true,
"directionalHint": "rightTopEdge",
"formatter": {
"elmType": "div",
"style": {
"max-width": "300px",
"padding": "20px"
},
"txtContent": "[$Introduction]"
}
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "",
"class": "ms-fontColor-neutralPrimary"
}
}
]
最後に
この記事が気に入った、参考になったという場合は評価して頂けるとすごく励みになります！
最後まで読んでいただいてありがとうございました。
