Building a Craft CMS Dashboard Widget

Creating a Basic Widget

We create a basic widget, without any content, to get things working before we start to customize it.

Any wid­gets we cre­ate for this mod­ule will live in the widgets direc­to­ry in our module’s src direc­to­ry. Each wid­get will have a class file. 

For this wid­get, cre­ate a class file named DeprectWidget.php inside of src/widgets in the Widgetopia mod­ule you down­loaded from Github (see the ear­li­er video, if you missed that part). We need to get the basic class file set up right now with a name­space, import the base Wid­get class, and our class def­i­n­i­tion. The result should look like this:

<?php

namespace craftquest/widgets;
use craft\base\Widget;

class DeprecWidget extends Widget
{
 // our code will go here
}

Our first goal is to get our wid­get to appear on the dash­board. We can then wor­ry about pop­u­lat­ing it with data about the dep­re­ca­tion errors logged for the site.

To do that, we need to reg­is­ter the wid­get with Craft via our mod­ule. We do that in the mod­ule class file. Reg­is­ter­ing a wid­get means to access an Event called EVENT_REGISTER_WIDGET_TYPES that is part of the Dash­board ser­vice class.

In the Widgetopia.php mod­ule class file, we need to import the base class­es from Craft and Yii and our DeprectWidget class.


use craft\services\Dashboard;
use Yii\base\Event;
use craft\events\RegisterComponentTypesEvent;
use craftquest\widgets\DeprecWidget;

Then we will cre­ate a new class method in the mod­ule class file to reg­is­ter our widget(s).

private function _registerWidgets()
{
	
	Event::on(
		Dashboard::class,
		Dashboard::EVENT_REGISTER_WIDGET_TYPES,
		function(RegisterComponentTypesEvent $event) {
			$event->types[] = DeprecWidget::class;
		}
	);
	
}

We need to call the pri­vate method in our class init() method for the module.

public function init()
{

	parent::init();
	
	$this->_registerWidgets();

}

If we reload our dash­board, we’ll get an error that Craft can­not find our wid­get class. This is because we need to build the autoload files. From the com­mand line, run:

composer dump-autoload -a

And now we should see our wid­get in the New wid­get menu on the dashboard!

Building a Craft CMS Dashboard Widget is made up of the following videos: