The Ultimate Guide to TYPO3 CMS Dashboard (Beginners to Advanced)

Published on : 11 Jun 2020

In TYPO3 v10, Which feature do you most love? TYPO3 Dashboard, Right? Here, I would like to write from beginning to advanced level on TYPO3 Dashboard for Editors, Administrators, Integrators, and Developers. Dashboard in TYPO3, One of the most awaited and dream projects for a year. On the launching of TYPO3 v10, Dashboard is now built-in with the TYPO3 core. Basically, TYPO3 Dashboard will deliver backend users to know what's happening in the TYPO3 system.

The Ultimate Guide to TYPO3 CMS Dashboard (Beginners to Advanced)

In TYPO3 v10, Which backend feature do you most love? Yeah, the TYPO3 Dashboard. Here, I would like to write from beginning to advanced level on TYPO3 Dashboard for Editors, Administrators, Integrators, and Developers.

Dashboard in TYPO3, One of the most awaited and dream projects for a year. On the launching of TYPO3 v10, Dashboard is now built-in with the TYPO3 core. Basically, TYPO3 Dashboard will deliver backend users to know what's happening in the TYPO3 system.

As a TYPO3 lover, Are you excited to know about AtoZ about TYPO3 Dashboard? Like History, Guide for editors, Installation, Presets, Widgets, etc.,

“Wait. Before we start, We would like to dedicate this blog to the TYPO3 Dashboard Initiative team who worked very hard to provide this feature in TYPO3 v10. We appreciate your awesome work, #T3Kudos!”

Ultimate Guide to TYPO3 Dashboard

History of TYPO3 Dashboard

Since the beginning of TYPO3, There is a simple backend dashboard, After logged-in to the backend, You saw only information about backend modules.

TYPO3 Dashboard is like a bit-dream project for the TYPO3 community since TYPO3 v4. Before a years ago, Kay Strobach tried to play some concepts around IDEAS for new dashboard for TYPO3 to make TYPO3 Dashboard like;

Kay Strobach tried to play some concepts around IDEAS for new dashboard for TYPO3 to make TYPO3 Dashboard

Did you know the Journey of TYPO3 Dashboard? Finally, Awesome Dashboard was started with the TYPO3 Initiative in April 2018 at TYPO3 UX 2018.

What’s the TYPO3 Core Initiative?

Generally, an "initiative" comprises individuals with a typical enthusiasm to make major upgrades in a particular region of TYPO3 including key plans, objectives, task-breakdown and observing of progress. All of these initiatives may likewise length over various renditions like v9 and v10 - yet it's essential to maintain the emphasis on accomplishing and coming nearer to the settled TYPO3 goals to achieve.

The Initiative idea is really awesome, Now the TYPO3 core is not only developed by a TYPO3 core team but can be done by community-driven development.

“Initiatives are the place where new concepts are evaluated, discussed, and developed outside of the fixed roadmap for the TYPO3 core. - Benni Mack”

And, you can see and feel, TYPO3 Dashboard is one of the great examples of such an innovative idea and solution.

Explore the different TYPO3 Strategic Initiatives and based on your interests and skills, you may join a particular team.

The TYPO3 Dashboard Initiative

Richard Haeser (the SEO and Dashboard man, we appreciate his great dedication to the TYPO3 community) the leader of the TYPO3 Dashboard Initiative world works very hard to collect the team, plan initiative, collaborate, TYPO3 core team, to integrate into TYPO3 core v10.

The initiative team’s goal was to plan, build, and launch a dashboard in TYPO3 v10, and how do they do it?

Planning and Goals of TYPO3 Dashboard
Proof of Concept Development
Developed EXT:dashboard for TYPO3 v9
UI/UX Analysis and Design
Development of Dashboard Management (with Backend and Frontend technologies)
Misc Task (like Build-in Widgets, Access, and Permissions, etc.,)
Integrate to TYPO3 core by collaboration with the TYPO3 core team
Ready to release TYPO3 v10
Documentation

Join Dashboard Team Connect at Slack

Initially, UX/UI design of TYPO3 Dashboard was like;

Do you wish to know the Interesting Statistics of TYPO3 v10?

The development of TYPO3 v10 took 1.5 years. The main goals were to improve the setup of TYPO3 pages, template handling, routing, etc., And, of course, TYPO3 Dashboard!

9.837

Files Modified

213.577

Code Lines Removed

284.874

New Code Lines

Dashboard Release with Feature: #90333 in TYPO3 v10.

Is Dashboard available for TYPO3 v9?

Initially, TYPO3 Dashboard was developed as third-party TYPO3 extension in FriendsOfTYPO3, But official they will not more maintain Dashboard for TYPO3 v9, You may try https://packagist.org/packages/friendsoftypo3/dashboard

Interesting UI/UX Case Study on TYPO3 Dashboard

I know you want to know some practical things and coding-stuff for TYPO3 development.

But before we move to it, I would like to share one thing which many people may have not noticed, It’s “UI/UX Case-study of TYPO3 Dashboard” from Irene Sacchi, One of the members of TYPO3 Dashboard Initiative.

We need more such people who can help TYPO3 on UI/UX and Customer-oriented approach, I really appreciate such in-depth level research.

Irene did very detailed research on TYPO3 Dashboard to get answers to What, Why, How of Dashboard?

Dashboard UI/UX Goals (Project, User, and Business)
Competitive Analysis of Other CMS Dashboard (Wordpress, Joomla, Drupal)
User survey (The importance of the right question)

“IMHO: TYPO3 has the most advanced Dashboard compared to any other OpenSource CMS, Of course now we just need develop creative and useful widgets.”

I recommend reading TYPO3 Dashboard UX Case Study

Guide for TYPO3 Editors To Manage TYPO3 Dashboard

As a TYPO3 user, once you have logged-in to TYPO3 v10, Your default screen will be “Dashboard”. The whole TYPO3 Dashboard has been built with a Dashboard and Widgets.

How to Manage a TYPO3 Dashboard?

Step 1. Go to Dashboard Module

Step 2. Click on “+” icon to add Dashboard

Step 3. Enter the Title of the Dashboard, and click the “Add Dashboard” button.

Step 3. To add widgets, Click on “+” from bottom-right corner of the Dashboard

Step 4. Add Widgets from Wizard

Also, You can easily edit or delete a particular TYPO3 Dashboard and/or Widgets.

What are default widgets available in TYPO3 Core?

In future, TYPO3 developers will develop custom widget which will helpful for TYPO3 as a system, Hope not to get widget like Weather :P

Currently there are few default TYPO3 Dashboard widgets available in-build in TYPO3 v10.

TYPO3 news

TYPO3 security advisories

Failed Logins

TYPO3

Type of backend users

Number of errors in the system log

“IMHO, Success of the TYPO3 Dashboard will heavily depend on what kind of useful and creative widgets will be developed by the TYPO3 community.”

Installation of TYPO3 Dashboard

The dashboard is part of the TYPO3 core, so it should be there in your TYPO3 installation, In some cases, it may not install eg., If your TYPO3 administrator installed minimal packages which do not contain EXT:dashboard. Let’s make sure it's installed well.

Install TYPO3 Dashboard with Composer

Step 1. Check and Install TYPO3 Dashboard Composer Command

// Let’s check if extension installed or not
composer show | grep dashboard
// If yes, Result should be “typo3/cms-dashboard v10.4.0 Dashboard for TYPO3”.
// Else, Result not found then just run this composer command
composer require typo3/cms-dashboard ^10.4

// Let’s check if extension installed or not
composer show | grep dashboard
// If yes, Result should be “typo3/cms-dashboard v10.4.0 Dashboard for TYPO3”.
// Else, Result not found then just run this composer command
composer require typo3/cms-dashboard ^10.4

Step 2. Go to Admin Tools > Extensions Manager > Activate Dashboard TYPO3 Extension

If you are new to TYPO3 Composer, explore 10 Resources to Learn TYPO3 Composer

Install TYPO3 Dashboard without Composer

Simply go to Admin Tools > Extensions Manager > Activate Dashboard TYPO3 Extension.

Step-by-step Guide of TYPO3 Dashboard Widget

I recommend to keep reading this section, If you want to learn the basics of existing TYPO3 Dashboard presets and widgets eg., How to register your own register, create custom dashboard preset, change look-n-feel of widget, access & permissions, etc.,

Practical Example of RSS-Feed Dashboard Widget

To understand TYPO3 Dashboard better and implement technical features of Dashboard widgets, Let’s have a practical example of an RSS-Feed widget.

As an example, Let’s render data from your RSS-feed eg., https://t3planet.com/blog/blog.recent.xml

Practical Example of RSS-Feed Dashboard Widget

How to add a custom widget in TYPO3 Dashboard?

Step 1. Create Your Custom TYPO3 Extension

To register or implement a widget, You should create your custom TYPO3 extension where you can add a number of configuration folders and files as mentioned below steps.

Step 2. Create /Classes folder in your extension (if not)

Step 3. Create \my_extension\Configuration\Services.yaml

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

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

  dashboard.buttons.t3terminal:
    class: 'TYPO3\CMS\Dashboard\Widgets\Provider\ButtonProvider'
    arguments:
      $title: 'RSS From T3Planet'
      $link: 'https://t3planet.com/blog/'
      $target: '_blank'

  dashboard.widget.t3terminal:
    class: 'TYPO3\CMS\Dashboard\Widgets\RssWidget'
    arguments:
      $view: '@dashboard.views.widget'
      $buttonProvider: '@dashboard.buttons.t3terminal'
      $cache: '@cache.dashboard.rss'
      $options:
        feedUrl: 'https://t3planet.com/blog/blog.recent.xml'
    tags:
      - name: dashboard.widget
        identifier: 't3terminal'
        groupNames: 'general'
        title: 'T3Planet Blog'
        description: 'TYPO3 Knowledge Hub'
        iconIdentifier: 'content-widget-rss'
        height: 'large'
        width: 'medium'

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

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

  dashboard.buttons.t3terminal:
    class: 'TYPO3\CMS\Dashboard\Widgets\Provider\ButtonProvider'
    arguments:
      $title: 'RSS From T3Planet'
      $link: 'https://t3planet.com/blog/'
      $target: '_blank'

  dashboard.widget.t3terminal:
    class: 'TYPO3\CMS\Dashboard\Widgets\RssWidget'
    arguments:
      $view: '@dashboard.views.widget'
      $buttonProvider: '@dashboard.buttons.t3terminal'
      $cache: '@cache.dashboard.rss'
      $options:
        feedUrl: 'https://t3planet.com/blog/blog.recent.xml'
    tags:
      - name: dashboard.widget
        identifier: 't3terminal'
        groupNames: 'general'
        title: 'T3Planet Blog'
        description: 'TYPO3 Knowledge Hub'
        iconIdentifier: 'content-widget-rss'
        height: 'large'
        width: 'medium'

Step 4. Done by clear the Cache

At each change into your Services.yaml, If you did not find any effect, then keep clear the cache from Admin Tools > Maintenance > Flush Cache.

Tip:
If you want to remove your widget, then make sure to remove your Services.yaml or Services.php. And don't forget to Admin Tools > Maintenance > Flush Cache.

Tip:
If you want to remove your widget, then make sure to remove your Services.yaml or Services.php. And don't forget to Admin Tools > Maintenance > Flush Cache.

Do you want custom TYPO3 Dashboard widgets with PHP?

Good thing is that, If you want more customization in your widget with PHP code then you can follow the steps below.

Step 1. Create Your Custom TYPO3 Extension

Step 2. Create /Classes and /Classes/Widgets folders

I recommend you to create a number of Class files by taking reference PHP code from EXT:dashboard core extension.

Step 3. Create Configuration/Services.php

In below example, The widget will only add if EXT:reports module installed, Check if

<?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\Core\Utility\ExtensionManagementUtility;

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

    if (ExtensionManagementUtility::isLoaded('reports')) {
        $services->set('widgets.dashboard.widget.exampleWidget')
            ->class(ExampleWidget::class)
            ->arg('$view', new Reference('dashboard.views.widget'))
            ->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'
            ])
        ;
    }
};

<?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\Core\Utility\ExtensionManagementUtility;

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

    if (ExtensionManagementUtility::isLoaded('reports')) {
        $services->set('widgets.dashboard.widget.exampleWidget')
            ->class(ExampleWidget::class)
            ->arg('$view', new Reference('dashboard.views.widget'))
            ->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'
            ])
        ;
    }
};

How to add widgets group into TYPO3 Dashboard?

That’s very easy!

Step 1. Create Configuration/Backend/DashboardWidgetGroups.php

Step 2. Just add your tab with simple PHP-array

<?php
return [
   't3terminal' => [
       'title' => 'T3Terminal',
   ],
];

<?php
return [
   't3terminal' => [
       'title' => 'T3Terminal',
   ],
];

Can I add my custom TYPO3 Dashboard Preset?

Yes! TYPO3 Dashboard’s one of the cool features is to allow multiple dashboards. You can create a number of your own Dashboard preset.

And, what’s that TYPO3 Preset? By clicking on the “Add Dashboard” plus icon, You will get ‘Add dashboard’ popup with Predefined Dashboard eg., “Empty Dashboard”.

Let’s add our custom TYPO3 Dashboard preset.

Step 1. Create Configuration/Backend/DashboardPresets.php
Step 2. Add configuration of your TYPO3 Dashboard Preset

<?php
return [
   't3terminal' => [
       'title' => 'T3Terminal',
       'description' => 'TYPO3 Knowledge Hub',
       'iconIdentifier' => 'content-dashboard',
       'defaultWidgets' => ['t3terminal', 't3news', 'docGettingStarted'],
       'showInWizard' => true,
   ],
];

<?php
return [
   't3terminal' => [
       'title' => 'T3Terminal',
       'description' => 'TYPO3 Knowledge Hub',
       'iconIdentifier' => 'content-dashboard',
       'defaultWidgets' => ['t3terminal', 't3news', 'docGettingStarted'],
       'showInWizard' => true,
   ],
];

Is it possible to configure a TYPO3 Dashboard preset for new users?

Yes. Whenever you create a new TYPO3 backend user, You can pre-defined what should be there TYPO3 Dashboard preset. Follow the steps.

Step 1. Go to Web > List > Top root

Step 2. Edit particular TYPO3 user group or user

Step 3. Add User TSConfig to Options tab

Is it possible to configure a TYPO3 Dashboard preset for new users?

// Here are the sample UserTSConfig configuration for TYPO3 Dashboard Preset
options.dashboard.dashboardPresetsForNewUsers = default
options.dashboard.dashboardPresetsForNewUsers = default, T3Planet
options.dashboard.dashboardPresetsForNewUsers := addToList(t3terminal)

// Here are the sample UserTSConfig configuration for TYPO3 Dashboard Preset
options.dashboard.dashboardPresetsForNewUsers = default
options.dashboard.dashboardPresetsForNewUsers = default, T3Planet
options.dashboard.dashboardPresetsForNewUsers := addToList(t3terminal)

Shall we able to change settings of registered dashboard widgets?

Yes, you can see! TYPO3 Widgets has been configured through Services.yaml, you may override any existing TYPO3 Dashboard widgets by overriding their YAML properties.

Can I change the Template of TYPO3 Dashboard widgets?

Why not! TYPO3 is popular for its flexibility. Whenever you add your own customized TYPO3 Dashboard Widget, It may require you to adjust your templates. Based on your needs, You can add custom Fluid templates with simple below steps.

Step 1. Create or open ext_typoscript_setup.typoscript at the root of your custom TYPO3 extension.

Step 2. Define your Fluid Templates path

module.tx_dashboard {
    view {
        templateRootPaths {
            110 = EXT:extension_key/Resources/Private/Templates/Dashboard/Widgets/
        }
    }
}

module.tx_dashboard {
    view {
        templateRootPaths {
            110 = EXT:extension_key/Resources/Private/Templates/Dashboard/Widgets/
        }
    }
}

Step 3. Customize your Fluid Template based on your needs.

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Widget/Widget" />
<f:section name="main">

   <div class="widget-table-wrapper">
       <center><img src="https://t3planet.com/pub/media/theme_options/default/T3Terminal-beta-logo_9.png"></center>
       <table class="widget-table">
           <f:for each="{items}" as="item">
               <tr>
                   <td>
                       <f:link.external uri="{item.link}" target="_blank" rel="noreferrer"><strong>{item.title}</strong></f:link.external>
                       <small><time datetime="{item.pubDate -> f:format.date(format: '%Y-%m-%d')}">{item.pubDate -> f:format.date()}</time></small>
                       <p>{item.description -> f:format.crop(maxCharacters: 180)}</p>
                   </td>
               </tr>
           </f:for>
       </table>
   </div>

</f:section>
<f:section name="footer">
   <f:render partial="Widget/Button" arguments="{button: button}"/>
</f:section>
</html>

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Widget/Widget" />
<f:section name="main">

   <div class="widget-table-wrapper">
       <center><img src="https://t3planet.com/pub/media/theme_options/default/T3Terminal-beta-logo_9.png"></center>
       <table class="widget-table">
           <f:for each="{items}" as="item">
               <tr>
                   <td>
                       <f:link.external uri="{item.link}" target="_blank" rel="noreferrer"><strong>{item.title}</strong></f:link.external>
                       <small><time datetime="{item.pubDate -> f:format.date(format: '%Y-%m-%d')}">{item.pubDate -> f:format.date()}</time></small>
                       <p>{item.description -> f:format.crop(maxCharacters: 180)}</p>
                   </td>
               </tr>
           </f:for>
       </table>
   </div>

</f:section>
<f:section name="footer">
   <f:render partial="Widget/Button" arguments="{button: button}"/>
</f:section>
</html>

Tips:

You can get all existing TYPO3 Dashboard widgets from /typo3/sysext/dashboard/Resources/Private/Templates/Widget/

How Access and Permissions of TYPO3 Dashboard work?

You can easily configure access and permission of TYPO3 Dashboard Widgets with the below steps.

Step 1. Go to Web > List > Main root

Step 2. Create or edit your backend user-group

Step 3. Go to Access List > Dashboard Widgets, You can choose what to include or exclude dashboard widget for the particular TYPO3 backend user group.

Create Your Simple Custom TYPO3 Dashboard Widgets

Now you have basic knowledge of how TYPO3 Dashboard widgets works, Now get ready to create our own custom widgets into TYPO3 Dashboard.

How to create my custom TYPO3 Dashboard Widgets?

Step 1. Create Widget at \Classes\Widget\CustomWidget.php

<?php
class CustomWidget implements WidgetInterface
{
   /**
    * @var WidgetConfigurationInterface
    */
   private $configuration;

   /**
    * @var StandaloneView
    */
   private $view;

   /**
    * @var Cache
    */
   private $cache;

   /**
    * @var array
    */
   private $options;

   /**
    * @var ButtonProviderInterface|null
    */
   private $buttonProvider;

   public function __construct(
       WidgetConfigurationInterface $configuration,
       Cache $cache,
       StandaloneView $view,
       ButtonProviderInterface $buttonProvider = null,
       array $options = []
   ) {
       $this->configuration = $configuration;
       $this->view = $view;
       $this->cache = $cache;
       $this->buttonProvider = $buttonProvider;
   }

   public function renderWidgetContent(): string
   {
       $this->view->setTemplate('Widget/CustomWidget');
       $this->view->assignMultiple([
           'items' => 'Wow! Looks Amazing Widget!',
           'button' => $this->getButton(),
           'configuration' => $this->configuration,
       ]);
       return $this->view->render();
   }
}

<?php
class CustomWidget implements WidgetInterface
{
   /**
    * @var WidgetConfigurationInterface
    */
   private $configuration;

   /**
    * @var StandaloneView
    */
   private $view;

   /**
    * @var Cache
    */
   private $cache;

   /**
    * @var array
    */
   private $options;

   /**
    * @var ButtonProviderInterface|null
    */
   private $buttonProvider;

   public function __construct(
       WidgetConfigurationInterface $configuration,
       Cache $cache,
       StandaloneView $view,
       ButtonProviderInterface $buttonProvider = null,
       array $options = []
   ) {
       $this->configuration = $configuration;
       $this->view = $view;
       $this->cache = $cache;
       $this->buttonProvider = $buttonProvider;
   }

   public function renderWidgetContent(): string
   {
       $this->view->setTemplate('Widget/CustomWidget');
       $this->view->assignMultiple([
           'items' => 'Wow! Looks Amazing Widget!',
           'button' => $this->getButton(),
           'configuration' => $this->configuration,
       ]);
       return $this->view->render();
   }
}

Step 2. Create Fluid Template at Resources\Private\Templates\Widget\CustomWidget.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Widget/Widget" />
<f:section name="main">

   <div class="widget-table-wrapper">
       <center>
           <h1>{items}</h1>
           <img src="https://t3planet.com/pub/media/theme_options/default/T3Terminal-beta-logo_9.png" />
       </center>
   </div>

</f:section>
<f:section name="footer">
   <f:render partial="Widget/Button" arguments="{button: button}"/>
</f:section>
</html>

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Widget/Widget" />
<f:section name="main">

   <div class="widget-table-wrapper">
       <center>
           <h1>{items}</h1>
           <img src="https://t3planet.com/pub/media/theme_options/default/T3Terminal-beta-logo_9.png" />
       </center>
   </div>

</f:section>
<f:section name="footer">
   <f:render partial="Widget/Button" arguments="{button: button}"/>
</f:section>
</html>

Step 3. Register your Custom Widget at \Configuration\Services.yaml

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

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

 dashboard.buttons.custom:
   class: 'TYPO3\CMS\Dashboard\Widgets\Provider\ButtonProvider'
   arguments:
     $title: 'Custom Widget'
     $link: 'https://t3planet.com/'
     $target: '_blank'

 dashboard.widget.custom:
   class: 'Vendor\ExtensionName\Widgets\CustomWidget'
   arguments:
     $view: '@dashboard.views.widget'
     $buttonProvider: '@dashboard.buttons.custom'
     $cache: '@cache.dashboard.rss'
   tags:
     - name: dashboard.widget
       identifier: 'custom'
       groupNames: 't3terminal'
       title: 'Custom Widget'
       description: 'Wow! Looks Amazing Widget!'
       iconIdentifier: 'content-widget-rss'
       height: 'medium'
       width: 'medium'

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

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

 dashboard.buttons.custom:
   class: 'TYPO3\CMS\Dashboard\Widgets\Provider\ButtonProvider'
   arguments:
     $title: 'Custom Widget'
     $link: 'https://t3planet.com/'
     $target: '_blank'

 dashboard.widget.custom:
   class: 'Vendor\ExtensionName\Widgets\CustomWidget'
   arguments:
     $view: '@dashboard.views.widget'
     $buttonProvider: '@dashboard.buttons.custom'
     $cache: '@cache.dashboard.rss'
   tags:
     - name: dashboard.widget
       identifier: 'custom'
       groupNames: 't3terminal'
       title: 'Custom Widget'
       description: 'Wow! Looks Amazing Widget!'
       iconIdentifier: 'content-widget-rss'
       height: 'medium'
       width: 'medium'

Can we add custom CSS to TYPO3 Dashboard Widget?

Yes! By implementing `AdditionalCssInterface` Interface.

class CustomWidget implements WidgetInterface, AdditionalCssInterface
{
      public function getCssFiles(): array
      {
         return [
             'EXT:custom_extension/Resources/Public/Css/css1.css',
             'EXT:custom_extension/Resources/Public/Css/css2.css',
         ];
      }
}

class CustomWidget implements WidgetInterface, AdditionalCssInterface
{
      public function getCssFiles(): array
      {
         return [
             'EXT:custom_extension/Resources/Public/Css/css1.css',
             'EXT:custom_extension/Resources/Public/Css/css2.css',
         ];
      }
}

Can we also add custom JavaScript to TYPO3 Dashboard Widget?

Sure! You can include your JS files with two-ways.

Option #1 Add Using RequireJS Module

class CustomWidget implements WidgetInterface, RequireJsModuleInterface
{
    public function getRequireJsModules(): array
    {
        return [
            'TYPO3/CMS/MyExtension/ModuleName',
            'TYPO3/CMS/MyExtension/Module2Name',
        ];
    }
}

class CustomWidget implements WidgetInterface, RequireJsModuleInterface
{
    public function getRequireJsModules(): array
    {
        return [
            'TYPO3/CMS/MyExtension/ModuleName',
            'TYPO3/CMS/MyExtension/Module2Name',
        ];
    }
}

Option #2 Add Using Plain JS

class CustomWidget implements WidgetInterface, AdditionalJavaScriptInterface
{
    public function getJsFiles(): array
    {
        return [
            'EXT:custom_extension/Resources/Public/JavaScript/js1.js',
            'EXT:custom_extension/Resources/Public/JavaScript/js2.js',
        ];
    }
}

class CustomWidget implements WidgetInterface, AdditionalJavaScriptInterface
{
    public function getJsFiles(): array
    {
        return [
            'EXT:custom_extension/Resources/Public/JavaScript/js1.js',
            'EXT:custom_extension/Resources/Public/JavaScript/js2.js',
        ];
    }
}

How many types of Dashboard Widgets are available?

Officially in TYPO3 core, there are six types of TYPO3 Dashboard Widgets

#1 Bar Chart Dashboard Widget

For the widgets that would be utilizing this class will show a bar chart with the served information. These sorts of widgets are valuable on the off chance that you need to give a few insights for your historical information.