Listings are omnipresent in WoltLab Suite - whether for displaying users, forum threads or the error log. However, the features of the lists differs considerably in some cases. Some actions, such as deleting items, are only possible via the listing page, while others are only available when editing an item. This discrepancy not only leads to an inconsistent user experience, but also makes it difficult for new administrators to familiarize themselves with the system.
In addition, although these lists can often be sorted, they generally offer no or only limited filtering options, which makes working with large amounts of items more difficult. For developers, this means that even basic functions such as sorting or simple actions such as filtering often require repeated, time-consuming boilerplate code - a clear indication of potential for improvement in the technical foundation.
Efficient Presentation of Tabular Listings with Grid Views
Grid Views are a central element for displaying large amounts of data in a structured, tabular form. They are specially designed for scenarios in which a clearly organized overview is crucial – such as the list of users in the admin panel or the error log. Thanks to the predefined layout, they offer consistent and familiar operation that can be grasped intuitively.
Standardized Interface for Maximum Overview
The layout of Grid Views is based on established design principles: Column headings, uniform cell structure, hover and selection behavior as well as fixed control elements such as a filter bar and an action menu. This standardization ensures that users can quickly find their way around new lists.
List of Articles as Grid View
Convenience and Standard Functions
A key feature of Grid Views is the integrated convenience functions that are provided as a standard. These include sorting, filtering, multiple selection and page numbers for navigating through large lists of entries. The filter function is based on the familiar filter dialog from the forum thread list – but implemented in an even more powerful and user-friendly way.
Interactions: Execute Specific Actions
Actions within the Grid Views are controlled via the concept of interactions. These not only allow the targeted execution of actions for individual entries, but also – if supported – for a selection of several elements at the same time. For example, several data records can be edited, deleted or exported at the same time without having to navigate elsewhere.
Modern Behavior with AJAX – Without Sacrificing Usability
Both sorting and navigation via the page numbers are loaded via AJAX, which guarantees a fast and seamless user experience. Despite the dynamic reloading, the changes are applied in a predictable way: The URL is updated accordingly with every interaction. This makes it easy to save specific views as bookmarks or share them with other people. The browser’s back button also works reliably so that you can return to previous states at any time.
List Views for Listings with Design Freedom
List Views essentially behave like Grid Views, but are ideal for scenarios in which content is to be listed but not necessarily displayed in a table. In contrast to Grid Views, these do not have a fixed layout, but function as a flexible construction kit. Developers can define the layout themselves using a template and, as with Grid Views, use ready-made solutions for standard functions such as filters, sorting, interactions and navigation via page numbers. List Views are particularly suitable for the use of lists on the page itself, for example the list of articles.
List of Articles as List View
Modular Construction Kit for Developers
The creation of listings is a recurring task for developers, but the development and maintenance of such listings can quickly become time-consuming, especially with complex requirements. With the modular Grid & List View system, developers now have a powerful tool at their disposal that tackles precisely this problem - and significantly reduces the effort involved.
At the heart of the system is a sophisticated modular system that encapsulates numerous functionalities and makes them reusable. Instead of building each list individually, developers use ready-made components - from sorting and filtering to interaction logic and AJAX navigation. This results in robust list views with minimal code effort, where the technical foundation is continuously maintained by WoltLab.
Grid Views excel at classic, tabular listings. Thanks to the predefined structure and comprehensive standard features, grid views can be implemented in many cases without writing any custom JavaScript code. Functions such as column sorting, AJAX navigation or bulk actions are directly integrated – the focus is entirely on the configuration, not the implementation.
Another advantage: Filtering is based on the familiar FormBuilder, which not only ensures a familiar user experience, but also guarantees maximum expandability. Custom filter fields, validations or dynamic options can be easily added.
Extensibility Through Plugins
Although Grid & List views have a lot to offer out of the box, they are not a rigid system: Existing listings can be expanded or customized in a targeted manner - for example with your own columns, actions or interaction logic. Each view has a dedicated event that is triggered after initialization, regardless of where this data is retrieved from.
Developers can find details on the technical implementation of Grid & List Views in the developer documentation:
