Tweaking the Widget Behavior

We tweak the widget behavior by only allowing a single instance, adding a widget icon, and limiting the column span.

We have a nice, sim­ple but help­ful wid­get now. How­ev­er, I want to tweak a few more things before we wrap up this first ver­sion. Let’s jump in.

Only Allow a Sin­gle Instance of Widget

With some wid­gets, you want to allow as many instances of the wid­get as a user desires. And, by default, Craft’s wid­get class will allow that. How­ev­er, it doesn’t make much sense to allow mul­ti­ple instances of this dep­re­ca­tion warn­ings wid­get. One is enough, so let’s con­strain it so there can only be a sin­gle instance of the wid­get at a time.

In the base Wid­get class, there’s a sta­t­ic method called allowMultipleInstances() that returns a boolean. By default it returns true unless we over­ride it to return false in our own class. Let’s do that.

In the DeprectWidget.php class file, we’ll add some new code to over­ride that base class method:

protected static function allowMultipleInstances(): bool
{
	return false;
}

Now when we refresh the dash­board and try to cre­ate anoth­er instance of the wid­get, it’s no longer avail­able in the drop-down. If we remove the copy we have, then it’ll show up again!

Add Wid­get Icon

Right now we are using the default icon that Craft pro­vides for our wid­get. This is the first let­ter of the wid­get name in a cir­cle style. Let’s do some­thing cus­tom for this using an SVG image.

To get start­ed we need to use the icon() sta­t­ic method that is part of the base Wid­get class. We’ll over­ride it with our own and show our cus­tom icon. 

Up near the top of the the DeprecWidget.php class file, let’s add a new sta­t­ic method for the icon:

public static function icon()
{

		

}

And to define the icon we want to to use for this wid­get, we need to return the icon file. 

I know that Craft already has an icon asso­ci­at­ed with the Dep­re­ca­tion Warn­ings in the Con­trol Pan­el. If I nav­i­gate over to them, we see that it uses the lit­tle bug SVG icon. In the inter­est of mak­ing things sim­pler and the UI uni­form, let’s just bor­row that icon. 

Since Craft CMS already set up an alias to eas­i­ly access that icon, we’ll call it direct­ly via the alias Craft already has cre­at­ed, so it’s just a sim­ple one-liner:

public static function icon()
{

	return Craft::getAlias('@appicons/bug.svg');

}

Now let’s clear the wid­get instance we have right now and reload the page to see our change. Look­ing at it, we now see our cus­tom icon in the right place!

Con­trol Max­i­mum Columns Allowed

Our last final tweak is to con­trol the num­ber of columns that we want our wid­get to display. 

After cre­at­ing a new instance of a wid­get, we can resize it to one or more columns using the gear menu.

We can safe­ly ignore this and let the wid­get grow to what­ev­er size the user desires. How­ev­er, this sim­ple wid­get has no increased help­ful­ness at full width, so let’s restrict it to just 2 columns. 

We need to add a sta­t­ic method to our wid­get class that lets us define the max­i­mum col­umn span. 

public static function maxColspan(): int
{
	
}

This method returns an inte­ger with the num­ber of columns we want to restrict to. So let’s return 2.

public static function maxColspan(): int
{
	return 2;
}

When we reload the con­trol pan­el dash­board and try to adjust our wid­get width, it’ll let us change it wider than our max col­umn-span but when we reload, the wid­get is always con­strained to the max-width we set.

We have a nice, ful­ly func­tion­al, and prac­ti­cal wid­get that we can use in our project. Deprect­No­ti­fi­er is super handy as a default mod­ule while devel­op­ing a Craft-pow­ered web devel­op­ment project. 

Con­grats on build­ing your first widget!

Dozens of Courses Are Waiting

Invest in yourself, your career, and your ability to take knowledge and use it grow your business or earning potential.

Get everything in the catalog plus new videos every week. Just by signing up you get immediate access to hundreds of hours of learning.

Start CraftQuest

Image