2

Is it possible to format each value in a choice column as URL with JSON formatting?

I have the following values, mostly 2-3.

  • RoadmapIds: 84027
  • BlogLink: https://oneurl
  • ExternalLink: https://anotherurl

I would like to make the 2 URL's clickable. So, I tries this, but this doesn't work. Even if I put some static URL in the href attribute.

Is it even possible to create links on item level in a multiselect column?

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "__INTERNAL__ in @currentField",
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "overflow": "hidden",
        "margin": "4px 4px 4px 4px"
      },
      "txtContent": "[$__INTERNAL__]",
      "attributes": {
        "href": "=replace(@txtContent, 'ExternalLink: ','')"
      }
    }
  ]
}

1 Answer 1

1

You are using wrong elmType in your JSON. To create links, you have to use the a elemType.

For example (with static link):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "choiceIterator in @currentField",
      "elmType": "a",
      "txtContent": "[$choiceIterator]",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "overflow": "hidden",
        "margin": "4px 4px 4px 4px",
        "text-decoration": "none"
      },
      "attributes": {
        "href": "https://www.google.com/",
        "target": "_blank"
      }
    }
  ]
}

Output:

enter image description here


Similar JSON sample: Multi-Choice link

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.