javascript - 更改列格式的当前代码以包含图标
问题描述
我希望有人能提供帮助——我对 JSON 或编码一无所知。
我有一个共享点在线列表,我已将其格式化为根据每个项目中显示的文本显示不同的颜色。我现在也希望在列中添加图标。例如,如果状态为“新建”,我希望它是我在代码中选择的颜色,同时还从 Office UI Fabric 添加一个 + 图标。
下面是我使用的两个代码,它们分别工作,我想将它们结合在一起。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Completed', 'CheckMark', if(@currentField == 'Draft phase', 'Forward', if(@currentField == 'Approval phase', 'Error', if(@currentField == 'On hold', 'Warning', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
{
"elmType": "div",
"style": {
"padding": "0 4px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"New"
]
}
]
},
"sp-css-backgroundColor-blueBackground07",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Draft phase"
]
}
]
},
"sp-css-backgroundColor-warningBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Approval phase"
]
}
]
},
"sp-css-backgroundColor-successBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Ready for upload"
]
}
]
},
"sp-css-backgroundColor-blockingBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Completed"
]
}
]
},
"sp-css-backgroundColor-neutralBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"On hold"
]
}
]
},
"sp-css-backgroundColor-errorBackground",
""
]
}
]
}
]
}
]
}
]
}
]
}
},
"txtContent": "@currentField"
}
解决方案
试试这个。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"padding": "0 4px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"New"
]
}
]
},
"sp-css-backgroundColor-blueBackground07",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Draft phase"
]
}
]
},
"sp-css-backgroundColor-warningBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Approval phase"
]
}
]
},
"sp-css-backgroundColor-successBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Ready for upload"
]
}
]
},
"sp-css-backgroundColor-blockingBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"Completed"
]
}
]
},
"sp-css-backgroundColor-neutralBackground",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toLowerCase",
"operands": [
"@currentField"
]
},
{
"operator": "toLowerCase",
"operands": [
"On hold"
]
}
]
},
"sp-css-backgroundColor-errorBackground",
""
]
}
]
}
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Completed', 'CheckMark', if(@currentField == 'Draft phase', 'Forward', if(@currentField == 'Approval phase', 'Error', if(@currentField == 'On hold', 'Warning', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
推荐阅读
- sass - 在 scss 中使用 &:first-of-type 与仅使用 :first-of-type 有什么区别吗
- c# - 如何配置 swagger 以使复杂的 [FromUri] GET 参数在 Swagger 中很好地显示
- c - AVL 树 - 如何跟踪树的高度?typedef和指向结构的指针之间的区别
- c# - 如何为特定视图加载特定脚本和 css?
- sql - 如何使用 Spring JPA 连接三个表
- angular - 即使实际值相同,组件也会在状态更改时重新渲染
- html - 水平和垂直居中 h1 和 h2
- jquery - 本地主机上 reCaptcha 的 postMessageId 错误
- fabricjs - 如何在 FabricJS 中获取部分文本的边界?
- java - 如何在旧版 Android 中降级 java.time 代码?