使用欄位格式化來自定義SharePoint(四)

Justin-Liu發表於2018-09-10

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

建立可點選的操作

我們可以使用欄位格式化來提供訪問其他頁面的超連結,或執行自定義的功能。這種功能被限制為靜態連結,可以使用列表中欄位的值進行引數化。除了http://、https://或mailto:,我們無法使用欄位格式化去輸出連結協議。

將欄位值轉換為超連結(基礎)
本例展示瞭如何將包含股票行情符號的文字欄位轉換為指向雅虎財經對股票行情實時引用的超連結。例子中使用了+操作符,將當前欄位的值附加到靜態超連結http://finance.yahoo.com/quote/。我們可以將這種方式擴充套件到想要使用者檢視列表項相關上下文資訊或在當前列表項上啟動業務流程等的任意場景。
這裡寫圖片描述

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

向欄位新增操作按鈕(高階)
下圖展示了新增到欄位中的操作按鈕。
這裡寫圖片描述
我們可以使用欄位格式化去渲染欄位旁的快速操作連結。下面的使用者欄位的例子將會在父級DIV元素中生成以下兩個元素:

  • SPAN元素,包含使用者欄位的顯示名。
  • A元素,它會開啟一個mailto的連結,建立一個帶有標題和內容的電子郵件介面並彈出,通過列表項的後設資料為其賦值。A元素使用ms-Icon、ms-Icon-Mail和ms-QuickAction這三個Fabric類進行樣式定義,使它看起來像是一個可以點選的電子郵件圖表。
{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px"
            },
            "txtContent": "@currentField.title"
        },
        {
            "elmType": "a",
            "attributes": {
                "iconName": "Mail",
                "class": "sp-field-quickAction",
                "href": {
                    "operator": "+",
                    "operands": [
                        "mailto:",
                        "@currentField.email",
                        "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n",
                        "@currentField.title",
                        "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=",
                        "[$ID]"
                    ]
                }
            }
        }
    ]
}

相關文章