Try Now
More in this section

Forums / Developing with Sitefinity / Custom Widget with 2 fields

Custom Widget with 2 fields

4 posts, 0 answered
  1. Chris
    Chris avatar
    2 posts
    20 Oct 2011
    29 Jun 2013
    Link to this post
    I am just getting started on Widgets and I am having problems trying to understand how the javascript interacts with the widget in the designer.

    Basically I have created a widget with designer from the Thunder addon for VS.NET

    I have selected "Add - > New Item" , "Sitefinity Widget with Designer" which has created a new Widget which I can add to a page quite simply.

    The widget has a single field. To help me learn I just want to have two fields.

    I seem to be able to do the aspx stuff to create the 2nd field but I am unsure about the javascript interaction from the designer perspective.

    Could someone create a really simple widget (which derives from SimpleView) with two edit fields or point me to some code that does this already so I can see where you have made the 2nd field work in the designer.

    I may not be alone here in not seeing the interaction in the .JS file of the designer and the UI.

    The default code created a variable

    this._message = null;

    But it is never set to a value.

    Later it is used in the following code

    function () { return this._message; },
    set_message: function (value) { this._message = value; }

    But like I said the value was never set - so what is setting the value?

    Also in the .CS file there is the following code

    protected virtual Control Message
    return this.Container.GetControl<Control>("Message", true);

    public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
    var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
    var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();

    descriptor.AddElementProperty("message", this.Message.ClientID);

    So again I do not see a relationship between "message" and "_message" - is there are documentation on this?

    It also looks like the designer implementation has changed from previous Sitefinity versions so a real example would be good for the current version of Sitefinity.


  2. Jonathan
    Jonathan avatar
    119 posts
    19 Dec 2012
    29 Jun 2013 in reply to Chris
    Link to this post
    I have found it easier to create the "front end" widget first.  So create the item without the widget designer.  Once you create the widget in the code (.cs) file create the public properties you desire. 

    public string string1 {get; set;}
    public bool showString {get;set;}

    Once you have created the properties you want build the solution.  After you build create a folder called designer inside your widget folder.  Right click that and create new sitefinity item "Designer from Existing Widget"  Follow the steps to create the designer selecting the "front end" widget you already created.  Make sure you select the right type of field to match your properties.  

    This will create all the correct files and then you will have a real world example of the .js file for the designer.

    If you need more info let me know.

    In the .js file this line sets _message

    set_message: function (value) { this._message = value; }

  3. Steve
    Steve avatar
    3037 posts
    03 Dec 2008
    29 Jun 2013 in reply to Jonathan
    Link to this post
    It's waaaay easier than you're even thinking.

    Think of the ascx as just a plain html/aspx and the designer js is like a javascript file linked to it on it's header.  So plain jquery or javascript selectors can be used to grab and set values right from the js.

    So when the designer loads you go through the init method in the js, use that to setup stuff like arrays, or kendo mvvm bindings, but by and large, you won't need it.

    The next part is the refreshUI method.  Thats like a success ajax callback from the server getting the currently assigned values on the control.  So you should have (from the thunder widget) some sort of controldata object which contains all those values....just set them back to the elements.
    Then when save is clicked the applyChanges method is called...so you're doing LITERALLY the exact opposite of refresh ui.  

    So it'd be like this on refresh...notice we're grabbing the input with ID name from the ascx
    Then like this on applyChanges...so you're just grabbing the currently assigned value from name and putting it back...sitefinity will handle the saving of it from there.
    controlData.Name = $("#name").val()

     I just don't bother with the get set methods and usually use plain html elements on the ascx over the more bloated asp.net controls....they're just not needed.
  4. Chris
    Chris avatar
    2 posts
    20 Oct 2011
    29 Jun 2013
    Link to this post
    Thanks guys for your help.

    Doing the designer 2nd certainly made it easier for me to get to grips with exactly what's going on.


4 posts, 0 answered