Sharepoint Lookup Column - Change Text Colour Without Losing Hyperlink

Question

This new format for SharePoint lists has caused a lot of visual issues. One of which is related to the lookup column field.

I need to change the text colour of this column, but when I do so I lose the default functionality of being able to click on the lookup column value and have it either open a new tab linking to the referenced lookup list item, or open a mini list dialogue box depending on whether I'm in the list view or detailed view.

I've tried adusting the JSON code to change the colour & restore the hyperlink functionality, but currently it does 2 things incorrectly:

1. It changes my current web browser page to the linked list location when clicking on the hyperlink as opposed to opening a new tab.
2. It doesn't open the mini dialogue list when in the detailed view, it just changes my current web browser page.

Essentially all I'm trying to do is keep the default lookup column functionality, but change the colour of the hyperlink text. JSON code below for what I'm currently trying:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": {
      "operator": "+",
      "operands": [
        "/sites/FieldOperations/Lists/Building%20List/DispForm.aspx?ID=",
        "@currentField.lookupId",
        "&IsDlg=1"
      ]
    },
    "style": {
      "text-decoration": "underline",
      "color": "#89cff0"
    }
  },
  "txtContent": "@currentField.lookupValue"
}

Answer 1

Hi Jordan Daley

The JSON code you’re using is changing the current web page instead of opening a new tab or a mini dialogue list. The issue lies in the fact that SharePoint column formatting does not support the target attribute in the a element, which is typically used to open links in a new tab (target="_blank").

# If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Answer 2

Hi @Jordan Daley ,

Welcome to Q&A forum!

To change the text color of a SharePoint lookup column without losing the hyperlink functionality, you can use the following JSON code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": {
      "operator": "+",
      "operands": [
        "/sites/FieldOperations/Lists/Building%20List/DispForm.aspx?ID=",
        "@currentField.lookupId",
        "&IsDlg=1"
      ]
    },
    "style": {
      "text-decoration": "underline",
      "color": "#89cff0"
    },
    "target": "_blank",
    "data-interception": "off"
  },
  "txtContent": "@currentField.lookupValue"
}

Note that the"target": "_blank" attribute opens the hyperlink in a new tab.

But unfortunately, the mini dialogue list behavior isn’t directly achievable using column formatting.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.