Adding Controls to the Toolbox

This section explains how you can add a control to the Sitefinity toolbox, so that you can use it on Sitefinity pages.

How to Add New Comntrols to Sitefinity Toolbox?

Sitefinity toolbox can be extended with additional controls needed by your project. To add a new control to Sitefinity, one needs to create a User Control (.ascx) or a Custom Control (.dll) file and upload it to Sitefinity toolbox. While the theme of this topic is discussed in more details later in the manual, here are some basic pointers:

1. Create your control in Visual Studio, or place your existing control in the Sitefinity Project

 

2. Create new toolbox item - Navigate to Administration -> Settings -> Advanced. The configuration editor will appear. Browse to Toolboxes->PageControls->Sections and choose the section which should house your new control, and click Create New.


3. Set the control properties.

Note that there is hint below each configuration property. We will list the controls configuration properties here as well:

  • Enabled - indicates whether a defined toolbox item should appear in the toolbox. In this case, indicates if the control (gadget) will appear in the toolbox. This property is useful when the control should be defined in the system, but shouldn't be shown to the end users.
  • ControlType - indicates the Specifies CLR type (fully quallified name) for custom controls or the virtual path for user controls. In our case we are using virtual path, since we are adding User Control (not a compiled control)
  • Name - Defines the programmatic name of the item. This is the name used to access the item through the code.
  • Title - Defines what name will be displayed for the item on the user interface.
  • Description - Describes the purpose of the control represented by this toolbox item.
  • ResourceClassId - Defines global resource class ID for retrieving localized strings.
  • CssClass - Defines the CSS class representation which can include item icon for the user interface.
  • LayoutTemplate - Specifies the name of an embedded layout template or the path to an external (.ascx) template.

  • Sitefinity will automatically generate a Property Grid editor for all the public properties of your controls
  • All public properties of the controls will be automatically persisted for you. For example, if you create a Link control, with public properties "Text" and "Url", whenever user changes the values of these properties, Sitefinity will persist those values to a database. You do not need to implement any persistence mechanisms.
  • Sitefinity offers base classes for control designers (control designers offer alternative way of setting controls properties, which is more user-friendly than Visual Studio-like property grid).
  • Controls added to the Sitefinity toolbox behave just as built-in Sitefinity controls, which means that users can drag-and-drop them to different areas of pages, reorder them, remove them and edit their properties directly from the browser.

Manually adding/managing controls through configurations

To manually add or manage controls directly through the config files, use these steps:

  1. Open the App_Data\Sitefinity\Configurations\ToolboxesConfig.config
  2. Find the section needed or your control.

In our case, here is how the control has been added by the system:

<?xml version="1.0" encoding="utf-8"?>
<toolboxesConfig>
    <toolboxes>
        <toolbox name="PageControls" title="PageControlsToolboxTitle"description="PageControlsToolboxDescription"resourceClassId="PageResources">
            <sections>
                <add name="ContentToolboxSection"title="ContentToolboxSectionTitle"description="ContentToolboxSectionDescription"resourceClassId="PageResources">
                    <tools>
                        <addtype="Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlock, Telerik.Sitefinity, Version=4.0.242.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" name="ContentBlock"title="ContentBlockTitle" description="ContentBlockDescription"resourceClassId="PageResources" cssClass="sfContentBlockIcn" />
                        <addtype="Telerik.Sitefinity.Modules.Blogs.Web.UI.BlogPostView, Telerik.Sitefinity, Version=4.0.242.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" name="BlogPostsView"title="BlogPostsViewTitle" description="BlogPostsViewDescription"resourceClassId="BlogResources" cssClass="sfBlogsViewIcn" />
                        <addtype="Telerik.Sitefinity.Modules.Events.Web.UI.EventsView, Telerik.Sitefinity, Version=4.0.242.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" name="EventsView"title="EventsViewTitle" description="EventsViewDescription"resourceClassId="EventsResources" cssClass="sfEventsViewIcn" />
                        <addtype="Telerik.Sitefinity.Modules.News.Web.UI.NewsView, Telerik.Sitefinity, Version=4.0.242.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" name="NewsView" title="NewsViewTitle"description="NewsViewDescription" resourceClassId="NewsResources"cssClass="sfNewsViewIcn" />
                    </tools>
                </add>
                <add name="NavigationControlsSection"title="NavigationControlsSectionTitle"description="NavigationControlsSectionDescription"resourceClassId="PageResources">
                    <tools>
                        <addtype="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMap, Telerik.Sitefinity, Version=4.0.242.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" name="SiteMapControl"title="SiteMapControlTitle" description="SiteMapControlDescription"resourceClassId="PageResources" cssClass="sfSitemapIcn" />
                        <addtype="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMenu, Telerik.Sitefinity, Version=4.0.242.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" name="SiteMenu" title="SiteMenuTitle"description="SiteMenuDescription" resourceClassId="PageResources"cssClass="sfMenuIcn" />
                        <addtype="Telerik.Sitefinity.Web.UI.NavigationControls.SiteTree, Telerik.Sitefinity, Version=4.0.242.0, Culture=neutral, PublicKeyToken=b28c218413bdf563" name="SiteTree" title="SiteTreeTitle"description="SiteTreeDescription" resourceClassId="PageResources"cssClass="sfTreeviewIcn" />
                -->        <add type="~/controls/ctrl.ascx"name="SampleControl" title="MyControl" description="Adding a user control" layoutTemplate="~/controls/ctrl.ascx" />
                        ......
                    </tools>

Related topics:

Feedback

How useful is this article?

Tell us more

Submit
Your message was successfully sent.

We appreciate your feedback.

Your message could not be sent.

OK