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.

  • July 16, 2019

When you are developing new widgets inside Sitefinity, you need a way to add those widget to the Toolbox, if you want your content editors to be able using 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 webforms 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. In here you can create a new item (figure 2)
  4. Fill in the properties and save your settings. (-> see explanation of properties)
  5. Now you can choose the new widget from you page designer
Figure 1
Figure 1
Figure 2
Figure 2

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 that 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.

Image Description

Entrepreneur, Senior Software Engineer .NET, Sitefinity Solution specialist, Orchard CMS enthusiast, Product Owner

All Author Posts

Got another minute? Check out:

Image Description

Call us

+31 (0) 36-2000196
Image Description

Address

Grote Beer 57, 3893 DJ Zeewolde
NLThe Netherlands

Please sign in

Signin to manage your account.

Do not have an account? Signup

OR