Custom Widget with 2 fields - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 29-Jun-2013 00:00

Hi
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

get_message: 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

get

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.

cheers

Chris

Posted by Community Admin on 29-Jun-2013 00:00

Chris,
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;

-Jon

Posted by Community Admin on 29-Jun-2013 00:00

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

$("#name").val(controlData.Name);

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.

Posted by Community Admin on 29-Jun-2013 00:00

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.

Cheers

Chris

This thread is closed