Down-Under: A New Perspective on Building Widgets with Sitefinity

Sitefinity comes with tons of slick widgets that users love so much about the system. Business users can use them right away and developers don’t need to write code unless they want to introduce some fancy customization. Sitefinity has always been about that – to provide all the user groups with the right tools and to make them productive, while keeping the joy element in every single task user do.

The framework is very flexible. There are so many layers of abstraction with the sheer idea to add different dimensions for customization.  In other words, Sitefinity provides the infrastructure for developers to extend the features of the system, while keeping consistent common elements trough the UI.

For instance, all widgets can have the so called designers to provide the users with advanced friendly UI. If we drill down on a more technical level (and that is the purpose here) each designer is a custom interface to expose the public properties of the custom controls that developers register as Sitefinity widgets. So that is just a custom control to create user interface to manage the functionality of the actual custom control that becomes a Sitefinity widget. In other words – instead of letting users use prehistoric text boxes, we (as designers and developers) may implement any custom interface to get the job done. Does it sound too complicated, I hope not…

We have tons of awesome resources on how to create widget designers and what is the logic behind them. So, this is not going to be a tutorial on how to create a widget with designer. Instead, I will primarily focus on the important lessons I have learned and some key moments during the development of the Kangaroo widget (link will be updated soon with installation instructions). So before you continue reading, please take a look at it and see whether you want to see how you can build widget designers with similar functionality.

Are you still here? Good! 

The widget achieves a fairly trivial task – to allow web designers to add and arrange the order of multiple resources (JavaScript, CSS and LESS). Obviously, instead of advanced and slick designer, the job could have been done with text-boxes and users could just leave a comma separated list of resource paths and types. And this would have worked, since the widget expects two arrays of data – one for the resources referenced in the header and one those designated just before the closing body tag. But what if we want something user friendly for the users and to save them time and to increase their productivity. And the touch is very important – drag and drop is the most efficient human – machine interface ever created. No room for errors, no wasted time and sleepless nights. Here is how you can leverage some advice:

Control the UI

Based on the user case with the designers in Sitefinity, we can achieve any user interface. For that widget, I have used standard ASP.NET controls, as well as some AJAX powered advanced controls like RadFileExplorer. I have also used client side components like Kendo UI TreeView to visualize the two lists of resources. Briefly, the only limitation is our imagination and with the the currently employed technology for the Sitefinity widget designers, we can achieve virtually anything we dare to imagine.

Control the events

The events are really essential piece of the picture. Without handling client-side events, there is no way to have a responsive UI to deliver best user experience and productivity at the same time. With the designer, we have the power to define an interface, which can save so much time for our users and they will love it, trust me!

Key point here:

If we want to use the client side API of an AJAX controls like the RadControls, we need to add their script descriptors, so we can then work with them as client side components, as well. This way ASP.NET will render JavaScript that creates an instance of the client control. More about this standard ASP.NET AJAX components can be read here. For Sitefinity, the method GetScriptDescriptors() located in the designer will take care of registering the client side objects of all the AJAX controls. As a next step is important to subscribe for all the events, which are important for the user case, you want to implement.  You do this with delegates and here is a sample, where the RadFileExplorer object has a client side method “add_fileOpen” and I use it to add the delegate, so I can use the this._doubleClickItemHadler function as a way to handle the logic on firing that event.

this._doubleClickItemDelegate = Function.createDelegate(this, this._doubleClickItemHandler);

this._fileExplorer.control.add_fileOpen(this._doubleClickItemDelegate);

Working with client side components and libraries like jQuery UI, Kendo UI is actually very simple. Define the elements in the mark up of the .ascx file. Then you can manage them entirely from the JavaScript file in an absolutely standard way. I have used jsFiddle to test my code and then I have pasted it into my .js file. Easy as that – just try it and you will see how easy is to work with client side templates, events, methods and configurations.

Control the user experience

What’s next – if you think you can use some of these approaches, I would love to learn more about it and discuss different options. I haven’t provided much samples, as I believe, when you download the source code, you will find answers to most of the questions you might have. I will await your feed back .