Add hyperlink to external site to gallery view card

Copper Contributor

I am trying to edit a SharePoint list gallery view card JSON so that the hyperlink column appears as a working link on the card. I can get the link to appear, but it only opens the card. Below is my JSON.

{
"height": 600,
"width": 300,
"hideSelection": true,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"flex-wrap": "wrap",
"display": "flex",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"white-space": "wrap",
"overflow": "hidden",
"margin": "1px 4px 4px 1px"
},
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Title.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Title]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!field_0.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$field_0.displayValue] == '', '–', [$field_0.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$field_0.displayValue] == '', '–', [$field_0.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!field_1.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$field_1.displayValue] == '', '–', [$field_1.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$field_1.displayValue] == '', '–', [$field_1.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!field_8.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$field_8]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline"
},
"txtContent": "=if ([$field_8] == '', '–', [$field_8])",
"style": {
"-webkit-line-clamp": "2",
"height": "125px",
"white-space": "wrap"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Instructor.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Instructor]",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Instructor] == '', '–', [$Instructor])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!RegLink.DisplayName]"
},
{
"elmType": "a",
"attributes": {
"title": "Registration Link",
"href": "[RegLink]",
"target": "_blank"
},
"style": {
"color": "blue",
"font-weight": "bold",
"pointer-events": "=if ([$Hyperlink] == '', 'none', 'auto')",
"text-decoration": "underline"
},
"txtContent": "=if ([$RegLink] == '','-', [$RegLink])"
}
]
}
]
}
]
}
]
}
}
1 Reply

@Holland1970 

 

This issue is because of the div element with defaultClick action and sp-card-defaultClickButton class. So, you will have to remove the related div element from your JSON format.

 

Check these threads for more information/examples:

  1. JSON formatting SharePoint list link inside gallery 
  2. Make a value clickable in an SPO List Gallery View 

Also, make sure you are using correct internal name of your hyperlink column in the JSON. You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online? 

 

Additional Read: Check this article for using external images in the SharePoint JSON formatting: SharePoint Online: External Image URLs not working in JSON Formatting 


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.