Dashboard Reboot

The TYPO3 Dashboard is evolving, and in version 14 it is more powerful than ever. This session takes a closer look at the recent improvements, including key changes introduced in version 13. We will explore how the new Settings API brings user-configurable widgets to life and how you can take advantage of these capabilities in your own extensions. Whether you're building custom insights or enhancing the editor experience, this talk will help you get the most out of the Dashboard.

Transcript

1. Dashboard Reboot Benjamin Kott benjamin.kott@outlook.com @benjaminkott From fucked up to future proof. Honest insights.
2. Benjamin Kott Frontend Developer Core Merger Consultant @benjaminkott benjamin.kott@outlook.com
3. Once upon a time.
4. TYPO3 User Experience Week 2018
6. T3UXW18: Scope Meta Tag API SEO Extension Kickoff Content Blocks Kickoff Dashboard Kickoff
7. Dashboard: Kickoff New Entry Point for Editors Customizable Widgets Predefined Data Sources Charts, Feeds, Actions, Workflow information Sharable Presets Provisionable Dashboards A place the Editor can customize to its needs, without the need for an Integrator/Developer
8. User Stories Dashboard As Developer I would like to build widgets with a well defined stable API in order to have an efficient workflow and add widgets to many of my extensions I would love to have a very flexible API for defining widgets in order to provide the metrics users need I would love to have the option to integrate data from third party sources in order to display the metrics user need I want to define the status of an widget (Severity API) in order to inform the user if something critical happened I want to define the badge content of a widget (number or short string) in order to display at least some information on mobile screens on the first look I would love to have a list of predefined components for parts of my widget and normally do not want to fiddle with JavaScript in order to have maintainable code As the Maintainer I would like to add predefined widgets to my system by installing extensions in order to provide the information needed by my users and version them in a VCS I would like to add predefined dashboards to my system by installing extensions in order to provide the information needed by my users and version them in a VCS As Administrator
9. I would like to have a widget showing the number of currently active users in order to help me to decide when to publish content I would like to have a widget showing a photograph of something personal (child, wife, boat, diamonds) in order to feel comfortable in my working environment I would like to have a widget helping me to get started in order to ensure I get not frustrated after the first login I would like to have a widget showing links to documentations, videos, forums, facebook, slack in order to ensure I get not frustrated after the first login I would like to have an widget showing me random how-to tips: How to use the clipboard, bulk edit in list module, change my password, handle file metadata, translation tipps, RTE and texting tips in order to improve my TYPO3 skills I would like to have a widget showing my badges earned at skill display and the expiring ones in order to keep my TYPO3 knowledge up to date As a sponsor I want to buy space in a widget (and support TYPO3 with this money), to offer my products or services. E.g.: courses, support, manpower (e.g. for freelancers), hosting providers, … As a extension author I would like to have an about widget, which randomly shows extensions their author and a way to contribute or donate to get an revenue stream
11. Translation Epic: As the typo3.fr responsible, I want a “French Team Dashboard”, in order to have the global picture of the editing,translating and marketing status of the french version of typo3.com US 1: As the typo3.fr responsible, I want a global translation status widget, in order to have a short overview of the translating work I have to achieve. US 2: As the typo3.fr responsible, I want a widget giving me the list of the new or modified original records since my last connexion, in order to directly translate them without having to search them manually. US 3: As the typo3.fr responsible, I want a geographic google analytics statistic widget, in order to have a short overview of website presence in my country. US 4: As the typo3.fr responsible, I want a pages view google analytics widget, in order to have a short overview of most important pages I have to work on. US 5: As the typo3.fr responsible, I want a blog comment widget, in order to be able to answer easily.
12. Marketing Epic : As the Marketing responsible of a website, I want a “Marketing Dashboard”, in order to have a global picture of the marketing status of the website. US 1 : As the Marketing responsible of a website, I want a social media widget, in order to have a short overview of the social media status of the website. US 2 : As the Marketing responsible of a website, I want a video performance widget, in order to know which video campain are the most popular. US 3: As the Marketing responsible of a website, I want a Newsletter performance widget, in order to know the number of mails opened for my latest newsletter. US 4: As the Marketing responsible of a website, I want a notifications widget, in order to be as responsive as possible for some important issues (example : no news since 5 days, Bonce rate 53%, 4 contents to publish in the xxx workspace, etc.) US 5: As the Marketing responsible of a website, I want a blog comment widget, in order to be able to moderate them.
13. System Maintenance As administrator I want to monitor common metrics, which give me the chance to get an overview about the system health, security etc. As administrator I want to understand the chance of values of metrics over time in oder to predict future behaviour As administrator I want to use metrics depending on the scope of my administrative work. This also means understanding value changes of the metric over time is the key information. As administrator i want to see the status of certain subsystems over time.
14. Kay Strobach Richard Haeser Marco Christian Krenn Rachel Foucard Kai van Grunsven
15. Development progressed alongside the SEO Initiative, and the TYPO3 Dashboard was introduced on February 27, 2020, making its way into the LTS release with version 10.4.
16. In hindsight, it was a mistake. We compromised on usability, extensibility, features, everything we had set out to achieve.
17. Broader adoption of the Dashboard failed because we missed the details that mattered.
18. The Dashboard has seen no ownership or meaningful progress since release. It felt abandoned.
19. FAST FORWARD
21. TYPO3 was choosen to be the basis for the German Goverment Site Builder (GSB11) In April 2022, we were contacted for specific A11Y issues. Especially Keyboard navigation problems in the Dashboard. They provided some patches. We reviewed them…
25. 1 3 6 4 2 5
26. 1 3 6 4 2 5 The positions are not stored, it`s just a list in the database. Where the widgets are, is a matter of luck and available space. With the patch, the position in that list was changed up, or down. But only when you focused the draghandle. And you would only see a difference when you are lucky.
28. Actions are only visible on mouse hover Actions not accessible via keyboard User Intention not respected on move Storage only contains a list with the widgets Every interaction forces a reload aside from moving Scope lost after inserting widgets Widgets are only renderers without data attachment Widgets were not user scoped Widgets are hardcoded Widgets cannot be configured by the user Rendering unreliable / positions on viewports …
30. We needed to fix it somehow…
31. We looked at our options, and decided to take least invasive option and try just to replace the lib responsible for the positioning with something that respects the user intend.
32. Available implementations tend to be rigid and inflexible, offering no viable solution for our use case. We couldn’t find a library that meets our requirements.
34. REWRITE?!
35. This time to last and actually cover our needs. Famous last words.
36. We had a problem. With the resources available, we couldn’t meet the v13.4 LTS deadline. Still, the issue was critical and couldn’t wait another 18 months to be fixed.
38. Complete rework of the Dashboard UI Widgets need to become Instances Widgets instances must ship data Widgets must store positions Custom Widgets Provide Templates Custom Widgets Provide CSS and JS Must be non-breaking (post 13.0) No Database changes
39. TYPO3 v13.4.6 LTS shipped a New Dashboard
42. We kept the look We changed the feel
43. <DEMO>
45. All interactions moved to API endpoints Streamlined Datatransfer Position Storage per Viewport Keyboard accessible Actions always visible No reloads The focus follows your actions The frontend is now a reactive component
47. <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true" > <f:layout name="Module" /> <f:section name="Content"> <typo3-dashboard></typo3-dashboard> </f:section> </html>
48. dashboard_categories_get dashboard_dashboard_add dashboard_dashboard_delete dashboard_dashboard_edit dashboard_dashboard_update dashboard_dashboards_get dashboard_presets_get dashboard_widget_add dashboard_widget_get dashboard_widget_remove dashboard_widget_settings_get dashboard_widget_settings_update
49. Shortly after that. We were reminded that we are not done.
52. You still could not configure the widgets and store the configuration.
53. Fear not, citizens of TYPO3! The Settings API is here to save the dashboard - just as soon as I rewrite everything, we missed the first time.
54. We just needed to add new rendering modes, improving the rendering, adding property validations, some new types, some factories here and there, additional loading options, bugfixes, well the usual stuff.
55. <DEMO>
57. <?php use TYPO3\CMS\Core\Settings\SettingDefinition; use TYPO3\CMS\Dashboard\Widgets\WidgetRendererInterface; class ConfigurableWidget implements WidgetRendererInterface { public function getSettingsDefinitions(): array { return [ new SettingDefinition( key: 'title‘, type: 'string‘, default: 'Default Title‘, label: 'LLL:EXT:….xlf:settings.label‘, description: 'LLL:…:settings.description.label‘, ), ];
58. description: 'LLL:…:settings.description.label‘, ), ]; } public function renderWidget(WidgetContext $context): WidgetResult { $settings = $context->getSettings(); $title = $settings->get('title‘); $limit = $settings->get('limit‘); // Use settings to customize widget output return new WidgetResult( label: $title, content: '<!-- widget content -->‘, refreshable: true ); } }
59. final readonly class WidgetContext { public function __construct( public readonly string $identifier, public readonly array $rawData, public readonly WidgetConfigurationInterface $configuration, public readonly SettingsInterface $settings, public readonly ServerRequestInterface $request, ) {} }
60. We revisited the initial requirements, build and continue to enhance the existing infrastructure.
61. Resizable Widgets Paginatable Widgets More Workflow Widgets
62. The dashboard is now the most modern module from UI and Interaction design we have in the backend.
63. It also gives a peek into, where we want to head with the backend.
64. Seamless interactions, giving editors the speed and experience they deserve.
65. If you ever thought „wouldnt it be nice if…“. Now is the time.
66. Help us own the dashboard. Give it a try, feel the improvements, think about whats missing. Let´s shape it together.
67. Kay Strobach Richard Haeser Marco Christian Krenn Rachel Foucard Kai van Grunsven