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

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

我們可以使用欄位格式化來自定義SharePoint列表和庫中的欄位如何顯示。實現這個，我們需要構建一個JSON物件來描述包含在檢視中的欄位要顯示的元素和元素的樣式。欄位格式化不會改變列表項或檔案的資料，它只為瀏覽列表的使用者變更顯示的樣式。可以在列表中建立和管理檢視的使用者就可以使用欄位格式化來配置檢視裡的欄位如何顯示。
例如，一個具有標題、工作量、指派給和狀態的列表，在沒有應用自定義時的樣子如下圖：

而應用了自定義的樣子可能就如下圖：

欄位格式化跟欄位自定義的區別

欄位格式化和SharePoint Framework欄位自定義擴充套件都可以讓我們能夠自定義欄位如何在SharePoint列表中顯示。欄位自定義器更強大一些，因為我們可以通過編寫程式碼來控制欄位如何顯示。
欄位格式化更簡單和應用廣泛一些。但是相對來說它不允許任何自定義的程式碼，靈活性低一些。下面提供一個表用來對比欄位格式化和欄位自定義器。

自定義的欄位型別	欄位格式化	欄位自定義器
基於列表項的值或值範圍的條件性格式化	支援	支援
操作連結	支援不執行指令碼的靜態超連結	支援任何型別的超連結，包括執行自定義指令碼
資料視覺化	支援簡單的能夠被HTML和CSS表達的視覺化	支援任意的資料視覺化

如果我們能夠使用欄位格式化完成我們的方案，相對於欄位自定義器，它往往是更快捷和簡單的。任何具有建立和管理列表中檢視許可權的使用者都可以使用欄位格式化來建立和釋出自定製。通常在更復雜的欄位格式化無法支援的場景下才使用欄位自定義器。

開始使用欄位格式化

我們可以通過開啟欄位下的選單的方式開啟欄位格式化皮膚。在列設定下，選擇格式化此列。

如果沒有人對該欄位進行過格式化，開啟的皮膚會如下圖所示：

一個沒有指定格式化的欄位會使用預設的渲染。格式化一個欄位，在輸入框中輸入欄位格式化的JSON即可。
預覽格式化點選預覽按鈕即可。如果要提交我們修改的內容，點選儲存按鈕即可。儲存之後訪問該檢視頁面的使用者就會看到我們應用自定製後的效果。
使用欄位格式化最簡單的方式是從一個示例開始，基於示例進行修改並應用到我們指定的欄位。接下來和之後的文章我們會介紹一些示例，以後如果有類似的需求我們可以直接基於某個示例進行修改以適應我們自己的需求。我們也可以訪問GitHub去檢視更多示例，連結為https://github.com/SharePoint/sp-dev-list-formatting。

顯示欄位值 (基本)

由於篇幅有限，本篇先介紹最簡單的一種欄位格式化，即將欄位值放到一個div元素中。本例對數字、文字、選項和日期型別的欄位有效：

{
   "elmType": "div",
   "txtContent": "@currentField"
}

一些欄位型別需要一點額外的工作來獲取它們的值。使用者欄位在系統中展示為物件 (object)，一個使用者的顯示名稱被包含在該物件的標題屬性中，因此對於使用者欄位，示例進行稍微的修改：

{
   "elmType": "div",
   "txtContent": "@currentField.title"
}

查閱項欄位也以物件的形式展示；顯示文字被儲存在lookupValue屬性中，示例如下：

{
   "elmType": "div",
   "txtContent": "@currentField.lookupValue"
}