Organizing widgets in your Sitefinity Page Editor

Sitefinity Feather is awesome, like so awesome let me count the ways

Lightweight MVC markup
All widgets perfectly Styled to your framework (Bootstrap, SemanticUI, Foundation)
cshtml widget templates are external and editable in your ResourcePackage (no more drilling into the Telerik.Sitefinity.Resources.dll to extract a .ascx template and then map it externally
No more RadEditor pains
Fullscreen Widget Editors
You can submit changes to the widgets through GitHub, I’ve had a few accepted, small things that would be outstanding in webforms for years because they just don’t have the time to get to them.
Weekly NuGet updates (as of right now)

The only current issue is that all of the widgets appear inside a Toolbox node titled “MvcWidgets”. This happens automatically everytime the site recycles, so if you move nodes out of there, they appear back in it. So when you’re in Sitefinity Pure MVC mode all of the widgets are in the same bucket. For example all of the Login widgets are in the same bucket as the Content widgets…it’s too muc.

The Fix

What we basically need to do is to HIDE that node and instead copy\paste the widgets to their proper nodes.

Step 1: Hide MvcWidgets

Find this node

<add enabled="True" title="Content" ordinal="0" name="MvcWidgets">

Set enabled to False, this hides it from the rendered toolbox

Step 2: Copy the widgets to other sections

So now start copy\pasting the widgets you find in that section out to their proper nodes. I say copy\paste because if you cut and paste they’ll just show back up inside MvcWidgets anyway. You don’t have to delete any of the webforms widgets by the way, in MVC Pure mode, they just don’t even show up.

Please note, you’ll need to create a custom new section for “Content” call it whatever you want. If you try to add the MvcWidgets to the default “ContentToolboxSection” the content widget will have #ResourceNotFound notes all over it.

Step 3: Reorganize the sections

So from here you can reorganize the sections by appending the attribute “ordinal” to the tool nodes. So lets say you want “Social” to appear below “Login” you would do something like this:

<add ordinal="2" name="Social">  
<add ordinal="1" name="Login">

You can’t just cut the nodes and reorganize them in the config, on reload they often just move themselves back around; the ordinal lets you just easily organize them.

Step 4: Remove Redundancy

Okay so now if you load a page in Hybrid mode, you’re gonna have most of the widgets duplicated…and this is going to be super confusing. A scenario for needing Hybrid is maybe you need the social login STS widget on a page. AAAAANYWAY just go though and identify the webforms version of the widget and set it’s enabled attribute to False. Let me be clear here…there is no scenario in which you would want the webforms over the Feather widget…no scenario :)

Step 5: Crack a beer, thumbs up to the feather team

Done, everything looks native again…the only tricky part now is future widgets added to feather need to be identified and moved out of MvcWidgets…but it’s super easy eh!