使用字段格式化来自定义SharePoint（二）

博客地址：http://blog.csdn.net/FoxDave

应用条件性的格式化

我们可以使用字段格式化去应用样式、类(CSS)和图标到字段上，取决于这些字段的值。

基于数字范围的条件格式化 (基本)
下图展示了应用条件格式化到数字范围的示例。

本示例使用条件运算符?，在当前字段的值小于等于70时，去应用类(sp-field-severity–warning)到父DIV元素。这使得该字段在值小于等于70时高亮显示，大于70时正常显示。

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "debugMode": true,
    "elmType": "div",
    "attributes": {
       "class": {
          "operator": "?",
          "operands": [
             {
                "operator": "<=",
                "operands": [
                   "@currentField",
                   70
                ]
             },
             "sp-field-severity--warning",
             ""
          ]
       }
    },
    "children": [
        {
            "elmType": "span",
            "style": {
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": "<=",
                            "operands": [ "@currentField", 70 ] },
                        "Error",
                        ""
                    ]
                }
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField"
        }
    ]
}

基于文本或选项字段值的条件格式化 (高级)
下图展示了应用条件格式化到文本或选项类型字段的例子：

我们可以应用条件格式化到可能包含固定值集合的文本或选项类型的字段。下面的示例基于字段的值是否是”Done”、”In Review”、”Blocked”或其他值来应用不同的样式类。本示例基于字段的值应用CSS类 (sp-field-severity–low, sp-field-severity–good, sp-field-severity–warning, sp-field-severity–blocked)到DIV元素。然后它会输出一个SPAN元素，带有IconName属性。这个属性会应用另一个CSS类到SPAN元素，显示一个Office UI Fabric图标在里面。最后，另一个包含字段值的SPAN元素被输出。
本模式在我们想要不同的值映射到不同的紧迫性或严重程度的优先级时很有用。我们可以基于本例进行编辑以适应我们自己的需求。

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "debugMode": true,
    "elmType": "div",
    "attributes": {
        "class": {
            "operator": "?",
            "operands": [
                {
                    "operator": "==",
                    "operands": [
                        {
                            "operator": "toString()",
                            "operands": [ "@currentField" ] },
                        "Done"
                    ]
                },
                "sp-field-severity--good",
                {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": "==",
                            "operands": [ { "operator": "toString()", "operands": [ "@currentField" ] }, "In progress" ] },
                        "sp-field-severity--low",
                        {
                            "operator": "?",
                            "operands": [ { "operator": "==", "operands": [ { "operator": "toString()", "operands": [ "@currentField" ] }, "In review" ] }, "sp-field-severity--warning", { "operator": "?", "operands": [ { "operator": "==", "operands": [ { "operator": "toString()", "operands": [ "@currentField" ] }, "Blocked" ] }, "sp-field-severity--severeWarning", "sp-field-severity--blocked" ] } ] }
                    ]
                }
            ]
        }
    },
    "children": [
        {
            "elmType": "span",
            "style": {
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": "==",
                            "operands": [ { "operator": "toString()", "operands": [ "@currentField" ] }, "Done" ] },
                        "CheckMark",
                        {
                            "operator": "?",
                            "operands": [ { "operator": "==", "operands": [ { "operator": "toString()", "operands": [ "@currentField" ] }, "In progress" ] }, "Forward", { "operator": "?", "operands": [ { "operator": "==", "operands": [ { "operator": "toString()", "operands": [ "@currentField" ] }, "In review" ] }, "Error", { "operator": "?", "operands": [ { "operator": "==", "operands": [ { "operator": "toString()", "operands": [ "@currentField" ] }, "Has issues" ] }, "Warning", "ErrorBadge" ] } ] } ] }
                    ]
                }
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField"
        }
    ]
}