ListBox in Custom Control Designer and jQuery

Hi!

For a widget that displays one or more videos that are stored in a S3-Bucket, I wrote a Custom Control Designer with a ListBox. The ListBox is filled with the available videos in the Bucket. The User can select one ore more videos in the ListBox. That works fine.

With [ListBox].get_selectedItems() and get_value() I get the selected value(s). Which is now the best method to store the selected values in Sitefinity? String[], IList or Comma separated values? And how do I do that? And vice versa. Sorry, I'm groping in the dark.

And by the way. How do You debug/programm with jQuery in an efficent manner? There's Intellisense for basic vars and methods. But, build the solution, open the widget in backend, using firebug seems to be a long way to realize/be realized that there's not the function/property i thought in this object. Is there a Plugin (for VisualStudio 2010) or a tool that might help? IMHO the interaction between C# an jQuery would a good topic for a webinar.

Thanks in adavance!

Dieter

Hi Dieter,

Control designers in Sitefinity have only one purpose - provide a user friendly interface for setting the properties of the respective widget. They don't store custom data in the database, they only set properties. It is up to you what properties are set. So in your specific question, whether it would be String[], IList or comma-separated values, depends on the property in the widget itself, which holds the information about what videos to display.

The values themselves are set when the control designer calls a service and passes the needed data. This is done automatically for you. All you need to do is implement two methods on the client - refreshUI() applyChanges().

refreshUI() is called every time the user opens your control designer. Its role is to populate the UI, depending on the properties already set for the control. For example, when you open it for the second time, it should select (in the list) the video you selected the previous time. You can get the properties of the widget by calling this.get_controlData(). This would contain a client representation of the server-side class of the widget, with all nested properties. You can use the values to populate the UI.

applyChanges() is called every time the user clicks Save. Its role is to get the values from the UI of the designer and set them on the control properties (exactly the opposite of refreshUI). Again, you can get a reference to the properties by calling this.get_controlData(), and then just set the new values that come from the UI.

Once you set this controlData object with the right values, everything else is handled for you by the base controlDesigner component from which you inherit, and the service. You can use the value of your widget property on the server and it will be there.

As for debugging JQuery - it is a personal preference. I myself use Firebug because it seems the most natural and functionally-rich debugger. Most people in our team do the same. I know others use Visual Studio, but I don't know if there is intellisense for JQuery and how to set it up.