Development

How to add a widget to the Sitefinity Toolbox

Learn how to add a new or existing Sitefinity widget to the Toolbox. Either an old fashioned Webforms widget or a new MVC widget.

Daniel Plomp

October 20th, 2021

When you are developing new widgets inside Sitefinity, you need a way to add those widgets to the Toolbox, if you want your content editors to be able to use these widgets on their pages.

Currently, you can develop widgets with two different techniques: 

  • Webforms

  • MVC

I'll show you to add widgets in both ways.

Webforms

If you are using web forms you can simply register the widget through the user interface.

  1. First login into Sitefinity and navigate to Administration -> Settings - Advanced

  2. In here you'll find a node called Toolboxes (figure 1)

  3. Here you can create a new item (figure 2)

  4. Fill in the properties and save your settings. (-> see an explanation of properties)

  5. Now you can choose the new widget from your page designer

MVC
If you are using MVC, you can simply apply an attribute to your controller class. It looks like this:

This will add a new widget to the toolbox for use within your MVC and/or Hybrid templates.

Explanation of properties

In both cases, you'll need to fill in some properties to tell Sitefinity how you want to register your new widget. There are a number of properties that you can use. The list below is when you are registering a webforms widget:

  • Name
    The unique developer name of the widget

  • Title
    The display name of the widget, visible in the widget toolbox

  • SectionName
    The unique developer name of the toolbox section, in which you add the widget. This can be an existing section name. To find out the names of existing sections, go to the ~/Sitefinity/Administration/Settings/Advanced/Toolboxes folder and expand the PageControls » Sections nodes. For example, you can add your new widget to the ContentToolboxSection, defined as the constant ToolboxesConfig.ContentToolboxSectionName

  • ModuleName
    The unique name of a Sitefinity module has to be explicitly activated so that you can see the widget in the toolbox. You can see the names of modules by navigating to the ~/Sitefinity/Administration/Settings/Advanced/System folder and expanding ApplicationModules.

    * This can be interesting when you want your custom widget to be only activated when e.g. the News Module is active. The widget won't appear inside the toolbox when the News Module is deactivated.

  • Toolbox
    The unique developer name of the toolbox, in which you register the widget. By default, this will be the page controls toolbox PageControls (the constant ToolboxesConfig.PageControlsToolboxName). You can also specify another name. For example, when developing MVC form fields, you use FormControls or the constant FormsConstants.FormControlsToolboxName.

  • CssClass
    This property enables you to control the styles of the toolbox item. The widget controller must implement either the ICustomWidgetVisualization interface or the ICustomWidgetVisualizationExtended interface. These interfaces enable you to use special styles in the toolbox and when dropping an empty widget on a page.

All rights reserved © ZimplerApps 2021