使用檢視格式化來自定義SharePoint

部落格地址：http://blog.csdn.net/FoxDave

本篇開始介紹檢視格式化的功能，類同於欄位格式化，檢視也可以進行自定義格式化。
我們可以使用檢視格式化來自定義SharePoint列表和庫中的檢視如何顯示。我們需要構建一個JSON物件來描述當列表檢視中的一行資料載入時的元素要應用的樣式。檢視格式化並不會改變列表項的資料而只改變它們向使用者呈現的方式。具有列表中的建立和管理檢視許可權的使用者可以使用檢視格式化來配置檢視如何顯示。

開始進行檢視格式化

通過點選檢視的下拉選單選擇Format this view來開啟檢視格式化皮膚。

使用檢視格式化最簡單的方式跟欄位格式化類似：基於一個示例進行修改然後應用到我們特定的檢視。本文之後的部分包含一些示例，我們可以依據自己的需求進行自定義。

應用條件樣式類

我們可以通過檢視格式化基於一個到多個欄位的值應用一個到多個樣式類到整個列表檢視。
推薦的可用樣式類可以參照之前的關於欄位格式化的文章。

基於日期欄位的條件樣式類

下圖展示了基於日期欄位的條件樣式類的應用。

該示例在列表項的DueDate欄位在當前日期之前時應用sp-field-severity–severeWarning樣式類到列表檢視表示超期。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
   "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', '')"
}

基於文字或選項欄位的條件樣式類

本示例採用了類似之前欄位格式化中的例子，但是在檢視格式化中additionalRowClass屬性只允許我們指定樣式類，圖示不可以。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good', if([$Status] == 'In progress', 'sp-field-severity--low' ,if([$Status] == 'In review','sp-field-severity--warning', if([$Status] == 'Has issues','sp-field-severity--blocked', ''))))"
}

構建自定義行佈局

我們可以使用檢視格式化來定義一個完全自定義的行佈局。

多行檢視樣式
下圖展示了應用自定義多行檢視樣式的列表。

本例使用rowFormatter元素，它完全重寫了一個列表檢視行的渲染。例子中的rowFormatter為列表檢視的每行建立了一個繫結的div框。在這個繫結的框中，$Title和$Feedback欄位分別在各自的行顯示。在這些欄位下面，有一個button元素，在點選時會開啟列表項的屬性檢視頁。這個按鈕是根據條件顯示的，當$Assigned_x0020_To的值為當前登入使用者才顯示。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Feedback]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Give feedback",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$Assigned_x0020_To.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

建立自定義JSON

如果我們懂它的schema的話，從頭開始建立自定義的檢視格式化JSON也很簡單。遵從下面幾個步驟：

1. 下載Visual Studio Code。
2. 在Visual Studio Code中建立一個新檔案，儲存成.json副檔名。
3. 將下面的程式碼貼上到該檔案中：

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json"
 }

現在我們完成建立自己的JSON了。我們可以開始在第一行之後新增我們自己的JSON來定義schema。

詳細語法參考

rowFormatter
可選元素。指定一個描述列表檢視行格式的JSON物件。JSON物件的schema需要跟欄位格式化的schema完全相同。
注意：使用rowFormatter屬性會完全覆蓋additionalRowClass屬性中指定的所有內容，它們是互斥的。

rowFormatter元素和欄位格式化行為上的不同
儘管共享相同的schema，rowFormatter中的元素跟欄位格式化物件中相關的元素在行為上還是有一些不同的。

• @currentField在rowFormatter中總是解析為Title欄位。

additionalRowClass

可選元素，指定應用到整行的CSS樣式類。
additionalRowClass只在沒有rowFormatter元素指定的情況下生效。如果rowFormatter被指定了，additionalRowClass就會被忽略。

hideSelection
可選元素，指定是否禁用檢視中行的選擇。false是預設的行為，true表示使用者不能夠選中列表項。
hideSelection只在指定了rowFormatter元素的情況下生效。

hideListHeader
可選元素，指定檢視中的欄位頭是否隱藏。false是預設的行為，true表示檢視不會顯示欄位頭。