Unveiling the Grid View: The Journey to Organize Space

Image designed by Freepik

What goes into building a modern tool to manage structured content in the web? Besides the benefits of today’s technology, the Tridion Docs Engineering team put a lot of care and attention into every feature, every UI.  Let me share a simple example to illustrate our approach. 

As a passionate software engineer on the Tridion Docs team I am currently involved in the development of Grid View for Organize Space which is helping to visualize a repository list table, such as a list of images, in a grid mode. This is a nice feature for quickly finding images, since the images are visual objects. So, this feature has been on our to-do list since Organize Space was released in Tridion Docs 15. After the release, customers naturally requested this functionality, missing it compared to the old Web Client.  

Goodbye, Web Client 

Good old friend: Web Client! A tool that had served us well, handling countless transactions and boasting a plethora of features. However, it was time for a change. To be fair it was not easy to provide feature parity with Web Client in our journey for developing the new goodie; Organize Space, with its fresh look and feel and very user-friendly interfaces.  

That is exactly why we retired the Web Client. It was old and naturally slow Blush based on former technologies VB6 and classic ASP. Organize Space brought a new face to the Tridion Docs product family, with a modern, faster, and more responsive interface, built within the React ecosystem and using OpenAPI. 

The Process Behind 

As we developed each feature in the newer technology and designs, we aimed not only for parity with the Web Client’s features but surpassing them. We aimed for improved interaction, such as more intuitive navigation with less clicks to achieve a certain task; enhanced usability, like streamlined workflows for common tasks; and consistency, ensuring uniform design elements across all views. 

Our design, development and product teams were all hands-on deck analyzing and refining our features. We also valued the feedback from demo sessions, service requests, community ideas, and internal Tech Link questions. This process helped us a lot in the development of the Grid View.  

The Need for Grid View 

Summer of 2023 arrived, we launched Tridion Docs 15, that was a big move, but we were not done. Organize Space hungered for more. Thumbnail View? Still missing. But wait! On the same summer, questions about missing thumbnail functionality found a voice via Tech Link e-mails and service requests. What makes it important? This view can be helpful to find/choose the images, like the much-appreciated Item Selector in Draft Space. 

Addressing the Challenge 

After these, we reviewed what we had before, discussed what can we do now. Our mission? Not just matching the same functionality but covering broader scenarios with a newer design. 

We considered the out-of-box “thumbnail resolution” which used for view-only purpose, and we knew that not all customers use it. With older technology, showing images in thumbnail view was slow, as downloading all images in their larger versions was inefficient. We optimized by creating thumbnail resolutions, but it could affect performance, due to frequent database accesses. To solve this, we introduced the ISHTHUMBNAILS plugin, which stored the thumbnail resolution's identifier in a place where we can access in less time when we need.  

However, we could not rely on the existence of thumbnail resolutions, as not all customers used the rendition plugin which generates different resolutions of the image automatically upon upload of a new image file. Thus, we revised this thumbnail mechanism and decided not to use it while switching to newer and faster technologies.  

Modern Solutions 

The later question was: now how will we help our users to visualize images in a folder to quickly find the ones they need? We found a good way to address that with a view switcher on top of Explore View table. This switcher allows users to show lists in a table or grid cells using a virtualized list. A virtualized list is a performance optimization technique that only visualizes/renders the visible part of a large list, improving efficiency and reducing memory consumption.  

Besides using virtualized list, we should still have to be smart on not downloading megabytes of data in case of default resolution (we always visualize images in default resolution in the Explore List View) is configured as “High” resolution. To tackle this, a new setting called “Grid resolution” is introduced for grid view visualization. Customers can set this according to their needs, while we have "Low" as the default grid resolution for performance. Voila! Thumbnail view became Grid View. A puzzle piece, fitting perfectly into Organize Space. 

With this new technical implementation, does it require more attention for users? No, because regular users will not even be aware that they are viewing a different resolution of the image. In addition to this, grid resolution is a system default setting that will be set by the “Administrator” privileged user, and it is unlikely to be frequently changed during the lifetime of the customer integration.  

Moving Forward 

The journey continues, with new challenges, achievements, and opportunities for growth. As in the Grid View example, we take another step forward. This small example shows the care, thought and attention that our team invests in every aspect of our work. As we continue to build new features, each one is crafted with the same level of dedication, ensuring the best possible functionality and experience for our users. Stay tuned for more exciting updates as we continue to push the boundaries of what is possible. 

  • Thank you Alvin! Yes, number of virtualized images are calculated in the client-side. Screen resolution and browser size percentage also effective on that, a virtualized grid renders the visible part and an extra row which is the first row that you will see when you scroll down. If we take the example in screen shot, we are seeing 15 images in 3 rows, in addition to those next row also loaded to make it ready for scrolling. Lets say next row is a full row with 5 images, then 5 more images are loaded and the rest are virtualized. 

    Hope that explains the virtualization behavior of our Grid View.

  • Nice post, Yasemin! Great focus on performance with some flexibility with the Grid resolution setting. We'll want to be sure to cover the setting in new implementations and upgrades. 

    Are the number of "virtualized" images calculated client-side somehow? Like does screen resolution, browser size percentage, or resizing the browser impact what's virtualized (automatically)?

    In the example screenshot I see 15 images. Would those be the ones virtualized or are there more beyond just what's seen, if that makes sense?