Need help on getting dynamic complex custom widget

62 views
Skip to first unread message

Jayaraman Kumar

unread,
Feb 19, 2013, 12:17:54 PM2/19/13
to jquery-form-b...@googlegroups.com
Hi,

I am extending the form builder with new widgets like select, checkbox list, country etc... Now i would to have a dynamic complex custom widget to be available for user in the Fields toolbox.

For example, Let us assume Address control, consists of group of controls been designed by user and that will be considered as one of the widgets here.

That is one of the example i said but as the business grows, there would be n number of custom controls...

Can you give me a Hint or a idea out here how could we go ahead with this scenario?

Thanks in Advance !!!

Chee Kin Lim

unread,
Feb 19, 2013, 11:56:53 PM2/19/13
to jquery-form-b...@googlegroups.com
Hi Jayaraman Kumar,

Thanks for using the plugin. May I know the version of JQuery and JQuery UI you used?

Cheers,
Chee Kin



--
You received this message because you are subscribed to the Google Groups "JQuery Form Builder Plugin" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-form-builder...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

jayram Kumar

unread,
Feb 20, 2013, 4:30:49 AM2/20/13
to jquery-form-b...@googlegroups.com
Hi,

The same one what i have taken from Git.

jquery-1.4.2.min
jquery-ui-1.8.7.custom.min

Regards,
Jay

Chee Kin Lim

unread,
Feb 21, 2013, 5:53:07 AM2/21/13
to jquery-form-b...@googlegroups.com
Hi Jay,

Thanks for writing.

Your requirement I call it "composite control". Beside Address field, another good example is Name field which can have First Name and Last Name.

Please refer to sample source code of Single Line Text at https://github.com/limcheekin/jquery-form-builder-plugin/blob/master/src/js/jquery.formbuilder.singlelinetext.js. Composite control is not so much different from simple control like Single Line Text except it is more complex.

First, you would need to put all fields to _html option of the control js file, eg:
               _html : '<div> \
<div><label><em></em><span></span></label> \
<input type="text" class="firstName" /> \
<p class="formHint"></p></div> \
<div><label><em></em><span></span></label> \
<input type="text" class="lastName" /> \
<p class="formHint"></p></div> \
</div>'
,

You need to layout fields of the composite control appropriately using CSS.
Then, add settings specific to the composite control.
Lastly, implement the server side functionality of the composite control.

Hope the idea above help.

Best regards,
Chee Kin

Jayaraman Kumar

unread,
Feb 21, 2013, 7:06:49 AM2/21/13
to jquery-form-b...@googlegroups.com
Hi Lim,

Thanks for you help.

In the meantime i was working on the same req.  the same solution i found.
but only one difference is that user want to create his own custom control on the fly. so whenever there is a new control created accordingly
one user control is created in the run-time and mapping table have both id and User control name.

On getWidget() method i m getting the html of the User control corresponding to that control and assign to html property out there.

I hope this is what the way we can implement the custom ctrl. what do you feel about this?

Thanks for your quick reply.... :)
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-form-builder-plugin+unsub...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "JQuery Form Builder Plugin" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-form-builder-plugin+unsub...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "JQuery Form Builder Plugin" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-form-builder-plugin+unsub...@googlegroups.com.

Chee Kin Lim

unread,
Feb 21, 2013, 8:30:18 AM2/21/13
to jquery-form-b...@googlegroups.com
Hi Jay,

You're mostly welcome. The idea of allow user to create the custom control on the fly is great! But it is challenging to implement.

First thing you need to change is the design of Field Settings tab to enable it to support dynamic setting.

Also, you need to create a CustomControl plugin which may extends from fbWidget plugin. The CustomControl should able to contain all simple controls such as SingleLineText, MultiLineText, Email, Phone, Number, Web Address, etc. Users should able to layout and align these simple controls based on their preference.

If you able to implement the
CustomControl plugin, very appreciate if you can contribute the code back to the project.

Just my 2 cents. :)

Best regards,
Chee Kin


 



To unsubscribe from this group and stop receiving emails from it, send an email to jquery-form-builder...@googlegroups.com.

Jayaraman Kumar

unread,
Feb 21, 2013, 10:11:43 AM2/21/13
to jquery-form-b...@googlegroups.com
Hi Lim,
Thanks for your valuable input.
Let me see how i can go with this req. I will contribute here if i get the useful widget.

Thanks.

Chee Kin Lim

unread,
Feb 21, 2013, 10:18:36 AM2/21/13
to jquery-form-b...@googlegroups.com
Hi Jay,

You're mostly welcome. Wish you all the best!

Best regards,
Chee Kin


--
Reply all
Reply to author
Forward
0 new messages