CODEWITHSUNDEEP
jsonsharepoint-online
Vij
Vij

Reputation: 59

How do you insert a image file into a JSON code on sharepoint online list

I am working on a document checklist for my users and my second column 'Description' currently has the '?' in it. Currently the code allows the user to hover over the '?' and see a further description if needed as below. enter image description here

I would like to replace with the '?' with an image, similar to a tooltip ? to ensure the list looks clean. I was wondering if this was possible in Sharepoint online. This is the current code I have.

{"$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json","elmType":"div","style":{"font-size":"12px"},"txtContent":"?","customCardProps":{"formatter":{"elmType":"div","txtContent":"[$Description]","style":{"font-size":"12px","color":"green","padding":"5px"}},"openOnEvent":"hover","directionalHint":"bottomCenter","isBeakVisible":true,"beakStyle":{"backgroundColor":"white"}}}

Is this a simple replacement of a code or would this require a more complicated process?``

Upvotes: 0

Views: 814

Answers (1)

Julie_MSFT
Julie_MSFT

Reputation: 411

We can add iconName attribute as shown below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
   "attributes": {
    "iconName": "SunQuestionMark"
  },
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "[$Description]",
      "style": {
        "fontsize": "12px",
        "color": "green",
        "padding": "5px"
      }
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

My test result for your reference:

enter image description here

Upvotes: 1

Related Questions