SharePoint OnlineのモダンUIでシステムリンクをつくる
4041 ワード
やりたいこと
- SharePoint Online標準機能をつかって各システムへのアイコンリンクをつくる
- SharePoint Frameworkは難しいので使わない
- 外観の設定で色が変わりたい
ゴールのイメージ
やりかた
現在のビューの書式設定へ以下のJSONをコピペする
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"tileProps": {
"hideSelection": true,
"width": "120",
"height": "120",
"formatter": {
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"min-width": "120px",
"min-height": "120px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-title ms-fontSize-s"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
},
"rowFormatter": {
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"width": "100%"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"min-height": "150px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-titleA "
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
}
- アイテムを登録してみる
- アイコンの名前はOffice UI Fabric Iconsから探す
Author And Source
この問題について(SharePoint OnlineのモダンUIでシステムリンクをつくる), 我々は、より多くの情報をここで見つけました https://qiita.com/t-oi/items/14e4190a6598e042f00a著者帰属:元の著者の情報は、元の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 .