How to display multiple Lookup column values on one line whilst retaining the links - sharepoint-online

Question

By default, the values in a Lookup column display as links.
Clicking on these links takes you to the relevant item in the lookup list.
When setting the column to Allow multiple values, each value is displayed on a separate line.
To make the values appear on one line, I have applied this column formatting:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "=join(#currentField.lookupValue, ', ')"
}
This results in the desired behavior of the values being on one line, separated by commas, eg:
Value1, Value2, Value3
However, the values are just plain text, ie the links have been removed.
How can I retain the links for each of the values, whilst still displaying them on one line.
Edit 1:
It seems that Lookup columns have two properties available via column formatting:
.lookupValue
.lookupId
When you click on a link in a Lookup column, it goes to a URL with this structure:
https://tenant-name.sharepoint.com/sites/site-name/Lists/Some%20List/DispForm.aspx?ID=n
Where the n at the end of the URL is the lookupId.
So one possible solution would be to:
use .lookupId to get the ID of the item in the lookup list
for each value in the lookup column, construct the URL and concatenate the .lookupId value to the end
Using this post an inspiration, the following code almost works, but the ID value in each of the links is output as the same (and is also incorrect):
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "a",
"style": {
"display": "block",
"width": "100%"
},
"txtContent": "=join(#currentField.lookupValue, ', ')",
"attributes": {
"target": "_blank",
"href": "='https://tenant-name.sharepoint.com/sites/site-name/Lists/Some%20List/DispForm.aspx?ID=' + [$ID]"
}
}
]
}
Edit 2:
Based on this answer, which references this blog post, the following achieves the desired behaviour using forEach, but it adds a trailing comma on the end of all last values in the column:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"forEach": "lookupIterator in #currentField",
"elmType": "a",
"txtContent": "=[$lookupIterator.lookupValue] + ', '",
"attributes": {
"target": "_blank",
"href": "='https://tenant-name.sharepoint.com/sites/site-name/Lists/Some%20List/DispForm.aspx?ID=' + [$lookupIterator.lookupId]"
}
}
]
}
Below is another way to do it using operator and operands but it still shows the undesired trailing comma:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"forEach": "lookupIterator in #currentField",
"elmType": "a",
"txtContent": {
"operator": "+",
"operands": [
"[$lookupIterator.lookupValue]", ", "
]
},
"attributes": {
"target": "_blank",
"href": "='https://tenant-name.sharepoint.com/sites/site-name/Lists/Some%20List/DispForm.aspx?ID=' + [$lookupIterator.lookupId]"
}
}
]
}
I don't know if it's possible to somehow define different concatenation on the last item in the loop, with something like:
"=if(loopIndex('lookupIterator') == length(#currentField - 1), 'DON'T ADD COMMA', 'DO ADD COMMA')"

Answer 1

This seems to work:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"forEach": "lookupIterator in #currentField",
"elmType": "a",
"txtContent": "=if(loopIndex('lookupIterator') == length(#currentField) - 1, [$lookupIterator.lookupValue], [$lookupIterator.lookupValue] + ', ')",
"attributes": {
"target": "_blank",
"href": "='https://tenant-name.sharepoint.com/sites/site-name/Lists/Some%20List/DispForm.aspx?ID=' + [$lookupIterator.lookupId]"
}
}
]
}
It uses forEach, an if() statement, loopIndex and length() to concatenate values conditionally, i.e:
if it's the last item in the loop, don't add the separating comma
if it's not the last item in the loop, do add the separating comma
To be honest, i'm surprised the conditional structure worked in there, and the referenced column values as well.
Bonus
It seems you can also add a style property under txtContent which uses the same conditional logic, just to make the gap between values larger than the default 1 space character, i.e:
"style": {
"padding-right": "=if(loopIndex('lookupIterator') == length(#currentField) - 1, '0px', '5px'"
},