SOLVED

Image column On Select

Copper Contributor

Hi all,

I want to do that when a user is clicking on the image it will view the item and not opening the image in another tab.

Is it possible?

2 Replies
best response confirmed by LidorD (Copper Contributor)
Solution

@LidorD You can use JSON column formatting on image column. Use JSON like: 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "customRowAction": {
    "action": "defaultClick"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "@currentField.serverRelativeUrl"
      },
      "style": {
        "width": "100px",
        "cursor": "pointer"
      }
    }
  ]
}

 

DocumentationUse column formatting to customize SharePoint 

Note: You can change styling in above JSON as per your requirement.


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.

For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

Hi @LidorD

 

If I understand correctly, you want the users to click on the image from the image column to be navigate to the corresponding list item. You can try using the column formatting from the below link.

 

https://pnp.github.io/List-Formatting/ 

1 best response

Accepted Solutions
best response confirmed by LidorD (Copper Contributor)
Solution

@LidorD You can use JSON column formatting on image column. Use JSON like: 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "customRowAction": {
    "action": "defaultClick"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "@currentField.serverRelativeUrl"
      },
      "style": {
        "width": "100px",
        "cursor": "pointer"
      }
    }
  ]
}

 

DocumentationUse column formatting to customize SharePoint 

Note: You can change styling in above JSON as per your requirement.


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.

For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

View solution in original post