Display an Image in SharePoint list when click on a new button in the list through JSON

Loading

Requirement: when user clicks on the +New button in the SP list to create an item, the table or the Image which helps the user for what to be selected at the required fields has to be displayed at the header of the item filling list.

Below the marked area has to get the Image with link & the link has to navigate the user to the Image or table

  • Initially we need add the required Image to the site library or where you require the Image to be stored
  • click on upload
  • select files to upload
  • Go the list
  • Select +New
  • will find a ‘Edit Form’ Icon on the right top corner of the list
  • Click on ‘icon’
  • select the Header from the dropdown
  • can select the required place under the dropdown section, where you want to insert
  • provide the required code into the ‘Formatting Code’ space as per required(Includes text color, http link, font size etc)
  • then click on save button
{
    "debugmode": "true",
    "elmType": "div",
    "style": {
        "display": "flex",
        "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",
            "attributes": {
                "class": "ms-fontColor-blueMid ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "text-align": "left",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "Click here to go to Table",
                    "attributes": {
                        "target": "_blank",
                        "href": "https://rishansolution.sharepoint.com/:i:/s/MikaPublishers/EcDeoJJ2OK9EjWBFqkZ0SUwBkZHI__HUPh0Ztm-CnqfgUQ?e=i1G0kS",
                        "class": "ms-fontColor-sharedGreenCyan10 ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "children": [
                {
                    "elmType": "img",
                    "style": {
                        "width": "70px",
                        "padding-left": "10px"
                    },
                    "attributes": {
                        "src": "/sites/MikaPublishers/SiteAssets/table img.png"
                    }
                }
            ]
        }
    ]
}

Copy the Image source link from the the Site Assets where the Image has been saved earlier and provide the link in ‘href’ attribute, So when the user click on the link navigates to the Table.

Final Outputs

when the user click on +New in the list to create an item the link and the Image of the table reflects at the top of the list

when clicks on ‘Click here to go to Table’ the table gets open

Leave a Reply

Your email address will not be published. Required fields are marked *