LookUp column with a custom icon using SharePoint list formatting

I recently got question from a follower on LinkedIn, which I thoght that the answer can be useful for more people:

I am struggling with formatting a SharePoint list lookup column. I want to make it show an icon but when I click it, it should open the lookup column value on that other list (normal lookup hyperlink behavior). I have achieved this before with text fields but never with Lookups. Any help would be appreciated!

How to use LookUp field values

If you want to use LookUp field values in SharePoint list formatting JSON, you need to access them as subproperties of the field:

@currentField.lookupValue

@currentField.lookupId

OR

$fieldInternalName.looupValue

$fieldInternalName.lookupId

Combining LookUp field values with a custom icon

As requested in the question above, you can also find the below example. In this example we generate a clickable link with an Icon, from a LookUp field that opens the list view form for the Source list.

The href property of the a tag points to the relative path of the display form of the source list and the item ID being generated dynamically by using the @currentField token subproperty @currentField.lookupId.

There are two child span elements inside of the a tag, one holding the icon, and another with the value to be displayed. The text value is obtained by using the @currentField token subproperty @currentField.lookupValue:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "class": "ms-fontColor-themePrimary  ms-fontWeight-semibold",
    "target": "_blank",
    "href": "='/sites/yoursite/Lists/sourcelistpath/DispForm.aspx?ID=' + @currentField.lookupId"
  },
  "style": {
    "text-decoration": "none",
    "display":"flex",
    "flex-direction":"row",
    "gap":"0.5rem"
  },
  "children": [
    {
      "elmType": "span",
       "attributes":{
         "iconName":"LookUpEntities"
        },
        "style":{
          "margin-right":"0.25rem"
        }
    },
    {
      "elmType":"span",
      "txtContent": "=@currentField.lookupValue"
    }
  ]
}

Results

By using the above JSON template, we can convert a LookUp field into a link with an icon, that opens the source items in display mode from the source lookup:

Reference: Use column formatting to Customize SharePoint

The post LookUp column with a custom icon using SharePoint list formatting appeared first on michelcarlo.

Original Post https://michelcarlo.com/2023/07/15/lookup-column-with-custom-icon-using-sharepoint-list-formatting/