Format hyperlink column

Question

I have a SharePoint list with 3 hyperlink type columns like this:

I want to format those columns to have something like this and open the link by clicking on the image:

Does anyone know how to do this?

Answer 1

For your requirements, you can use JSON column formatting in SharePoint.

Apply below JSON for "Word Online" and "Word Desktop" columns:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "style": {
        "text-decoration": "none"
    },
    "attributes": {
        "href": "@currentField",
        "target": "_blank"
    },
    "children": [
        {
            "elmType": "img",
            "style": {
                "width": "60px",
                "height": "60px",
                "margin": "5px"
            },
            "attributes": {
                "src": "https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/docx.svg"
            }
        }
    ]
}

Output:

---

Apply below JSON for "PDF" column:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "style": {
        "text-decoration": "none"
    },
    "attributes": {
        "href": "@currentField",
        "target": "_blank"
    },
    "children": [
        {
            "elmType": "img",
            "style": {
                "width": "60px",
                "height": "60px",
                "margin": "5px"
            },
            "attributes": {
                "src": "https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/pdf.svg"
            }
        }
    ]
}

Output:

---

Note: You can change the image URL for word and pdf icons as per your requirements in src property.