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. 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. 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. ➔ https://replit.com/@AlissonBorges2/Shipment-Tracker-Floating-Card#index.js 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!Getting Started with React and SharePoint - From a UX Designer/Developer's Perspective
If you've been keeping watch on the new SharePoint Framework you have undoubtedly read or experienced the dichotomy of extremely basic "Hello World" articles and if not basic, then articles written by hard core-code-ninja programmers. If you’re a Designer, Developer or UX Practitioner trying to make sense of the React and Modern SharePoint Framework universe it can be difficult reconciling these two very different spectra. From a UX Practitioner's standpoint we need to know enough about Development to strategically understand what's possible in Design, while attempting to make a User’s experience better. That middle ground of development and design when focused inside of SharePoint helps to build exciting experiences and promote healthy User Adoption. The goal of this 5-part series is targeted at the hybrid role of Designer, Developer and UX Practitioner in an attempt to navigate through some of the poorly documented and major hurdles of React Development. Part 1 – CSS tricks and working with syntax Part 2 – Integration of third party or legacy plug-ins Part 3 – Images, SVG graphics and Components Part 4 – REST call to a SharePoint List and displaying the results Part 5 – Building a super cool React Modern SharePoint Web Part React SharePoint Modern Framework Web Part – we will be building this in Part 5 of this series. Alright, enough talk let’s get started. Part 1 CSS in React Ok so if you’re like me and have been using traditional CSS for almost 20 years, CSS inside React at first... is a little painful. There is an in-depth blog post written by Agata Krzywda about CSS and React https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 detailing almost every situation and use case. The article mentioned by Agata is very helpful for understanding CSS and React, but what the article doesn’t take into account are the real-world syntactical oddities that we run into on a daily basis, which like I’ve mentioned are generally missing from 80% of online React documentation. The SPFX team at Microsoft has done a great job by giving us the SPFX boiler plate webpart that generates the code below. Deciphering the CSS in the SPFX boiler plate has a pretty steep learning curve partially because the boiler plate project hides some key ingredients that if you are not outwardly looking for them, you'll miss out on the learning experience. Example the Office Fabric .css file is buried in the node_modules folder and is not referenced through import in the head of the page... so if you were trying to understand where "ms-bgColor-themeDark" is being referenced its completely confusing... Let's take a look at Lines 11, 14. Line 11: <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}> Line 14: <div className={"ms-font-1 ms-fontColor-white"}> These two lines show different ways to use CSS in React that mimic 90% of the web at large. Now Let's look at Line 16. Notice there's some different stuff going on here... "styles" is the imported reference to the scss file and "label" is the class name. Line16: <div className={styles.label}> * The big take away here is that CSS in React has multiple ways to use it, and you can choose which works best for you depending on your situation. Below are some extremely useful and hard to find syntactical variations of CSS in React, that go beyond the CSS article written by Agata and that also extend the SPFX boiler plate example from Microsoft. Here are a few super helpful examples of className syntactical combinations Multiple class names with hyphens concatenated together while still referencing the import iconstyles module. className={[iconstyles["glyphicon"], iconstyles["glyphicon-star-empty"]].join(' ')} Entire string of static classes in a string with a variable name inside the string <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}> Multiple static classes along with a variable name concatenated together className={[`mix`, `all`, item.Category ].join(' ')} Class name as a static string. Notice the use of this ( ` ) not ( ‘ ) or ( “ ) className={`mix`} Class used classically in a variable as larger static string const htmlstring = ` <div class="row mixitup-wrapper"></div>`; This table hopefully saves a fellow Designer, Developer or UX Practitioner some time and effort, I know while I was picking up React each variation of CSS was a watershed moment. In Part 2 of this series we are going to hammer out how to work with third party plug-ins inside React like JQuery, Bootstrap and MixitUp.
