LookUp column with a custom icon using SharePoint list formatting

by HubSite 365 about Michel Mendes [MVP]

Microsoft MVP | Senior Consultant at Avanade | Microsoft 365 | Power Platform | SharePoint

Pro UserLearning Selection

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

The inquiry revolved around creating a SharePoint list lookup column that displays an icon, which upon clicking opens the lookup column value on a different list. This is a regular hyperlink behavior that the user has achieved with text fields, but not with LookUps. To utilize LookUp field values in SharePoint list formatting JSON, you must access them as subproperties. These properties can be referred as @currentField.lookupValue, @currentField.lookupId, $fieldInternalName.looupValue, or $fieldInternalName.lookupId.

You can encounter a question needing to format a SharePoint list lookup column.
The objective is to make it show an icon that opens the lookup column value on a different list when clicked.
Accessing LookUp field values in SharePoint list formatting JSON must be done as subproperties.
These properties can be @currentField.lookupValue, @currentField.lookupId, $fieldInternalName.looupValue, or $fieldInternalName.lookupId.
Linking LookUp field values with a custom icon is possible and demonstrated in the provided example.

Creating a Link with a Custom Icon from a LookUp Field

In the process of combining LookUp field values with a custom icon, you can form a clickable link from a LookUp field that opens up the list view form for the source list. The href property of the a tag specifically points towards this destination. This method allows for a more interactive and visual way to navigate between lists in SharePoint, adding to user experience.

Read the full article LookUp column with a custom icon using SharePoint list formatting

Learn about LookUp column with a custom icon using SharePoint list formatting

You can use LookUp field values in SharePoint list formatting JSON to access them as subproperties of the field. Combining LookUp field values with a custom icon is possible by generating 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 should point to the list view form for the Source list.

To use LookUp field values effectively in the SharePoint list formatting JSON, you should know how to access the LookUp field values as subproperties of the field. You can do this by using the @currentField.lookupValue and @currentField.lookupId syntax. Alternatively, you can use the $fieldInternalName.looupValue and $fieldInternalName.lookupId syntax.

Once you know how to access the LookUp field values, you can combine them with a custom icon to generate a clickable link. This link should open the list view form for the Source list. You can do this by setting the href property of the a tag to the list view form for the Source list.

In conclusion, you can use LookUp field values in SharePoint list formatting JSON to access them as subproperties of the field. You can also combine LookUp field values with a custom icon to generate a clickable link that opens the list view form for the Source list.

Keywords

SharePoint list formatting, LookUp column, LookUp field values, custom icon, list view form, href property

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

Creating a Link with a Custom Icon from a LookUp Field

Learn about LookUp column with a custom icon using SharePoint list formatting

More links on about LookUp column with a custom icon using SharePoint list formatting

Keywords