+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How to add event handler to widget designer?

How to add event handler to widget designer?

3 posts, 0 answered
  1. Nghi
    Nghi avatar
    8 posts
    Registered:
    05 Apr 2016
    18 May
    Link to this post

    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.

  2. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    07 Dec 2016
    23 May
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Stephen2
    Stephen2 avatar
    94 posts
    Registered:
    05 Feb 2012
    27 May
    Link to this post

    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:

    http://projectfeather.sitefinity.com/#/home

     

    Your designer will run Angular code and be just a joy to work with instead of a nightmare.

     

3 posts, 0 answered