SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Multi-lookup fields and projected fields

Lookup columns that support multiple values can be formatted using the advanced `forEach` property. Unfortunately, the way values are returned for any projected fields (additional columns associated to your lookup column) can present unique challenges. This sample provides two formats illustrating the difference in how these columns are formatted.

Get this format View on GitHub

Shared by Chris Kent, Tim Hunt
Updated Aug 14, 2023

Multi-lookup fields and projected fields formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "flex-start",
    "padding": "11px 0",
    "min-height": "0"
  },
  "children": [
    {
      "elmType": "div",
      "children": [
        {
          "forEach": "itemIterator in split(@currentField,';')",
          "elmType": "div",
          "txtContent": "[$itemIterator]",
          "style": {
            "padding-bottom": "1px"
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitionmulti-lookup-projected-field.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /children/0/children/0/forEach must match pattern "^[^\]\$@\. ]+ in (\@currentField|\[\$.+\])$"

From the contributor

How to use this sample

Summary

Lookup columns that support multiple values can be formatted using the advanced forEach property. Since the inclusion of the split operation, projected fields (additional columns associated to your lookup column) can now also be formatted using the same method. This sample provides two formats illustrating the difference in how these columns are formatted.

screenshot of the sample

Multi-Lookup Columns vs Projected Fields

A lookup column becomes a multi-lookup column when you check the Allow multiple values box under the primary column selection in the classic Column Settings screen for the Lookup column. If you check the box for any additional columns, these values become projected fields.

List Settings for Lookup Field

Formatting Multi-Lookup Columns

The multi-lookup.json format should be applied to your primary lookup column. This format uses the forEach property to act as a template elment for each selected lookup value for an item. This format puts each value in its own box.

We are accessing the value portion of the lookup item by using the lookupValue syntax (alternatively, we could access the lookup list's item id for the item with lookupId).

Formatting Multi-Lookup Projected Fields

Unfortunately, multi-lookup projected fields don't come back as nice. Instead of being an array of objects, the values are all joined into a single line of text with multiple values separated by a space and a semi-colon (as seen in the Standard Display above).

We can now use the split operation to separate the string into an array which can then be used with the forEach property, with the $itemIterator value for the txtContent.

It's ideal to match the formatting properties of the projected fields with the primary lookup column to ensure the values line up correctly.

View requirements

  • The multi-lookup.json format can be applied to any multi-value lookup column
  • The multi-lookup-projected-field.json format can be applied to any projected field

Sample

Solution Author(s)
multi-lookup-projected-field.json Chris Kent, Tim Hunt
multi-lookup.json Chris Kent

Version history

Version Date Comments
1.0 April 22, 2021 Initial release
1.1 August 14, 2023 Updated projected field to use split and forEach

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes