Forum Discussion
Multiple lines of data in txtContent of custom hover card
I have a list that I am building a custom view for that will be displayed on a SharePoint page. I would like to create a hovercard that displays some of the item's properties like its title, description, and link. However, I'm stuck on how to add extra lines of data in the txtContent area.
{
"elmType": "div",
"style": {
"font-size":"12px"
},
"txtContent":"@currentField",
"customCardProps": {
"openOnEvent": "hover",
"formatter": {
"elmType": "div",
"txtContent":"='Tip: ' + [$TipTrickTitle]",
"style": {
"font-size":"14px",
"color":"darkred",
"padding":"8px"
}
}
}
}
I've tried things like, "txtContent":"='Tip: ' + [$TipTrickTitle] + \n + 'Link: ' + [$Linktokb], thinking I could use the \n to make it start a new line, then reference my column of data, but that didn't work. The more I try other variants I find online, the more I lose my mind.
Is there a JSON expert willing to help me with what I'm hoping is a simple task! I do prefer the Excel-style expressions as I can't wrap my head around the other method I can't even name, but if I have to use that other method so be it 🙂
You need to create children DIV elements for each item you want to show in a separate line and use the "display" : "block"
style property in your parent DIV element that contains the child DIV elements.{ "elmType": "div", "style": { "font-size": "12px" }, "txtContent": "@currentField", "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "div", "style": { "font-size": "14px", "color": "darkred", "padding": "8px", "display": "block" }, "children": [ { "elmType": "div", "txtContent": "='Tip: ' + [$TipTrickTitle]" }, { "elmType": "div", "txtContent": "='Link: ' + [$Linktokb]" } ] } } }
You need to create children DIV elements for each item you want to show in a separate line and use the "display" : "block"
style property in your parent DIV element that contains the child DIV elements.{ "elmType": "div", "style": { "font-size": "12px" }, "txtContent": "@currentField", "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "div", "style": { "font-size": "14px", "color": "darkred", "padding": "8px", "display": "block" }, "children": [ { "elmType": "div", "txtContent": "='Tip: ' + [$TipTrickTitle]" }, { "elmType": "div", "txtContent": "='Link: ' + [$Linktokb]" } ] } } }Tyler_Borchardt , I see an issue with JSON formatting in SharePoint doesn’t support the \n newline character for creating new lines in txtContent. Instead, you can use nested div elements to achieve the desired multi-line effect. Here’s an example of how you can format your hover card to display multiple lines of data:
{ "elmType": "div", "style": { "font-size": "12px" }, "children": [ { "elmType": "div", "txtContent": "='Tip: ' + [$TipTrickTitle]", "style": { "font-size": "14px", "color": "darkred", "padding": "8px" } }, { "elmType": "div", "txtContent": "='Link: ' + [$Linktokb]", "style": { "font-size": "12px", "color": "blue", "padding": "8px" } } ], "customCardProps": { "openOnEvent": "hover", "formatter": { "elmType": "div", "children": [ { "elmType": "div", "txtContent": "='Tip: ' + [$TipTrickTitle]", "style": { "font-size": "14px", "color": "darkred", "padding": "8px" } }, { "elmType": "div", "txtContent": "='Link: ' + [$Linktokb]", "style": { "font-size": "12px", "color": "blue", "padding": "8px" } } ] } } }In this example, each piece of information (Tip and Link) is placed in its own div element within the children array. This way, they will be displayed on separate lines.
Give this a try and see if it works for your needs. Thanks!
Regards,
Ganesh
