Forum Discussion

specoop's avatar
specoop
Copper Contributor
Aug 12, 2022

SharePoint List: make URL in Column Description a hyperlink

Hello all, For my Sharepoint list, I need to make hyperlinks in the description. NOTE: This works fine in Classic mode, but in Modern, the URLs no longer hyperlinks when in the New or Edit view.   ...
SharePoint Online
specoop's avatar
specoop
Copper Contributor
Sep 09, 2022

specoop Yeah - it's a little unfortunate. I ended up creating some short URLs for my hyperlinks and telling them in the Description field to open up a new tab and then browse to that short URL. It doesn't really fit our need, but seems it's the only option.

 

NOTE: I only did a little testing on this, so it may be inaccurate, but you can add some column formatting to generate links in the answer section (not the description section) - but the hyperlink only appears after a user saves some data. It didn't work great for my column type (which was a date column - so I couldn't figure out how to add a hyperlinked area without a date) but maybe a default value (so hyperlink automatically shows) with some column formatting may fit your need? 

 

NOTE: I also tried seeing if I could add a hyperlink to the column header, but I couldn't figure it out. 

 

Really wish our organization could use PowerApps...

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Sep 09, 2022

    specoop , Tiffany_Jo Let me know if you need any help with adding hyperlinks to list form header or footer. You have to use the JSON for that.

     

    For example: 

     

    {
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "link",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "Click here for details",
                    "attributes": {
                        "href": "https://www.google.com/",
                        "target": "_blank"
                    }
                }
            ]
        }
    ]
}

     

    Output: 

    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

    • specoop's avatar
      specoop
      Copper Contributor
      Sep 09, 2022
      Thanks ganeshsanap!
      So footer could work well, as long as we can add some if statements. With our situation, we've got about 20 different date columns that used to have hyperlinks in the description.

      And only the revent ones show up based upon other selections in the list. See below for example.

      =if([$Column1] == 'Yes' && [$Column2] == 'Yes', 'true', if([$Column1] == 'Yes' && [$Column3] == 'Yes', 'true', 'false')).

      So we have that conditional formatting for each of the 20 or so date columns.

      Any way we could dynamically only have certain columns appear in the footer (that are hyperlinks)? I know it's much harder here compared to PowerApps, but this is what we've got access to.

      Thanks again,
      Spencer
      • ganeshsanap's avatar
        ganeshsanap
        MVP
        Sep 12, 2022

        specoop Yes, you can create multiple hyperlinks in header/footer and show/hide them based on conditions. Here's an example you can refer & build JSON for your requirements accordingly: 

         

        {
    "elmType": "div",
    "children": [
        {
            "elmType": "a",
            "txtContent": "Link 1",
            "style": {
                "display": "=if([$Column1] == 'Yes' && ([$Column2] == 'Yes' || [$Column3] == 'Yes'), 'block', 'none')"
            },
            "attributes": {
                "href": "https://www.google.com/",
                "target": "_blank"
            }
        },
        {
            "elmType": "a",
            "txtContent": "Link 2",
            "style": {
                "display": "=if([$Column5] == 'True value', 'block', 'none')"
            },
            "attributes": {
                "href": "https://www.google.com/",
                "target": "_blank"
            }
        },
        {
            "elmType": "a",
            "txtContent": "Link 3",
            "style": {
                "display": "=if([$Column6] == '', 'block', 'none')"
            },
            "attributes": {
                "href": "https://www.google.com/",
                "target": "_blank"
            }
        }
    ]
}

         

        Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources