Microsoft Lists: Lookup Panel with JSON

Key insights

• Microsoft Lists Lookup columns can open item details in a side panel on the same page instead of launching new browser tabs, keeping users focused and reducing clutter.
  
• Use JSON column formatting with a customRowAction set to "embed" to open related item pages in the panel; the JSON loops over choices and attaches the action to each lookup entry.
  
• Update the JSON src string to point to your list form, for example using @currentWeb + '/Lists/YOURSOURCELIST_NAME/DispForm.aspx?ID=' + [$choiceIterator.lookupId]; replace YOURSOURCELIST_NAME and rely on lookupId and lookupValue to show the right item.


• Set the panel size responsively with @window.innerWidth and @window.innerHeight (for example width = innerWidth * 0.5) and style list chips with ellipsis and padding so items remain readable and clickable.
  
• Main benefits: enhanced navigation and improved productivity — users stay on one page, switch contexts less, and access related data faster without losing their list view.
  
• Follow best practices: test the solution in SharePoint and Teams, verify permissions and same-domain form access, and provide fallbacks for devices or browsers that block embedded views to keep the experience reliable.
  

Video summary and context

In a recent tutorial, Giuliano De Luca [MVP] demonstrates how to improve the user experience in Microsoft Lists by changing how Lookup columns open item details. Rather than launching new browser tabs, his approach uses JSON column formatting to surface related item details in a side panel on the same page. This arrangement helps users stay focused because it reduces task switching and keeps context visible. Consequently, the demo shows a practical way to streamline list workflows without deep development work.

De Luca walks viewers through the specific JSON structure that triggers an embedded panel, and he explains how the script references the current web and lookup item IDs to build the display link. He also highlights that this technique works in both SharePoint Online and the broader Microsoft Lists experience, including Teams in many cases. Therefore, the method fits organizations that rely on Microsoft 365 components and want faster navigation when inspecting related records. Overall, the video balances hands-on steps with explanations aimed at power users and administrators.

How the JSON solution works

The core idea is to attach a customRowAction to the Lookup column which uses an embed action to open the display form inside a panel sized dynamically to the browser window. Specifically, the JSON uses expressions like @currentWeb and the lookupId to construct a URL such as the DispForm.aspx for the related list item, while width and height settings adapt to the window dimensions. As a result, clicking a lookup value opens the details pane overlaying the current list rather than navigating away. This delivers a more fluid interface because data appears inline and returns users quickly to the list.

Moreover, the JSON sample in the video uses styling and small UI elements such as icons and rounded containers to make the lookup entries look clickable and consistent with the platform’s visual language. De Luca shows how to loop through multiple lookup values when the field contains more than one reference, ensuring each item becomes a separate panel trigger. Thus, the approach supports both single and multi-value lookup columns with minimal changes to the formatting code.

Benefits, tradeoffs, and real-world considerations

One main benefit is clearer navigation: users avoid opening many tabs and maintain their position in the list, which can boost productivity especially for heavy list users. In addition, administrators and power users can customize how much information appears and how it looks using familiar JSON patterns, making the solution adaptable to different teams. However, there are tradeoffs to consider, because using client-side JSON relies on the availability of the DispForm.aspx page and on consistent list structures across environments.

For example, embedding an existing display form can surface permission or performance constraints; if a user lacks access to the target item, the panel will not show expected details and could create confusion. Likewise, mobile or small-screen experiences may require alternative sizing or fallbacks since an embedded panel that works well on desktop could obstruct usability on narrower devices. Therefore, teams must balance the convenience of inline panels against potential accessibility, security, and cross-platform issues.

Implementation tips and common challenges

De Luca recommends testing the JSON in a development list first and verifying behavior in different contexts, such as in Teams and within SharePoint pages. Furthermore, he suggests tuning width and height expressions to avoid panels that are either too small to be useful or so large they mimic a new tab. Administrators should also plan for governance: documenting column formatting, controlling who can edit JSON, and maintaining consistent list templates reduces the risk of future breakage.

Another challenge is maintainability: complex JSON can become hard to read and update, especially when multiple lists use slightly different URL patterns or when site names change. To mitigate that risk, consider using environment variables or clearer naming conventions and include comments where possible in your development notes. Finally, test with varied permission levels to ensure the panel degrades gracefully and provides informative messages rather than leaving users unsure why content does not display.

Conclusion and next steps for teams

Overall, Giuliano De Luca’s video provides a practical, low-code pattern for improving list interactions by opening lookup details in a side panel through JSON column formatting. The approach enhances usability while remaining accessible to power users who can copy and adapt the sample JSON to their environment. However, teams should weigh the benefits against manageability and cross-device considerations and include testing and governance as part of rollout plans.

For organizations seeking faster navigation in Microsoft Lists, this technique represents a useful middle ground between out-of-the-box behavior and full custom development. Consequently, adopting it thoughtfully can reduce friction and help teams stay productive, provided they address access, performance, and mobile usability up front.

Keywords

Microsoft Lists JSON column formatting, Open lookup details panel Microsoft Lists, Improve Microsoft Lists UX, Microsoft Lists lookup panel tutorial, JSON column formatting examples, SharePoint Lists lookup customization, Microsoft Lists UX best practices, Column formatting lookup details panel