How to add event handler to widget designer?
Hey guys, i know it's a silly question because i'm new with sitefinity. So let's say i have a JS file like this.
--------------
Type.registerNamespace("SitefinityWebApp.Web.Widgets.Carrousel.Designer");
SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner = function (element)
/* Initialize fields */
this._randomCarrousel = null;
this._manualCarrousel = null;
this._formationCheckList = null;
/* Calls the base constructor */
SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.initializeBase(this, [element]);
SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.prototype =
/* --------------------------------- set up and tear down --------------------------------- */
initialize: function ()
/* Here you can attach to events or do other initialization */
SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.callBaseMethod(this, 'initialize');
,
dispose: function ()
/* this is the place to unbind/dispose the event handlers created in the initialize method */
SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.callBaseMethod(this, 'dispose');
,
/* --------------------------------- public methods ---------------------------------- */
findElement: function (id)
var result = jQuery(this.get_element()).find("#" + id).get(0);
return result;
,
/* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
refreshUI: function ()
var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
if (controlData.IsManualCarrousel)
jQuery('#' + this.get_manualCarrousel()).prop('checked', true);
else
// set manual
jQuery('#' + this.get_randomCarrousel()).prop('checked', true);
var chkList = document.getElementById(this.get_formationCheckList());
var checkbox = chkList.getElementsByTagName("input");
var label = chkList.getElementsByTagName("label");
var str = controlData.Formations;
var array = new Array();
if (str)
array = str.split(',');
for (var i = 0; i < array.length; i++)
if (label[i].innerHTML == array[i])
jQuery(checkbox[i]).prop('checked', true);
else
jQuery(checkbox[i]).prop('checked', false);
,
/* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
applyChanges: function ()
var controlData = this._propertyEditor.get_control();
/* radio button */
var rad = this.get_randomCarrousel();
if ($('#' + rad).prop('checked'))
controlData.IsManualCarrousel = false;
else
controlData.IsManualCarrousel = true;
/* check box list */
// get selected items
var array = "";
if (controlData.IsManualCarrousel == true)
var chkList = document.getElementById(this.get_formationCheckList());
var checkbox = chkList.getElementsByTagName("input");
var label = chkList.getElementsByTagName("label");
var checkCounter = 0;
for (var i = 0; i < checkbox.length; i++)
if (checkbox[i].checked)
if (i == (checkbox.length - 1))
array += label[i].innerHTML;
else
array += label[i].innerHTML + ",";
checkCounter++;
if (checkCounter < 8)
alert("Un minimum de 8 formations doit être sélectionné dans la liste");
thisFunctionGetCalledToStopJavascript();
controlData.Formations = array;
,
/* --------------------------------- event handlers ---------------------------------- */
/* --------------------------------- private methods --------------------------------- */
/* --------------------------------- properties -------------------------------------- */
get_randomCarrousel: function () return this._randomCarrousel; ,
set_randomCarrousel: function (value) this._randomCarrousel = value; ,
get_manualCarrousel: function () return this._manualCarrousel; ,
set_manualCarrousel: function (value) this._manualCarrousel = value; ,
get_formationCheckList: function () return this._formationCheckList; ,
set_formationCheckList: function (value) this._formationCheckList = value;
SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.registerClass('SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
------
Could you guys give me a sample pattern to add event handlers to my JS file? For example, i want to have a click event handler on my _randomCarrousel control.
Thanks.
Hello Nghi,
You can use Sitefinity Thunder to generate a designer for a widget and inspect the implementation. To do so:
- Add webuser control to your project
- Add Guid property and build the solution
- Add new Item - Desiner for existing widget:
http://docs.sitefinity.com/81/thunder-create-widget-designers#create-a-designer-for-an-existing-widget
- Create selectors for that Guid property (e.g. Image selector)
http://docs.sitefinity.com/81/thunder-create-selectors-for-guid-properties-in-widget-designers
You can check the generated .js file implementation
Regards,
Svetoslav Manchev
Telerik
Hey Nghi, looking at that old WebForms code makes me feel ill these days.
Do yourself a giant favour and develop only in Feather/MVC:
projectfeather.sitefinity.com/
Your designer will run Angular code and be just a joy to work with instead of a nightmare.