Forum Discussion
A-Borges
Dec 05, 2023Copper Contributor
Inconsistency with JSON Formatted Floating Cards in SharePoint Lists Modern UI
Dear Microsoft Tech Community,
I'm reaching out to seek assistance with a crucial aspect of our SharePoint List used for shipment tracking that seems to be adversely affected by the modern UI (when the list is opened with Microsoft Lists).
Main Issue: JSON Formatting of Floating Status Cards
We employ JSON formatting to display floating status cards within our SharePoint List, offering a quick overview of various shipment statuses. This feature functions flawlessly within the traditional SharePoint site interface, with the card expanding beyond the column width to display content as intended. However, when using Microsoft Lists' modern UI, the card is incorrectly resized to the width of the column. This resizing causes the content to wrap, disrupt the layout, and significantly reduce the card's readability and usefulness.
See attached animations below:
Animation 01: shows the floating card in the SharePoint site interface, displaying the content in full without any wrapping, allowing for a complete and clear view.
OldUI
Animation 02: demonstrates the problematic behavior in the modern UI, where the same card is squeezed into the column width, causing an unwelcome wrap of text and icons.
ModernUI
Additional Note: Absence of a :floppy_disk: 'Save' Button in Modern UI
Additionally, we've noticed that the modern UI lacks a 'Save' button when editing items. This automatic saving of every change is not conducive to our workflow as it prematurely triggers our Power Automate flows, intended to run only after a user finalizes their edits. While this issue is secondary to the JSON formatting concern, it still represents a significant deviation from the expected functionality.
The complete JSON code used in this specific column to generate the floating card can be found in the link below.
âž” (Replit) JSON Code for floating card
Request for Guidance and Resolution:
I am looking for solutions or workarounds that can help us:
- Preserve the floating card's full visibility as experienced in the traditional interface.
- Potentially reintroduce a :floppy_disk: 'Save' button or delay the trigger of Power Automate flows until all edits are complete.
Technical Details:
Browser: Microsoft Edge for Business
Version 119.0.2151.97 (Official build) (64-bit)
SharePoint Version: SharePoint Online
While I am aware that reverting to the classic UI is a temporary workaround by modifying the list's URL, it is not a sustainable or forward-looking solution. The modern UI offers a range of enhancements that significantly improve user experience and productivity. It's faster, more visually appealing, and reduces the need for manual adjustments, such as column width resizing. Therefore, I am keen on having these issues addressed within the new UI itself.
Thanks!
No RepliesBe the first to reply