SOLVED

Issue with Hovercard displaying text from multi line column type

Copper Contributor

Hi all,

 

I've been attempting to use the example from 

List-Formatting/view-samples/horse-crests at master · pnp/List-Formatting · GitHub

 

to setup a Hovercard in the view formatting on a Microsoft list to display the text from a specific column but it seems to have an issue with multi line text columns.

 

History - I tried initially just adapting that code from above and ran into the issue that although I could see the Hovercard appear it wasn't displaying any text (from a multi line column, not rich text), I then created the solution precisely per Github and youtube vid and used the exact JSON and it had the same issue,  it seems to work if I specify the $Title column in both instances though, and I then created an additional single line text field and this worked.

 

I'll paste the examples JSON below, sorry about the length, can anyone confirm what's going on here? They appear to use a multi row column type in the demo?

 

Thanks all

 

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"tileProps": {
"width": "214",
"height": "280",
"formatter": {
"elmType": "div",
"style": {
"border-radius": "7px",
"width": "200px",
"height": "264px",
"margin-top": "7px",
"margin-left": "7px",
"box-shadow": "0 3px 7px 0",
"position": "relative"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"height": "100%",
"display": "flex",
"flex-direction": "column",
"align-items": "center"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "14px",
"position": "relative"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "170px",
"padding-left": "10px"
},
"attributes": {
"class": "ms-fontColor-neutralLight",
"iconName": "ShieldSolid"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"font-size": "170px",
"top": "10",
"left": "24px"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary",
"iconName": "Shield"
}
},
{
"elmType": "svg",
"style": {
"position": "absolute",
"width": "88px",
"height": "100px",
"top": "40px",
"left": "60px",
"fill": "currentColor"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M 13.293424,79.005018 C -0.23486286,59.040168 9.3124783,43.447536 9.3124783,43.447536 7.0942758,42.790838 0,47.4402 0,47.4402 3.9901158,32.817586 25.936774,20.394322 25.936774,20.394322 23.500522,19.502762 16.627352,21.273658 16.627352,21.273658 34.582366,3.9931728 56.531572,10.419033 56.531572,10.419033 57.193873,6.6474772 68.061743,0 68.061743,0 66.950094,1.10095 66.501767,7.0947858 66.501767,7.0947858 67.610358,5.09667 71.163356,3.1021214 71.163356,3.1021214 c -1.99353,4.6493614 0,14.6231246 0,14.6231246 5.763048,5.768142 12.189927,25.7228 12.189927,25.7228 l 2.445425,3.545864 c 3.104667,4.439972 1.963467,11.420638 -1.11165,13.076392 -11.52406,6.22157 -12.638765,-5.09514 -12.638765,-5.09514 C 62.514708,53.866568 55.419922,43.221844 55.419922,43.221844 42.566164,49.870848 49.725142,68.628272 55.275234,75.831063 62.406192,85.064067 57.184703,100 57.184703,100 c 0,0 -30.533151,-1.264483 -43.891279,-20.994982 z"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"font-family": "Brush Script MT",
"font-size": "32px",
"font-weight": "bold",
"border-bottom-style": "solid",
"border-bottom-width": "2px"
},
"attributes": {
"class": "ms-borderColor-themePrimary--hover ms-borderColor-white"
},
"txtContent": "[$Title]"
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"top": "0",
"left": "0",
"right": "0",
"bottom": "0"
},
"customCardProps": {
"openOnEvent": "hover",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"width": "200px",
"padding": "20px"
},
"txtContent": "[$History]"
}
}
}
]
}
}
}

 

 

3 Replies
best response confirmed by Baldo1060 (Copper Contributor)
Solution

@Baldo1060 Can you check if you are using correct internal name of your multiple lines of text column? It is required to use internal name of column in JSON formatting.

 

Check this article to find the internal name of your SharePoint column: How to find the Internal name of columns in SharePoint Online? 


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, definitely using the internal name, the column names are simple and internal names have been created the same, only column not so is the $Title column which has a different display name.

Thanks for the suggestion but not an issue that I can see in this instance.
Ahhh, curse my fat thumbs :) Looks like it is the issue, I checked the column name in the edit column settings and although I have the correct name displayed on the column the URL does indeed tell a different story.

I guess I fat thumbed it on the initial creation and corrected it, and then forgot about it.

I blame tinkering under the influence of a glass of wine or two.

Thanks a lot @ganeshsanap for making me take a closer look.

Matt
1 best response

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

@Baldo1060 Can you check if you are using correct internal name of your multiple lines of text column? It is required to use internal name of column in JSON formatting.

 

Check this article to find the internal name of your SharePoint column: How to find the Internal name of columns in SharePoint Online? 


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