Forum Discussion

Chauche's avatar
Chauche
Copper Contributor
Aug 02, 2024

List Hyperlink active based on value

Hi All,

 

I have a hyperlink column which need to get active only when display text is "Yes". The two other option "No" and "Not Required" when entered should not create a hyperlink. Below is the code which gives me result accurately with all formatting but don't want hyperlink for "No" and "Not Required". Any help appreciated.

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "txtContent": "@currentField.desc",
      "attributes": {
        "href": "@currentField",
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField.desc",
                "Yes"
              ]
            },
            "sp-css-backgroundColor-BgGreen sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField.desc",
                    "No"
                  ]
                },
                "sp-css-backgroundColor-BgRed sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField.desc",
                        "Not Required"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField.desc",
                            ""
                          ]
                        },
                        "",
                        "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

 

  • NikolinoDE's avatar
    NikolinoDE
    Gold Contributor

    Chauche 

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField.desc",
                    "Yes"
                  ]
                },
                "sp-css-backgroundColor-BgGreen sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField.desc",
                        "No"
                      ]
                    },
                    "sp-css-backgroundColor-BgRed sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField.desc",
                            "Not Required"
                          ]
                        },
                        "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "@currentField.desc",
                                ""
                              ]
                            },
                            "",
                            "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          },
          "children": [
            {
              "elmType": "a",
              "txtContent": "=if(@currentField.desc == 'Yes', @currentField.desc, '')",
              "attributes": {
                "href": "=if(@currentField.desc == 'Yes', @currentField, '')"
              },
              "style": {
                "box-sizing": "border-box",
                "padding": "4px 8px 5px 8px",
                "overflow": "hidden",
                "text-overflow": "ellipsis",
                "display": "flex",
                "border-radius": "16px",
                "height": "24px",
                "align-items": "center",
                "white-space": "nowrap",
                "margin": "4px 4px 4px 4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "=if(@currentField.desc != 'Yes', @currentField.desc, '')",
              "style": {
                "box-sizing": "border-box",
                "padding": "4px 8px 5px 8px",
                "overflow": "hidden",
                "text-overflow": "ellipsis",
                "display": "flex",
                "border-radius": "16px",
                "height": "24px",
                "align-items": "center",
                "white-space": "nowrap",
                "margin": "4px 4px 4px 4px"
              }
            }
          ]
        }
      ]
    }

    NOTE: My knowledge of this topic is limited, but since no one has answered it for at least one day or more, I entered your question in various AI. The code are the result of AI. Maybe it will help you further in your project, if not please just ignore it.

     

    My answers are voluntary and without guarantee!

     

    Hope this will help you.

    • Chauche's avatar
      Chauche
      Copper Contributor
      NikolinoDE thanks for the reply. The function does not create a hyperling to the option other than "Yes" but gives the "Invalid URL" error message which doesn't allow to save the changes.

Resources