1

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

enter image description here

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

enter image description here

Does anyone know how to do this?

1 Answer 1

0

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:

enter image description here


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:

enter image description here


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.