How to: Add custom Web User Controls to SiteFinity as widgets

I started working with Sitefinity lately. An interesting CMS product that helps achieve a lot of functionality right out of the box.

However, as the client needed some custom operations, we needed to create reusable controls to be imported into the Sitefinity solution.

How do you do that? It’s easy after all.

1. Create your custom user controls in Visual Studio and save them in a folder inside the Sitefinity project. If the entire project is loaded into VS, just create a new folder called Widgets and put your custom controls in there.

2. Once you’ve done that, you will need to access the Sitefinity backend, click on the Administration menu and select Settings, hit on Advanced and find the Toolboxes on the left hand side column. inside toolboxes, navigate to Toolboxes>PageControls>Sections. You can create a new section if you wish (this will be the section where your custom control will appear in) or you can use one of the existing ones if one applies.

3. Inside the section, you will find Tools. Click on it and Create a new one. Give it a name and make sure to enter the correct folder path and control name in the the “Control CLR Type or Virtual Path”. This should be something like “~/Widgets/controlName.ascx” (omit the quotes). You can’t have spaces in the name, but you can in the Title. In the CssClass, you can provide an icon for your new tool (actually, I haven’t done that yet, I should look it up on how to achieve that).

4. Save your changes and visit the Pages menu.

5. Either create a new page, or edit one of the existing ones if that applies. In the widgets area, you will now be able to add your new custom control if you did everything correctly in the previous step. You will find your custom control on the right hand side column, under the Section title that you chose when setting up the administration values.

That’s it. If Sitefinity can’t locate your custom control at the path that you defined earlier on, it will let you know. So, you can be sure that after you’ve published your page, it will display just as you’d expect it to.