Simple way to add toolbox polish to your custom widgets

If you make custom widgets, I'd bet they look like this in the toolbox



So that tells no story at all...

What you need to do is in your ControllerToolboxItem attribute, implement the CssClass property




BOOM, yeah... pro stuff right there, no more stupid dotted box

So 2 things of note here
  1. sfMvcIcn: This is the little blue MVC annotation
  2. sfImageLibraryViewIcn: WTF!? Okay so all of the existing OOTB toolbox widgets are one big-ass sprite.  The backend breaks that up with these special classes which are not documented anywhere I know about.  So just right-click on the toolbox items icon you want, click Inspect and let the chrome inspector tell you the class name.
  3. If you add this property to an EXISTING TOOLBOX widget nothing will change, you need to manually edit the ToolBox.config to add the class.  If this is a NEW widget being registered into the toolbox... it'll insert for you.


    Blog-toolbox-icon
Pay special attention to the ".RadDock .rdTable .rdTitleBar div" entry in the sidebar, it has a WebResource.axd link to the ACTUAL sprite being used... fun to look at.  Maybe you'll find a new asset not in yet in SF or something 😊

An aside

You aren't limited to using these icons or classes.  The entire backend is loaded in the same frame.  So your page template could load in (in design mode) a custom css file with your own icon class names to use.  This is just the easy button... 
Did you like this post, did I help you out, are you feeling generous

  Buy me a beer

Comments