Improve Microsoft Lists UX: Open Lookup Details in a Panel with JSON Column Formatting

Boost Microsoft Lists UX with JSON Column Formatting!
In this video, I’ll show you how to enhance the user experience in Microsoft Lists by customizing Lookup columns. Instead of opening new tabs, you can open item details in a panel on the same page using JSON column formatting.
✅ What you’ll learn:

How to apply JSON formatting to Lookup columns
How to open related item details in a side panel
Tips to improve navigation and productivity in Microsoft Lists

This solution is perfect for anyone looking to streamline workflows and make Microsoft Lists more user-friendly.
📌 Resources & Links:
-https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference#customrowaction
-https://sites.google.com/view/microsoft-lists-hub/lookup
👍 Like this video if you find it helpful and subscribe for more Microsoft 365 tips!
#MicrosoftLists #JSONFormatting #Microsoft365 #Productivity

This is the JSON used in the video:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"flex-wrap": "wrap",
"display": "flex",
"margin": "8px 0px"
},
"children": [
{
"forEach": "choiceIterator in @currentField",
"elmType": "div",
"customRowAction": {
"action": "embed",
"actionInput": {
"src": "=@currentWeb + '/Lists/YOUR_SOURCE_LIST_NAME/DispForm.aspx?ID=' + [$choiceIterator.lookupId] + '&env=WebView'",
"height": "@window.innerHeight",
"width": "=@window.innerWidth * 0.5"
}
},
"style": {
"box-sizing": "border-box",
"padding": "5px 12px 6px 12px",
"overflow": "hidden",
"text-overflow": "ellipsis",
"display": "flex",
"border-radius": "16px",
"box-shadow": "2px 2px 2px #999793",
"height": "30px",
"align-items": "center",
"white-space": "nowrap",
"margin": "4px 4px 4px 4px",
"cursor": "pointer"
},
"attributes": {
"class": "sp-field-fontSize14 ms-fontWeight-semibold sp-css-color-DarkBlueText sp-css-backgroundColor-BgCornflowerBlue sp-css-backgroundColor-blue--hover ms-fontColor-white--hover"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Switch"
}
},
{
"elmType": "div",
"style": {
"margin-left": "10px"
},
"txtContent": "[$choiceIterator.lookupValue]"
}
]
}
]

}

👇
🔔Don't forget to subscribe to my channel to stay tuned Subscribe: https://www.youtube.com/giulianodeluca?sub_confirmation=1
👆

Join this channel to get access to perks:
https://www.youtube.com/channel/UC5g-jILjch3bASlH6bYDgqQ/join

☕ Buy me a coffee
https://www.buymeacoffee.com/fykrqts

📺 REQUEST VIDEOS THAT YOU'D LIKE TO SEE
https://forms.office.com/r/NjTNvfaY13

🎬More Videos:
-Microsoft Teams: https://www.youtube.com/playlist?list=PLRKPRVekwUn9D8fI26_6vajIo7tuDScTW
-Microsoft SharePoint: https://www.youtube.com/playlist?list=PLRKPRVekwUn-3UEGYv99TbO6IBE0F1gL5
-Microsoft 365: https://www.youtube.com/playlist?list=PLRKPRVekwUn-kYhf_xj38Dy8umE21Jb66
-Azure: https://www.youtube.com/playlist?list=PLRKPRVekwUn_e8sBXPMxGJBj9WgYrv8YD
-PowerPoint: https://www.youtube.com/playlist?list=PLRKPRVekwUn8cE0BsC-JLQAosfbD1mF1u
-⚙Tools: https://www.youtube.com/playlist?list=PLRKPRVekwUn94drCWUuqYFPtOTa_7aass
-Shorts: https://www.youtube.com/playlist?list=PLRKPRVekwUn8V14C8MVMlD9Fc_7NviD_F

📺My YouTube Channel:
https://www.youtube.com/giulianodeluca

🔗Let’s connect on social:
https://www.facebook.com/delucagiulian
https://www.linkedin.com/in/delucagiuliano/
https://twitter.com/delucagiulian
https://www.tiktok.com/@delucagiulian
https://www.instagram.com/delucagiulian
https://delucagiuliano.com

⏲Timestamps
00:00 Introduction
00:55 Intro to the potential scenario and issue
03:49 How to improve the experience of the lookup column
10:52 Looking the experience in Microsoft Teams
12:20 Conclusion

#GiulianoDeLuca #DeLuca

Видео Improve Microsoft Lists UX: Open Lookup Details in a Panel with JSON Column Formatting канала Giuliano De Luca