This meeting among State Changers focused on overcoming user experience (UX) issues related to a data grid on a website platform. The main problem was a UX issue with the horizontal and vertical scroll bars of the data grid not cooperating as intended.
The implementer, Matthew, initially created the data grid with functionality that allowed for horizontal scrolling of the table (identified as cells), but if it overflows, it is not ideally visible by default. Another problem is that the horizontal scrolling of data headers operates separately from the table itself. The original approach was to introduce custom JavaScript to watch for scrolling behaviour and automatically adjust the header scrolling. An interactive debugging session involved utilising Dev Tools to highlight potential issues with the JavaScript code, concentrating on event listeners in relation to 'cells' and 'headers'. A significant discovery was that the 'cells' being watched for the scroll event was encapsulated within another container that should be considered for scroll events. Towards the end, after several modifications, a successful script was initiated with scroll events being finally caught, leading to an improvement in the UX. The solution also thoughtfully considered hiding the scrollbar completely by the overflow property, a subtle design enhancement aiding the UX greatly. The learning curve for Matthew in this process brought into light about case-sensitivity in JavaScript, process of calling the 'parentNode' of an element and the usage of 'console log' for debugging in JavaScript. The meeting also explores an intriguing question raised by Matthew concerning how the accompanying JavaScript worked within the 'WeWeb' editor without needing to be published - with Ray explaining the intricacies of the WeWeb editor, its advantages and limitations. This meeting is highly insightful for anyone dealing with custom JavaScript in a low-code platform like WeWeb, especially for those attempting to manipulate scrolling behaviour for a better UX design.
(Source: Office Hours 9/26/2023 - Plus an Extra! )
