使用欄位格式化來自定義SharePoint（七）

Justin-Liu發表於2018-10-08

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

建立自定義的JSON

如果我們瞭解schema結構，從頭開始建立自定義欄位格式化JSON是很容易的事情。步驟如下：

  1. 下載Visual Studio Code，免費並且下載得很快哈。
  2. 在Visual Studio Code中，建立一個新檔案，儲存檔案為.json副檔名的檔案。
  3. 貼上下面的程式碼到檔案中。
{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json"
 }

現在我們就完成了JSON檔案的建立。我們可以在後面直接新增我們自己的定義schema位置的JSON。
提示1：在任何時候使用Ctrl+Space使Visual Studio Code提供屬性和值的輸入建議。更多資訊戳這裡。
提示2：SharePoint最佳實踐提供了一個免費的web部件叫做Column Formatter，通過它可以在瀏覽器直接編輯和應用格式化。

詳細語法參考

元素型別(elmType)
指定要建立的元素型別，有效的元素包括：

  • div
  • span
  • a
  • img
  • svg
  • path
  • button

任何其他的值會得到一個錯誤。

按鈕元素(button)
Button元素可以用來執行父級專案上指定的操作。每個button元素都有一個標誌屬性customRowAction，它指定了一個在點選按鈕時執行的action。該操作的值必須是以下之一：

  • defaultClick：具有此操作的按鈕在點選時會跟在沒有自定義的檢視中點選列表項做一樣的事。下面是一個例子，模擬點選列表項，會開啟列表項檢視頁。
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}
  • share：點選此按鈕會開啟共享視窗，下面是一個例子。
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Share this item",
  "customRowAction": {
    "action": "share"
  }
}
  • delete：點選此按鈕會開啟刪除確認對話方塊。
  • editProps：點選此按鈕會開啟列表項屬性編輯頁。
  • executeFlow：點選此按鈕會執行指定的流，通過actionParams屬性中的ID標識。前面的文章有示例。

txtContent
指定elmType指定的元素的文字內容的可選屬性。該屬性值可以是字串或表示式物件。

style
指定應用到elmType指定的元素的樣式的可選屬性。它是一個鍵值對分別對應CSS名稱和值的物件。樣式物件中每個屬性的值可以是字串或表示式物件。允許的樣式屬性有以下這些。

'background-color'
'fill'
'background-image'
'border'
'border-bottom'
'border-bottom-color'
'border-bottom-style'
'border-bottom-width'
'border-color'
'border-left'
'border-left-color'
'border-left-style'
'border-left-width'
'border-right'
'border-right-color'
'border-right-style'
'border-right-width'
'border-style'
'border-top'
'border-top-color'
'border-top-style'
'border-top-width'
'border-width'
'outline'
'outline-color'
'outline-style'
'outline-width'
'border-bottom-left-radius'
'border-bottom-right-radius'
'border-radius'
'border-top-left-radius'
'border-top-right-radius'
'box-decoration-break'
'box-shadow'
'box-sizing'

'overflow-x'
'overflow-y'
'overflow-style'
'rotation'
'rotation-point'

'opacity'

'height'
'max-height'
'max-width'
'min-height'
'min-width'
'width'

'align-items'
'box-align'
'box-direction'
'box-flex'
'box-flex-group'
'box-lines'
'box-ordinal-group'
'box-orient'
'box-pack'

'font'
'font-family'
'font-size'
'font-style'
'font-variant'
'font-weight'
'font-size-adjust'
'font-stretch'

'grid-columns'
'grid-rows'

'margin'
'margin-bottom'
'margin-left'
'margin-right'
'margin-top'

'column-count'
'column-fill'
'column-gap'
'column-rule'
'column-rule-color'
'column-rule-style'
'column-rule-width'
'column-span'
'column-width'
'columns'

'padding'
'padding-bottom'
'padding-left'
'padding-right'
'padding-top'

'bottom'
'clear'
'clip'
'display'
'float'
'left'
'overflow'
'position' 
'right'
'top'
'visibility'
'z-index'

'border-collapse'
'border-spacing'
'caption-side'
'empty-cells'
'table-layout'

'color'
'direction'
'letter-spacing'
'line-height'
'text-align'
'text-decoration'
'text-indent'
'text-transform'
'unicode-bidi'
'vertical-align'
'white-space'
'word-spacing'
'hanging-punctuation'
'punctuation-trim'
'text-align-last'
'text-justify'
'text-outline'
'text-shadow'
'text-wrap'
'word-break'
'word-wrap'

下面的例子展示了樣式物件的值。在該示例中，兩個樣式屬性(padding和background-color)會被應用。padding的值為寫死的字串。background-color的值為一個表示式，可能是紅色或者綠色，基於當前欄位的值是否小於40(@currentField)而定。

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "padding": "4px",
   "background-color": {
      "operator": "?",
      "operands": [
         {
            "operator": "<",
            "operands": [
               "@currentField",
               40
            ]
         },
         "#ff0000",
         "#00ff00"
      ]
   }
}

attribute
指定新增到elmType指定的元素的附加屬性的可選屬性。它也是一個鍵值對，屬性名必須是下面中的一個：

  • href
  • rel
  • src
  • class
  • target
  • title
  • role
  • iconName
  • d
  • aria

任何其他的屬性都會得到一個錯誤。屬性值可以是表示式物件或者字串。下面的例子新增了target和href兩個屬性到elmType指定的元素。target屬性為寫死的字串。href屬性為表示式，會在執行時轉換為http://finance.yahoo.com/quote/ +當前欄位(@currentField)的值。

{
        "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "target": "_blank",
    "href": "='http://finance.yahoo.com/quote/' + @currentField"
}

children
指定elmType指定的元素的子元素的可選屬性。值為elm陣列物件，可以有任意級別。如果一個元素具有txtContent屬性，子元素的屬性會被忽略。

debugMode
關於除錯的可選屬性，它會輸出錯誤資訊和警告到控制檯。

相關文章