Thank you for visiting my site!

Home / Lists / Column Formatting – Turn Choice field values into hyperlinks

Column Formatting – Turn Choice field values into hyperlinks

Resources: https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples

Turn choice field into a link

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "@currentField",
  "attributes": {
    "href": "='https://site/Lists/listName/AllItems.aspx?FilterField1=FileID&FilterValue1='+[$ID]",
    "target": "_blank"
  }
}

turn choice into colored boxes
Column settings -> Format this Column -> Background Colors -> Edit Styles

->

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "[$StatusLinktoTask]",
            "Not Started"
          ]
        },
        "sp-css-backgroundColor-blueBackground37",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$StatusLinktoTask]",
                "Active"
              ]
            },
            "sp-css-backgroundColor-warningBackground50",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$StatusLinktoTask]",
                    "Resolved"
                  ]
                },
                "sp-css-backgroundColor-successBackground50",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$StatusLinktoTask]",
                        "Closed"
                      ]
                    },
                    "sp-css-backgroundColor-neutralBackground30",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$StatusLinktoTask]",
                "Not Started"
              ]
            },
            "",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$StatusLinktoTask]",
                    "Active"
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$StatusLinktoTask]",
                        "Resolved"
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$StatusLinktoTask]",
                            "Closed"
                          ]
                        },
                        "",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "[$StatusLinktoTask]",
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$StatusLinktoTask]",
                "Not Started"
              ]
            },
            "",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$StatusLinktoTask]",
                    "Active"
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$StatusLinktoTask]",
                        "Resolved"
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$StatusLinktoTask]",
                            "Closed"
                          ]
                        },
                        "",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  ]
}


colored choice field into link

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "href": "='https://site/Lists/listName/AllItems.aspx?FilterField1=FileID&FilterValue1='+[$ID]",
    "target": "_blank",
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "[$Status]",
            "Not Started"
          ]
        },
        "sp-css-backgroundColor-blueBackground37",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$Status]",
                "Active"
              ]
            },
            "sp-css-backgroundColor-warningBackground50",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Status]",
                    "Resolved"
                  ]
                },
                "sp-css-backgroundColor-successBackground50",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Status]",
                        "Closed"
                      ]
                    },
                    "sp-css-backgroundColor-neutralBackground30",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$Status]",
                "Not Started"
              ]
            },
            "",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Status]",
                    "Active"
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Status]",
                        "Resolved"
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$Status]",
                            "Closed"
                          ]
                        },
                        "",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "[$Status]",
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$Status]",
                "Not Started"
              ]
            },
            "",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Status]",
                    "Active"
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Status]",
                        "Resolved"
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$Status]",
                            "Closed"
                          ]
                        },
                        "",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

ADD YOUR COMMENT