New Features in WoltLab Suite 6.0: Overhauled Google Maps, Dialogs and Comments

Maps

The map function is based on Google Maps and is used in the calendar, in the image gallery and in various third-party plugins. The previous implementation of the maps feature dates back to the jQuery era and was in dire need of a complete revamp. It suffered from a poor performance and an insufficient error handling. At the same time, the map function lacked a privacy-friendly 2-click solution, which unfortunately could not be meaningfully retrofitted due to the technical architecture of the previous implementation.

With WoltLab Suite 6.0, we therefore completely discarded the old map feature and rewrote it from scratch, taking into account the different use cases that arose over the years. The new implementation is now based on Web Components and takes advantage of modern JavaScript features. The error handling in the map function was also significantly improved, which previously caused a lot of frustration in the case of an incorrect API key for Google Maps, for example.

Last but not least, we added the 2-click solution to the map, which is already known from other third-party content. So now, on the first invocation, the user must first confirm that they want to display the map.

Dialogs

The dialogs have been revised in many ways in WoltLab Suite 6.0. At first glance, you’ll notice the more lightweight presentation, which does away with particularly color-intensive separations and places a clearer focus on the content. The buttons have been repositioned and are now aligned to the right-hand edge, with the primary button occupying the position furthest out. The design is based on established standards, which we have been used to for a long time on smartphones, among other things.

Technically a lot has been done, with the new dialogFactory() we offer a significantly simplified logic for developers to create dialogs with as little effort as possible and to invest the time in functionality instead. This also benefits users of the software in that we can use these tools to ensure uniform operation of dialogs, which again show significant improvements, especially in the area of accessibility. Clear guidelines for the design of titles and buttons also help to achieve these goals. We will continuously revise the dialogs we use in subsequent versions and convert them to the new dialogs.

Comments

The comment function is used in various places in WoltLab Suite, for example in articles. The frontend part of the comment function was technically outdated and had some weaknesses in terms of usability and accessibility. We have largely redeveloped HTML, Javascript and CSS of the function to meet modern standards. Once again, Web Components are used in the new design. All in all, the revision offers a tidier look, better accessibility and better operation on mobile devices.

Paginations

Paginations are used in WoltLab Suite whenever many elements need to be listed on one page. Examples here would be the member list or the posts in a thread. The previous pagination function existed twice in the software, one for static usage and another one for the dynamic use cases. The disadvantage of two implementations is the doubled maintenance effort and that it can quickly happen that the two functions do not behave identically. Furthermore, the previous pagination had weaknesses in accessibility.

We have therefore completely redeveloped the function as a common implementation based on a Web Component for all use cases. In doing so, we followed modern standards to ensure the greatest possible user friendliness and, above all, accessibility.