Forum Discussion

Tyler_Borchardt's avatar
Tyler_Borchardt
Brass Contributor
Jun 19, 2024
Solved

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, descript...
  • nhuawork's avatar
    nhuawork
    Jul 25, 2024

    Tyler_Borchardt:

     

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

     

ganeshglitz's avatar
ganeshglitz
Copper Contributor
Jul 26, 2024

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

Resources