Can you separate multiple values in a single string in @currentfield delimited in some way to make each value a hyperlink

Question

I'm currently using MS's column formatting JSON to turn a field's string entry into a URL using the following to automatically make the ticket number entry a clickable hyperlink to our zendesk for the respective ticket number:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "@currentField",
  "attributes": {
    "target": "_blank",
    "href": "='https://URLANONYMIZED.zendesk.com/agent/tickets/' + @currentField"
  }

However, if we have multiple tickets for the same issue, it would be nice to be able to do the same for multiple values that are separated by a space, comma, or what have you so that each ticket number would link to it's respective ticket. Is this possible? Using Office 365 hosted sharepoint if that matters any.

Answer 1

You can use the below and further customize as needed.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "forEach": "choiceIterator in @currentField",
      "elmType": "a",
      "txtContent": "[$choiceIterator]",
      "attributes": {
        "target": "_blank",
        "href": "='https://URLANONYMIZED.zendesk.com/agent/tickets/' + [$choiceIterator]"
      },
      "style": {
        "width": "100px",
        "height": "16px",
        "text-align": "center",
        "padding": "5px",
        "margin": "1px"
      }
    }
  ]
}

---

Updating to show how to create hyperlinks for [Single line of text] column containing comma, space, or both separated string

Example of string: 34567, 56789, 56789 is separated by a comma(,) and a space.

The JSON needs to be adjusted if there are more than 3 ticket numbers and the number of chars separating them is not 2 (a comma and a space)

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "style": {
        "padding": "5px",
        "display": "=if(indexOf(@currentField + '^', '^')>4,'flex', 'none')"
      },
      "txtContent": "=substring(@currentField, 0, 5)",
      "attributes": {
        "target": "_blank",
        "href": "='https://URLANONYMIZED.zendesk.com/agent/tickets/' + substring(@currentField, 0, 5)"
      }
    },
    {
      "elmType": "a",
      "style": {
        "padding": "5px",
        "display": "=if(indexOf(@currentField + '^', '^')>11, 'flex', 'none')"
      },
      "txtContent": "=substring(@currentField, 7, 12)",
      "attributes": {
        "target": "_blank",
        "href": "='https://URLANONYMIZED.zendesk.com/agent/tickets/' + substring(@currentField, 7, 12)"
      }
    },
    {
      "elmType": "a",
      "style": {
        "padding": "5px",
        "display": "=if(indexOf(@currentField + '^', '^')>18, 'flex', 'none')"
      },
      "txtContent": "=substring(@currentField, 14, 19)",
      "attributes": {
        "target": "_blank",
        "href": "='https://URLANONYMIZED.zendesk.com/agent/tickets/' + substring(@currentField, 14, 19)"
      }
    }
  ]
}

Before applying JSON

After applying JSON