TYPO3 Dashboard

Extension key

dashboard

Package name

typo3/cms-dashboard

Version

12.4

Language

en

Author

TYPO3 contributors

License

This document is published under the Open Content License.

Rendered

Tue, 08 Jul 2025 09:20:56 +0000

This TYPO3 backend module is used to configure and create backend widgets.

Table of Contents:

Introduction: What does it do?

This extension provides a new TYPO3 backend module "Dashboard". Users can create multiple dashboards visible in this module, and switch between those dashboards. Each of the dashboards can have multiple widgets.

Developers are able to create new widgets. Integrators and developers are able to register new widgets through configuration.

Installation

Target group: Administrators

This extension is part of the TYPO3 Core, but not installed by default.

composer show | grep dashboard

typo3/cms-dashboard       v12.4.11

composer require typo3/cms-dashboard

Installation without Composer

In an installation without Composer, the extension is already shipped. You just have to activate it. Head over to the extension manager and activate the extension.

For Editors

Target group: Editors

Welcome to our small dashboard introduction. We will explain the basic usage of the TYPO3 dashboard.

Opening Dashboard

By default the dashboard is opened when logging into the backend.

The dashboard can be opened at any time by clicking the entry Dashboard in the module menu.

Note

If the entry Dashboard is not visible in the menu there are two possible causes:

• You lack sufficient rights to view the dashboard.
• The system extension dashboard was not installed on your system.

Ask your administrator about this.

Adding Dashboard

The EXT:dashboard allows to have multiple dashboards. Switching between different dashboards is possible by using the corresponding tab.

In order to add further dashboards, press the + sign.

A wizard should open which allows to add the new dashboard.

There you can select a preset. At least the default preset, which is shipped by core should be available. Depending on system configuration further dashboard presets might be available.

Editing Dashboard

Existing dashboards can be edited and deleted. On the right side of the tab bar are the icons which allow deletion and adjusting settings of the currently active dashboard.

Adding Widgets

Widgets can be added to a dashboard. Dashboards which do not contain any widget yet, offer a dialog in the middle of the screen, which allows to add one or more widgets to the current dashboard.

All dashboards allow to add further widgets in the lower right corner through the + Icon.

Once the action to add a new widget was triggered, a wizard opens which allows to select the widget to add.

Widgets are grouped in tabs and can be added by clicking on them.

Moving Widgets

Widgets can be moved around. Therefore a widget needs to be hovered. If a widget is hovered some icons appear in the upper right corner of the widget.

To move the widget, click and hold left mouse button on the cross icon. Then move to the target position.

Deleting Widgets

To delete a widget, the widget needs to be hovered. If a widget is hovered some icons appear in the upper right corner of the widget.

Click the trash icon which appears to delete the widget.

In order to prevent accidentally deletion, a modal is shown to confirm deletion. Confirm by clicking the Remove button.

Configuration

Target group: Developers and Integrators

Register new Widget

Registration happens through Dependency Injection either in Services.yaml or Services.php. Both files can exist and will be merged.

Services.yaml is recommended and easier to write, while Services.php provide way more flexibility.

services:
  _defaults:
    autowire: true
    autoconfigure: true
    public: false

  TYPO3\CMS\Dashboard\:
    resource: '../Classes/*'

  dashboard.widget.t3news:
    class: 'TYPO3\CMS\Dashboard\Widgets\RssWidget'
    arguments:
      $buttonProvider: '@dashboard.buttons.t3news'
      $cache: '@cache.dashboard.rss'
      $options:
        feedUrl: 'https://www.typo3.org/rss'
    tags:
      - name: dashboard.widget
        identifier: 't3news'
        groupNames: 'news'
        title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.title'
        description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.description'
        iconIdentifier: 'content-widget-rss'
        height: 'large'
        width: 'medium'

imports:
  - { resource: Backend/DashboardWidgets.yaml }

services:
  _defaults:
    autowire: true
    autoconfigure: true
    public: false

  TYPO3\CMS\Dashboard\Widgets\:
    resource: '../Classes/Widgets/*'

  dashboard.buttons.t3news:
    class: 'TYPO3\CMS\Dashboard\Widgets\Provider\ButtonProvider'
    arguments:
      $title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.moreItems'
      $link: 'https://typo3.org/project/news'
      $target: '_blank'

  dashboard.widget.t3news:
    class: 'TYPO3\CMS\Dashboard\Widgets\RssWidget'
    arguments:
      $buttonProvider: '@dashboard.buttons.t3news'
      $cache: '@cache.dashboard.rss'
      $options:
        feedUrl: 'https://www.typo3.org/rss'
    tags:
      - name: dashboard.widget
        identifier: 't3news'
        groupNames: 'news'
        title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.title'
        description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.description'
        iconIdentifier: 'content-widget-rss'
        height: 'large'
        width: 'medium'

<?php

declare(strict_types=1);
namespace Vendor\ExtName;

use Vendor\ExtName\Widgets\ExampleWidget;
use Vendor\ExtName\Widgets\Provider\ExampleProvider;
use Symfony\Component\DependencyInjection\ContainerBuilder;
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
use Symfony\Component\DependencyInjection\Reference;
use TYPO3\CMS\Report\Status;

return function (ContainerConfigurator $configurator, ContainerBuilder $containerBuilder) {
    $services = $configurator->services();

    if ($containerBuilder->hasDefinition(Status::class)) {
        $services->set('widgets.dashboard.widget.exampleWidget')
            ->class(ExampleWidget::class)
            ->arg('$buttonProvider', new Reference(ExampleProvider::class))
            ->arg('$options', ['template' => 'Widget/ExampleWidget'])
            ->tag('dashboard.widget', [
               'identifier' => 'widgets-exampleWidget',
               'groupNames' => 'systemInfo',
               'title' => 'LLL:EXT:ext_key/Resources/Private/Language/locallang.xlf:widgets.dashboard.widget.exampleWidget.title',
               'description' => 'LLL:EXT:ext_key/Resources/Private/Language/locallang.xlf:widgets.dashboard.widget.exampleWidget.description',
               'iconIdentifier' => 'content-widget-list',
               'height' => 'medium',
               'width' => 'medium'
            ])
        ;
    }
};

Create widget group

Widget groups are used to group widgets into tabs. This will have an effect when adding new widgets to an dashboard. See Adding Widgets to get an idea of the UI.

Groups are defined as PHP array:

<?php

return [
    'general' => [
        'title' => 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget_group.general',
    ],
    'systemInfo' => [
        'title' => 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget_group.system',
    ],
    'typo3' => [
        'title' => 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget_group.typo3',
    ],
    'news' => [
        'title' => 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget_group.news',
    ],
    'documentation' => [
        'title' => 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget_group.documentation',
    ],
];

The file has to return an array of groups. Each group consists of an array key used as identifier and an single option title. The title will be processed through translation and can be an LLL reference.

Each extension can create arbitrary widget groups.

Widgets can be assigned to multiple groups using the groupNames. Please read Register new Widget to understand how this is done.

Dashboard Presets

It is possible to configure presets of dashboards. The extension already ships a default as well as an empty dashboard preset.

<?php

return [
    'default' => [
        'title' => 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:dashboard.default',
        'description' => 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:dashboard.default.description',
        'iconIdentifier' => 'content-dashboard',
        'defaultWidgets' => ['t3information', 't3news', 'docGettingStarted'],
        'showInWizard' => false,
    ],
];

options.dashboard.dashboardPresetsForNewUsers = default

options.dashboard.dashboardPresetsForNewUsers = default, companyDefault

options.dashboard.dashboardPresetsForNewUsers := addToList(anotherOne)

Adjust settings of registered widgets

Each widget is registered with an identifier, and all Services.* files are merged. Therefore it is possible to override widgets. In order to override, the extension which should override has to be loaded after the extension that registered the widget.

Concrete options depend on the widget to configure. Each widget should provide documentation covering all possible options and their meaning. For delivered widgets by EXT:dashboard see Widgets.

In case a widget defined by EXT:dashboard should be adjusted, the extension has to define a dependency to EXT:dashboard.

Afterwards the widget can be registered again, with different options. See Register new Widget to get an in depth example of how to register a widget.

Adjust template of widgets

When adding own widgets, it might be necessary to provide custom templates. In such a case the file path containing the template files needs to be added.

This is done using a Configuration/page.tsconfig file, see changelog and changelog for details on this:

# Pattern: templates.typo3/cms-dashboard."something-unique" = "overriding-extension-composer-name":"entry-path"
templates.typo3/cms-dashboard.1644485473 = myvendor/myext:Resources/Private

A template file can then be added to path Resources/Private/Templates/Widgets/MyExtensionsGreatWidget.html and is referenced in the PHP class using ->render('Widgets/MyExtensionsGreatWidget');. The registration into namespace typo3/cms-dashboard is shared between all extensions. It is thus a good idea to give template file names unique names (for instance by prefixing them with the extension name), to avoid situations where templates from multiple extensions that provide different widgets override each other.

Permissions of widgets

Backend users marked as administrator have always access to all registered widgets.

Other backend users can be restricted via Access List > Dashboard widgets inside of user groups. Each widget needs to be explicitly allowed.

For Developers

Target group: Developers

Welcome to our small dashboard introduction. We will explain how to create widget groups and implement widgets.

Implement new widget

Each extension can provide multiple Widgets. ext:dashboard already ships with some widget implementations.

Each widget has to be implemented as a PHP class. The PHP class defines the concrete implementation and features of a widget, while registration adds necessary options for a concrete instance of a widget.

For example a TYPO3.org RSS Widget would consist of an RssWidget PHP class. This class would provide the implementation to fetch rss news and display them. The concrete registration will provide the URL to RSS feed.

class RssWidget implements WidgetInterface, RequestAwareWidgetInterface
{
    private ServerRequestInterface $request;

    public function __construct(
        private readonly WidgetConfigurationInterface $configuration,
        private readonly Cache $cache,
        private readonly BackendViewFactory $backendViewFactory,
        private readonly ButtonProviderInterface $buttonProvider = null,
        private readonly array $options = []
    ) {
    }

    public function setRequest(ServerRequestInterface $request): void
    {
        $this->request = $request;
    }

    public function renderWidgetContent(): string
    {
        $view = $this->backendViewFactory->create($this->request);
        $view->assignMultiple([
            'items' => $this->getRssItems(),
            'options' => $this->options,
            'button' => $this->getButton(),
            'configuration' => $this->configuration,
        ]);
        return $view->render('Widget/RssWidget');
    }

    protected function getRssItems(): array
    {
        $items = [];
        // Logic to populate $items array
        return $items;
    }

    public function getOptions(): array
    {
        return $this->options;
    }
}

class ExampleChartWidget implements RequireJsModuleInterface
{
    // ...
    public function getJavaScriptModuleInstructions(): array
    {
        return [
            'TYPO3/CMS/Dashboard/ChartInitializer' =>
                'function(ChartInitializer) { ChartInitializer.initialize(); }',
        ];
    }
}

class ExampleChartWidget implements JavaScriptInterface
{
    // ...
    public function getJavaScriptModuleInstructions(): array
    {
        return [
            JavaScriptModuleInstruction::forRequireJS(
                'TYPO3/CMS/Dashboard/ChartInitializer'
            )->invoke('initialize'),
        ];
    }
}

class RssWidget implements WidgetInterface, AdditionalCssInterface
{
      public function getCssFiles(): array
      {
         return [
             'EXT:my_extension/Resources/Public/Css/widgets.css',
             'EXT:my_extension/Resources/Public/Css/list-widget.css',
         ];
      }
}

The refresh option

In each widget the refresh option can be enabled. If the option is enabled the widget displays a reload button in the top right corner. It can then be refreshed via user interaction or via a javascript api.

To enable the refresh action button, you have to define the refreshAvailable option in the $options part of the widget registration. Below is an example of a RSS widget with the refresh option enabled.

dashboard.widget.myOwnRSSWidget:
  class: 'TYPO3\CMS\Dashboard\Widgets\RssWidget'
  arguments:
    $view: '@dashboard.views.widget'
    $cache: '@cache.dashboard.rss'
    $options:
      rssFile: 'https://typo3.org/rss'
      lifeTime: 43200
      refreshAvailable: true
  tags:
    - name: dashboard.widget
      identifier: 'myOwnRSSWidget'
      groupNames: 'general'
      title: 'LLL:EXT:extension/Resources/Private/Language/locallang.xlf:widgets.myOwnRSSWidget.title'
      description: 'LLL:EXT:extension/Resources/Private/Language/locallang.xlf:widgets.myOwnRSSWidget.description'
      iconIdentifier: 'content-widget-rss'
      height: 'medium'
      width: 'medium'

document
  .querySelector('[data-widget-hash="{your-unique-widget-hash}"]')
  .dispatchEvent(new Event('widgetRefresh', {bubbles: true}));

Adding button to Widget

In order to add a button to a widget, a new dependency to an ButtonProviderInterface can be added.

<f:if condition="{button}">
   <a href="{button.link}" target="{button.target}" class="widget-cta">
      {f:translate(id: button.title, default: button.title)}
   </a>
</f:if>

services:
  # …

  dashboard.buttons.t3news:
    class: 'TYPO3\CMS\Dashboard\Widgets\Provider\ButtonProvider'
    arguments:
      $title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.moreItems'
      $link: 'https://typo3.org/project/news'
      $target: '_blank'

  dashboard.widget.t3news:
    class: 'TYPO3\CMS\Dashboard\Widgets\RssWidget'
    arguments:
      # …
      $buttonProvider: '@dashboard.buttons.t3news'
      # …

class RssWidget implements WidgetInterface
{
    public function __construct(
        // …
        private readonly ButtonProviderInterface $buttonProvider = null,
        // …
    ) {
    }

    public function renderWidgetContent(): string
    {
        // …
        $this->view->assignMultiple([
            // …
            'button' => $this->buttonProvider,
            // …
        ]);
        // …
    }

    public function getOptions(): array
    {
        return $this->options;
    }
}

Implement graph widget

First of all a new data provider is required, which will provide the data for the chart. Next the data will be provided to the widget instance, which will be rendered with JavaScript modules and Css.

To make the dashboard aware of this workflow, some interfaces come together:

• EventDataInterface
• AdditionalCssInterface
• RequireJsModuleInterface

Also the existing template file Widget/ChartWidget is used, which provides necessary HTML to render the chart. The provided eventData will be rendered as a chart and therefore has to match the expected structure.

An example would be Classes/Widgets/BarChartWidget.php:

class BarChartWidget implements WidgetInterface, EventDataInterface, AdditionalCssInterface, RequireJsModuleInterface
{
    public function __construct(
        // …
        private readonly ChartDataProviderInterface $dataProvider,
        // …
    ) {
        // …
        $this->dataProvider = $dataProvider;
        // …
    }

    public function renderWidgetContent(): string
    {
        // …
        $this->view->assignMultiple([
            // …
            'configuration' => $this->configuration,
            // …
        ]);
        // …
    }

    public function getEventData(): array
    {
        return [
            'graphConfig' => [
                'type' => 'bar',
                'options' => [
                    // …
                ],
                'data' => $this->dataProvider->getChartData(),
            ],
        ];
    }

    public function getCssFiles(): array
    {
        return [];
    }

    public function getRequireJsModules(): array
    {
        return [
            'TYPO3/CMS/Dashboard/Contrib/chartjs',
            'TYPO3/CMS/Dashboard/ChartInitializer',
        ];
    }

    public function getOptions(): array
    {
        return $this->options;
    }
}

Together with Services.yaml:

services:
  dashboard.widget.sysLogErrors:
    class: 'TYPO3\CMS\Dashboard\Widgets\BarChartWidget'
    arguments:
      # …
      $dataProvider: '@TYPO3\CMS\Dashboard\Widgets\Provider\SysLogErrorsDataProvider'
      # …
    tags:
      - name: dashboard.widget

The configuration adds necessary CSS classes, as well as the dataProvider to use. The provider implements ChartDataProviderInterface and could look like the following.

class SysLogErrorsDataProvider implements ChartDataProviderInterface
{
    /**
     * Number of days to gather information for.
     *
     * @var int
     */
    protected $days = 31;

    /**
     * @var array
     */
    protected $labels = [];

    /**
     * @var array
     */
    protected $data = [];

    public function __construct(int $days = 31)
    {
        $this->days = $days;
    }

    public function getChartData(): array
    {
        $this->calculateDataForLastDays();
        return [
            'labels' => $this->labels,
            'datasets' => [
                [
                    'label' => $this->getLanguageService()->sL('LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.sysLogErrors.chart.dataSet.0'),
                    'backgroundColor' => WidgetApi::getDefaultChartColors()[0],
                    'border' => 0,
                    'data' => $this->data
                ]
            ]
        ];
    }

    protected function getNumberOfErrorsInPeriod(int $start, int $end): int
    {
        $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)->getQueryBuilderForTable('sys_log');
        return (int)$queryBuilder
            ->count('*')
            ->from('sys_log')
            ->where(
                $queryBuilder->expr()->eq(
                    'type',
                    $queryBuilder->createNamedParameter(SystemLogType::ERROR, Connection::PARAM_INT)
                ),
                $queryBuilder->expr()->gte(
                    'tstamp',
                    $queryBuilder->createNamedParameter($start, Connection::PARAM_INT)
                ),
                $queryBuilder->expr()->lte(
                    'tstamp',
                    $queryBuilder->createNamedParameter($end, Connection::PARAM_INT)
                )
            )
            ->execute()
            ->fetchColumn();
    }

    protected function calculateDataForLastDays(): void
    {
        $format = $GLOBALS['TYPO3_CONF_VARS']['SYS']['ddmmyy'] ?: 'Y-m-d';
        for ($daysBefore = $this->days; $daysBefore >= 0; $daysBefore--) {
            $this->labels[] = date($format, strtotime('-' . $daysBefore . ' day'));
            $startPeriod = strtotime('-' . $daysBefore . ' day 0:00:00');
            $endPeriod =  strtotime('-' . $daysBefore . ' day 23:59:59');
            $this->data[] = $this->getNumberOfErrorsInPeriod($startPeriod, $endPeriod);
        }
    }

    protected function getLanguageService(): LanguageService
    {
        return $GLOBALS['LANG'];
    }
}

Interfaces

The following list provides information for all necessary interfaces that are used inside of this documentation. For up to date information, please check the source code.

class WidgetInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\WidgetInterface

Has to be implemented by all widgets. This interface defines public API used by ext:dashboard to interact with widgets.

renderWidgetContent ( )

returntype

string

Returns

The rendered HTML to display.

getOptions ( )

returntype

array

Returns

The options of the widget as set in the registration.

class RequestAwareWidgetInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\RequestAwareWidgetInterface

This interface declares a widget has a dependency to the current PSR-7 request. When implemented, the dashboard controller will call setRequest() immediately after widget instantiation to hand over the current request. Widgets that rely on BackendViewFactory typically need the current request.

setRequest ( ServerRequestInterface $request)

returntype

void

class WidgetConfigurationInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\WidgetConfigurationInterface

Used internally in ext:dashboard. Used to separate internal configuration from widgets. Can be required in widget classes and passed to view.

getIdentifier ( )

returntype

string

Returns

Unique identifer of a widget.

getServiceName ( )

returntype

string

Returns

Service name providing the widget implementation.

getGroupNames ( )

returntype

array

Returns

Group names associated to this widget.

getTitle ( )

returntype

string

Returns

Title of a widget, this is used for the widget selector.

getDescription ( )

returntype

string

Returns

Description of a widget, this is used for the widget selector.

getIconIdentifier ( )

returntype

string

Returns

Icon identifier of a widget, this is used for the widget selector.

getHeight ( )

returntype

int

Returns

Height of a widget in rows (1-6).

getWidth ( )

returntype

int

Returns

Width of a widget in columns (1-4).

getAdditionalCssClasses ( )

returntype

array

Returns

Additional CSS classes which should be added to the rendered widget.

class RequireJsModuleInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\RequireJsModuleInterface

Widgets implementing this interface will add the provided RequireJS modules. Those modules will be loaded in dashboard view if the widget is added at least once.

getRequireJsModules ( )

Returns a list of RequireJS modules that should be loaded, e.g.:

return [
    'TYPO3/CMS/MyExtension/ModuleName',
    'TYPO3/CMS/MyExtension/Module2Name',
];

Copied!

See also RequireJS (Deprecated) for further information regarding RequireJS in TYPO3 Backend.

returntype

array

Returns

List of modules to require.

class AdditionalJavaScriptInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\AdditionalJavaScriptInterface

Widgets implementing this interface will add the provided JavaScript files. Those files will be loaded in dashboard view if the widget is added at least once.

getJsFiles ( )

Returns a list of JavaScript file names that should be included, e.g.:

return [
    'EXT:my_extension/Resources/Public/JavaScript/file.js',
    'EXT:my_extension/Resources/Public/JavaScript/file2.js',
];

Copied!

returntype

array

Returns

List of JS files to load.

class AdditionalCssInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\AdditionalCssInterface

Widgets implementing this interface will add the provided Css files. Those files will be loaded in dashboard view if the widget is added at least once.

getCssFiles ( )

Returns a list of Css file names that should be included, e.g.:

return [
    'EXT:my_extension/Resources/Public/Css/widgets.css',
    'EXT:my_extension/Resources/Public/Css/list-widget.css',
];

Copied!

returntype

array

Returns

List of Css files to load.

class ButtonProviderInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\ButtonProviderInterface

getTitle ( )

returntype

string

Returns

The title used for the button. E.g. an LLL:EXT: reference like LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.moreItems.

getLink ( )

returntype

string

Returns

The link to use for the button. Clicking the button will open the link.

getTarget ( )

returntype

string

Returns

The target of the link, e.g. _blank. LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.moreItems.

class NumberWithIconDataProviderInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\NumberWithIconDataProviderInterface

getNumber ( )

returntype

integer

Returns

The number to display for an number widget.

class EventDataInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\EventDataInterface

getEventData ( )

returntype

array

Returns

Returns data which should be send to the widget as JSON encoded value.

class ChartDataProviderInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\ChartDataProviderInterface

getChartData ( )

returntype

array

Returns

Provide the data for a graph. The data and options you have depend on the type of chart. More information can be found in the documentation of the specific type:

Bar

https://www.chartjs.org/docs/latest/charts/bar.html#data-structure

Doughnut

https://www.chartjs.org/docs/latest/charts/doughnut.html#data-structure

class ListDataProviderInterface

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\ListDataProviderInterface

getItems ( )

returntype

array

Returns

Provide the array if items. Each entry should be a single string.

Widgets

The following section will provide information for all provided widgets. For each widget an example registration will be provided, together with all configuration options.

Bar Chart Widget

Widgets using this class will show a bar chart with the provided data.

This kind of widgets are useful if you want to show some statistics of for example historical data.

class BarChartWidget

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\BarChartWidget

services:
  dashboard.widget.sysLogErrors:
    class: 'TYPO3\CMS\Dashboard\Widgets\BarChartWidget'
    arguments:
      $dataProvider: '@TYPO3\CMS\Dashboard\Widgets\Provider\SysLogErrorsDataProvider'
      $buttonProvider: '@TYPO3\CMS\Dashboard\Widgets\Provider\SysLogButtonProvider'
      $options:
        refreshAvailable: true
    tags:
      - name: dashboard.widget
        identifier: 'sysLogErrors'
        groupNames: 'systemInfo'
        title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.sysLogErrors.title'
        description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.sysLogErrors.description'
        iconIdentifier: 'content-widget-chart-bar'
        height: 'medium'
        width: 'medium'

CTA Button Widget

class CtaWidget

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\CtaWidget

Widgets using this class will show a CTA (=Call to action) button to easily go to a specific page or do a specific action. You can add a button to the widget by defining a button provider.

You can use this kind of widget to link to for example a manual or to an important website that is used a lot by the users.

services:
  dashboard.widget.docGettingStarted:
   class: 'TYPO3\CMS\Dashboard\Widgets\CtaWidget'
   arguments:
     $buttonProvider: '@dashboard.buttons.docGettingStarted'
     $options:
       text: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.documentation.gettingStarted.text'
   tags:
     - name: dashboard.widget
       identifier: 'docGettingStarted'
       groupNames: 'documentation'
       title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.documentation.gettingStarted.title'
       description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.documentation.gettingStarted.description'
       iconIdentifier: 'content-widget-text'
       height: 'small'

Doughnut Chart Widget

class DoughnutChartWidget

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\DoughnutChartWidget

Widgets using this class will show a doughnut chart with the provided data.

This kind of widgets are useful if you want to show the relational proportions between data.

services:
 dashboard.widget.typeOfUsers:
    class: 'TYPO3\CMS\Dashboard\Widgets\DoughnutChartWidget'
    arguments:
      $dataProvider: '@TYPO3\CMS\Dashboard\Widgets\Provider\TypeOfUsersChartDataProvider'
      $options:
         refreshAvailable: true
    tags:
      - name: dashboard.widget
        identifier: 'typeOfUsers'
        groupNames: 'systemInfo'
        title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.typeOfUsers.title'
        description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.typeOfUsers.description'
        iconIdentifier: 'content-widget-chart-pie'
        height: 'medium'

List Widget

class ListWidget

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\ListWidget

Widgets using this class will show a simple list of items provided by a data provider.

services:
  dashboard.widget.testList:
    class: 'TYPO3\CMS\Dashboard\Widgets\ListWidget'
    arguments:
      $dataProvider: '@Vendor\Ext\Widgets\Provider\TestListWidgetDataProvider'
      $options:
         refreshAvailable: true
    tags:
      - name: dashboard.widget
        identifier: 'testList'
        groupNames: 'general'
        title: 'List widget'
        description: 'Description of widget'
        iconIdentifier: 'content-widget-list'
        height: 'large'
        width: 'large'

Number With Icon Widget

class NumberWithIconWidget

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\NumberWithIconWidget

Widgets using this class will show a widget with a number, some additional text and an icon.

This kind of widgets are useful if you want to show some simple stats.

services:
  dashboard.widget.failedLogins:
    class: 'TYPO3\CMS\Dashboard\Widgets\NumberWithIconWidget'
    arguments:
      $dataProvider: '@TYPO3\CMS\Dashboard\Widgets\Provider\NumberOfFailedLoginsDataProvider'
      $options:
        title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.failedLogins.title'
        subtitle: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.failedLogins.subtitle'
        icon: 'content-elements-login'
        refreshAvailable: true
    tags:
      - name: dashboard.widget
        identifier: 'failedLogins'
        groupNames: 'systemInfo'
        title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.failedLogins.title'
        description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.failedLogins.description'
        iconIdentifier: 'content-widget-number'

RSS Widget

class RssWidget

Fully qualified name

\TYPO3\CMS\Dashboard\Widgets\RssWidget

Widgets using this class will show a list of items of the configured RSS feed.

You can use this kind of widget to create a widget showing your own RSS feed.

services:
  cache.dashboard.rss:
    class: 'TYPO3\CMS\Core\Cache\Frontend\FrontendInterface'
    factory: ['@TYPO3\CMS\Core\Cache\CacheManager', 'getCache']
    arguments:
      $identifier: 'dashboard_rss'

  dashboard.buttons.t3news:
    class: 'TYPO3\CMS\Dashboard\Widgets\Provider\ButtonProvider'
    arguments:
      $title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.moreItems'
      $link: 'https://typo3.org/project/news'
      $target: '_blank'

  dashboard.widget.t3news:
    class: 'TYPO3\CMS\Dashboard\Widgets\RssWidget'
    arguments:
      $cache: '@cache.dashboard.rss'
      $buttonProvider: '@dashboard.buttons.t3news'
      $options:
        feedUrl: 'https://www.typo3.org/rss'
        # 12 hours cache
        lifeTime: 43200
        refreshAvailable: true
    tags:
      - name: dashboard.widget
        identifier: 't3news'
        groupNames: 'typo3'
        title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.title'
        description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.t3news.description'
        iconIdentifier: 'content-widget-rss'
        height: 'large'
        width: 'medium'

Migration

Sitemap