1

I have a document library that I want users to be able to add a photo to with a title and descriptions and others be able to hover over the pic in gallery view and see the description AND be able to "like" the pic as well.

I have most of this figured out but can't get the text to show in my hover:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
      "height": 210,
      "width": 254,
      "hideSelection": true,
      "fillHorizontally": true,
      "formatter": {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "children": [
          {
            "elmType": "button",
            "style": {
              "z-index": "9"
            },
            "attributes": {
              "class": "sp-card-defaultClickButton",
              "role": "presentation"
            },
            "customRowAction": {
              "action": "defaultClick"
            },
            "customCardProps": {
              "formatter": {
                "elmType": "div",
                "txtContent": "[$Description]",
                "style": {
                    "font-size": "12px",
                    "color": "black",
                    "padding": "5px"
          }
              },
              "openOnEvent": "hover",
              "directionalHint": "rightCenter",
              "isBeakVisible": true,
              "beakStyle": {
                "backgroundColor": "white"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "relative"
            },
            "attributes": {
              "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer ms-fontColor-white"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "bottom": "0",
                  "right": "0",
                  "z-index": "10",
                  "overflow": "hidden",
                  "cursor": "pointer",
                  "display": "flex",
                  "align-items": "center",
                  "width": "100%",
                  "background-color": "rgba(0,0,0,0.2)"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-black--hover"
                    },
                    "style": {
                      "display": "flex",
                      "width": "100%"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "[$Title]",
                        "style": {
                          "width": "100%",
                          "padding": "10px"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight--hover ms-fontColor-white ms-fontColor-black--hover"
                        },
                        "style": {
                          "border-radius": "6px",
                          "display": "flex"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "style": {
                              "display": "=if(indexOf([$LikedBy.email], @me) == -1, 'flex', 'none')",
                              "padding": "10px",
                              "align-items": "center"
                            },
                            "attributes": {
                              "iconName": "Heart"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "LikesTotal": "=Number(length(appendTo([$LikedBy], @me)))",
                                "LikedBy": "=appendTo([$LikedBy], @me)"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "txtContent": "[$LikesTotal]",
                                "style": {
                                  "font-size": "12px",
                                  "margin-left": "4px",
                                  "font-family": "Segoe UI"
                                }
                              }
                            ]
                          },
                          {
                            "elmType": "span",
                            "style": {
                              "display": "=if(indexOf([$LikedBy.email], @me) == -1, 'none', 'flex')",
                              "padding": "10px",
                              "align-items": "center"
                            },
                            "attributes": {
                              "iconName": "HeartFill"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "LikesTotal": "=Number(length(removeFrom([$LikedBy], @me)))",
                                "LikedBy": "=removeFrom([$LikedBy], @me)"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "txtContent": "[$LikesTotal]",
                                "style": {
                                  "font-size": "12px",
                                  "margin-left": "4px",
                                  "font-family": "Segoe UI"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-lastTextColumnContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-imageContainer"
                    },
                    "children": [
                      {
                        "elmType": "filepreview",
                        "attributes": {
                          "src": "@thumbnail.512x432"
                        },
                        "style": {
                          "height": "200px"
                        },
                        "filePreviewProps": {
                          "brandTypeIconStyle": {
                            "display": "none"
                          },
                          "fileTypeIconStyle": {
                            "display": "none"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    }
1
  • Could you make sure that you filled Description field value because your JSON looks correct anyway. By default Description field is read only so you can follow this to enable it. Please try it and let know whether it works for you or not Jun 7, 2023 at 4:38

1 Answer 1

1

If you are using SharePoint default Description column added to document library, you will have to use correct internal name of this column which is _ExtendedDescription.

You can get the internal name of any column by following this article: How to find the Internal name of columns in SharePoint Online?

But this column is not a plain text column. So, you will see the HTML tags in your custom hover card.

So, I will suggest you to create a new multiple lines of text (plain text) column in your document library and use it for adding description to your images.

Library view (with metadata):

enter image description here

Tiles view (after applying JSON):

enter image description here

JSON: Similar to what you added to your question - just used the column names as per my setup

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 210,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "style": {
          "z-index": "9"
        },
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        },
        "customCardProps": {
          "formatter": {
            "elmType": "div",
            "txtContent": "[$CustomDescription]",
            "style": {
              "font-size": "12px",
              "color": "black",
              "padding": "5px"
            }
          },
          "openOnEvent": "hover",
          "directionalHint": "rightCenter",
          "isBeakVisible": true,
          "beakStyle": {
            "backgroundColor": "white"
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "relative"
        },
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer ms-fontColor-white"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "bottom": "0",
              "right": "0",
              "z-index": "10",
              "overflow": "hidden",
              "cursor": "pointer",
              "display": "flex",
              "align-items": "center",
              "width": "100%",
              "background-color": "rgba(0,0,0,0.2)"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-bgColor-black--hover"
                },
                "style": {
                  "display": "flex",
                  "width": "100%"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "width": "100%",
                      "padding": "10px"
                    }
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight--hover ms-fontColor-white ms-fontColor-black--hover"
                    },
                    "style": {
                      "border-radius": "6px",
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "style": {
                          "display": "=if(indexOf([$LikedBy.email], @me) == -1, 'flex', 'none')",
                          "padding": "10px",
                          "align-items": "center"
                        },
                        "attributes": {
                          "iconName": "Heart"
                        },
                        "customRowAction": {
                          "action": "setValue",
                          "actionInput": {
                            "LikesTotal": "=Number(length(appendTo([$LikedBy], @me)))",
                            "LikedBy": "=appendTo([$LikedBy], @me)"
                          }
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "txtContent": "[$LikesTotal]",
                            "style": {
                              "font-size": "12px",
                              "margin-left": "4px",
                              "font-family": "Segoe UI"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "span",
                        "style": {
                          "display": "=if(indexOf([$LikedBy.email], @me) == -1, 'none', 'flex')",
                          "padding": "10px",
                          "align-items": "center"
                        },
                        "attributes": {
                          "iconName": "HeartFill"
                        },
                        "customRowAction": {
                          "action": "setValue",
                          "actionInput": {
                            "LikesTotal": "=Number(length(removeFrom([$LikedBy], @me)))",
                            "LikedBy": "=removeFrom([$LikedBy], @me)"
                          }
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "txtContent": "[$LikesTotal]",
                            "style": {
                              "font-size": "12px",
                              "margin-left": "4px",
                              "font-family": "Segoe UI"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "filepreview",
                    "attributes": {
                      "src": "@thumbnail.512x432"
                    },
                    "style": {
                      "height": "200px"
                    },
                    "filePreviewProps": {
                      "brandTypeIconStyle": {
                        "display": "none"
                      },
                      "fileTypeIconStyle": {
                        "display": "none"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

If you want to show/hide custom hover card conditionally based on if description column is blank or not, follow my answer at: SharePoint Online JSON formatting - Conditional Popup

2
  • 1
    Truly Ganesh, you are such a huge wealth of knowledge. Thank you, again!! This worked perfectly!!!! :) :)
    – Beth C
    Jun 7, 2023 at 20:49
  • You're welcome, glad it worked for you! Jun 8, 2023 at 4:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.