Row formatting based on a LOOKUP column value in modern SharePoint List

Question

Modern experience SharePoint List A has a LookUpColumn that retrieves values from NumberColumn in ListB. I need conditional formatting that applies a color across an entire row based on a value in the LookUpColumn.

Currently, lookup columns are not catered for OOTB. So far, I applied JSON but it formats only the column. How do I format an entire row when it is based on a LOOKUP column?

Update: Screenshot show current impact of formatting for row and column:

Answer 1

You have to use view formatting to customize entire row in a SharePoint list.

If you want to just apply the colors to entire row, you should use additionalRowClass property to format the view.

Example: Considering internal name of your lookup column is LookUpColumn, you can use JSON like:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$LookUpColumn.lookupValue] > 75, 'sp-field-severity--good', if([$LookUpColumn.lookupValue] < 75 && [$LookUpColumn.lookupValue] > 50, 'sp-field-severity--low', if([$LookUpColumn.lookupValue] < 50 && [$LookUpColumn.lookupValue] > 25,'sp-field-severity--warning', if([$LookUpColumn.lookupValue] < 25,'sp-field-severity--blocked', ''))))"
}

You can get the correct internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Similarly, you can apply any of the predefined classes given in below links as per your requirements:

1. Predefined classes
2. Reusable SharePoint Online Classes for Modern UI

---

Update from comments:

If [$lkpMile.lookupValue] is not working, try using [$lkpMile] instead of [$lkpMile.lookupValue].

Not sure why [$lkpMile.lookupValue] is not working for you. I have tried it my end & it is working fine for me.

Lookup column settings:

List view formatting output with simple JSON:

---

Microsoft documentation also says,

The lookup field object has the following properties (with example values):

{
   "lookupId": "100",
   "lookupValue": "North America",
}

Source: JSON formatting - Special string values - check "Lookup fields" section

Answer 2

Please follow the steps:

1.In my test, this is the [NumberColumn] field and the [LookUpColumn] field

2.Go to your ListA, click All Items >> Format current view

3.On the Format View windows, click "Advanced mode" link

4.Paste the below JSON formatting and click Save

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "style": {
    "font-style": "ms-fontColor-alert"
  },
  "additionalRowClass": "=if([$LookUpColumn.lookupValue] > 7, 'ms-bgColor-white', if([$LookUpColumn.lookupValue] <= 7 && [$LookUpColumn.lookupValue] > 3, 'ms-bgColor-yellow',  if([$LookUpColumn.lookupValue] <= 3,'ms-bgColor-orangeLighter', '')))"
}