Forum Discussion

Holland1970's avatar
Holland1970
Copper Contributor
Jan 19, 2024

Add hyperlink to external site to gallery view card

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])"
}
]
}
]
}
]
}
]
}
}

Resources