Forum Discussion

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

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

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

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"
            }
        }
    ]
}