Implementing custom designer for FormsControl

Posted by Community Admin on 05-Aug-2018 13:12

Implementing custom designer for FormsControl

All Replies

Posted by Community Admin on 28-Mar-2011 00:00

I've implemented a FormsControlCustom that inherits from FormsControl and overrides the submit method so that I can email the form details out. All works fine when I hard code the email settings, but I'm trying to implement a custom designer so that I can set the email recipients and subject per form instance. The problem is that the form is not saving the extra data, it is, however, saving the selected form.

The problem appears to be in the javascript. If I inherit from FormsControl and change the type in the registerClass method to FormsControlDesigner, it works as described above, if I inherit from ControlDesignerBase and change the type in the registerClass to match, it does not work at all - gives "e is undefined" error message and displays a blank form.

Autonet.FormFill.FormsControlCustomDesigner = function (element)
    Autonet.FormFill.FormsControlCustomDesigner.initializeBase(this, [element]);
    this._parentDesigner = null;
    this._toogleGroupSettingsDelegate = null;
Autonet.FormFill.FormsControlCustomDesigner.prototype =
    initialize: function ()
        Autonet.FormFill.FormsControlCustomDesigner.callBaseMethod(this, 'initialize');
        this._toogleGroupSettingsDelegate = Function.createDelegate(this, function ()
        jQuery(".sfExpandableSection a").click(this._toogleGroupSettingsDelegate).click(function()
    dispose: function ()
        Autonet.FormFill.FormsControlCustomDesigner.callBaseMethod(this, 'dispose');
    refreshUI: function ()
        var data = this.get_controlData();
    applyChanges: function ()
        var controlData = this.get_controlData();
        controlData.EmailRecipients = jQuery("#EmailRecipients").val();
        controlData.EmailCc = jQuery("#EmailCc").val();
        controlData.EmailSubject = jQuery("#EmailSubject").val();
    get_controlData: function ()
        return this.get_propertyEditor().get_control();
    // gets the reference to the propertyEditor control
    get_propertyEditor: function ()
        return this._propertyEditor;
    // sets the reference fo the propertyEditor control
    set_propertyEditor: function (value)
        this._propertyEditor = value;
Autonet.FormFill.FormsControlCustomDesigner.registerClass('Autonet.FormFill.FormsControlCustomDesigner', Telerik.Sitefinity.Modules.Forms.Web.UI.Designers.FormsControlDesigner);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Posted by Community Admin on 29-Mar-2011 00:00

When saving the selected form, it is posting to "~/Sitefinity/Services/Pages/ControlPropertyService.svc" where I would expect it to be posting to "~/Sitefinity/Services/Forms/FormsService.svc" as in the template declaration. Is this where the problem is, and how would I solve it?

Part of my problem appears to be attached delegates to the form selected event of the ContentSelector. How do I go about that? I've tried using pageSelected, formSelected, contentSelected, but none of them seem to work.


Posted by Community Admin on 31-Mar-2011 00:00

Hi Ryan,

ControlPropertyService is called when the designer saves the data you passed. FormsService is used to populate the data.

Telerik.Sitefinity.Samples.FormsControlDesignerCustom = function (element)
    this._contentSelector = null;
    this._MailSettings = null;
    Telerik.Sitefinity.Samples.FormsControlDesignerCustom.initializeBase(this, [element]);
Telerik.Sitefinity.Samples.FormsControlDesignerCustom.prototype =
    initialize: function ()
        Telerik.Sitefinity.Samples.FormsControlDesignerCustom.callBaseMethod(this, 'initialize');
    dispose: function ()
        Telerik.Sitefinity.Samples.FormsControlDesignerCustom.callBaseMethod(this, 'dispose');
    reset: function ()
        Telerik.Sitefinity.Samples.FormsControlDesignerCustom.callBaseMethod(this, "reset");
    refreshUI: function ()
        var controlData = this.get_controlData();
        if (!controlData)
    // once the data has been modified, call this method to apply all the changes made
    // by this designer on the underlying control object.
    applyChanges: function ()
        this.get_controlData().email = this.get_MailSettings().Text;
    get_contentSelector: function ()
        return this._contentSelector;
    set_contentSelector: function (value)
        this._contentSelector = value;
    get_MailSettings: function ()
        return this._MailSettings;
    set_MailSettings: function (value)
        this._MailSettings = value;
Telerik.Sitefinity.Samples.FormsControlDesignerCustom.registerClass('Telerik.Sitefinity.Samples.FormsControlDesignerCustom', Telerik.Sitefinity.Modules.Forms.Web.UI.Designers.FormsControlDesigner);

Ivan Dimitrov
the Telerik team

This thread is closed