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

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

基於日期範圍應用格式化

因為日期常常被用來跟蹤截止時間和關鍵專案時間軸，一個常見的場景是基於日期/時間欄位的值應用格式化。使用下面的方式去應用基於日期/時間欄位的格式化。

當日期欄位在今天之前或之後時格式化列表項(高階)
下圖展示了應用了條件格式化的欄位：

本例會在列表項的到期時間(DueDate)欄位的值小於當前時間時將當前欄位渲染成紅色。跟之前的幾個例子不同，本例將格式化通過觀察其他欄位的值應用到一個欄位。注意到期時間欄位是通過[$FieldName]語法引用的。
欄位名需要是欄位的內部名稱(internal name)。本例還使用了可以在日期/時間欄位應用的@now，它會解析成當前的日期/時間，在使用者訪問檢視時進行轉換。
注意：如果我們的欄位名中包含空格，需要在引用時將它轉換為x0020。例如，對於“Due Date”這個欄位，引用的時候應該為$Due_x0020_Date。

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$DueDate] <= @now, '#ff0000', ''"
  }
}

基於任意時間格式化列表項(高階)
如果要把日期//時間欄位的值跟一個不是@now的時間做比較，參照下面例子中的方式。下面的例子將欄位中到期時間小於等於明天的值標紅。通過使用日期函式完成。我們可以通過新增毫秒來指向任意的日期。例如，如果我們要向一個日期新增1天，我們就可以新增24*60*60*1000=86,400,000。
本例通過在抽象語法樹中使用三元運算子{?}，展示了用來表達一個條件表示式的可替代方法。

{
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "+",
                     "operands": [
                        "@now",
                        86400000
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

將一個日期/時間欄位的值跟另一個日期常量進行比較，使用Date()方法來將字串轉換成日期。下面的例子將判斷DueDate欄位的值，如果在2017/03/22之前，則將當前欄位標紅。

{
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "Date()",
                     "operands": [
                        "3/22/2017"
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}