How to add new property

[srenivas Kumar]

I want to add a size property like, selecting the size of the text box (small, medium & large) how can i do that..?

[Chee Kin Lim]

Please see the code of Plain Text field at https://github.com/limcheekin/jquery-form-builder-plugin/blob/master/src/js/jquery.formbuilder.plaintext.js#L144

Hope this help.

Best regards,
Chee Kin

On Tue, Mar 19, 2013 at 8:48 PM, srenivas Kumar <sreniva...@gmail.com> wrote:

I want to add a size property like, selecting the size of the text box (small, medium & large) how can i do that..?

--
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.
 
 

[srenivas Kumar]

in order to add this property , in need to edit widget.js and core.js as well is that right..?

[kholoud hemmat]

to add size property to the textbox you will need to edit in
jquery.formbuilder.singlelinetext.js
in settings section add size property and set the default value for it
=> (size: 'small')
and in _getFieldSettingsGeneralSection method add the below code

var $textSize = $('<div><select id="field.size" > \
<option value="small">Small</option> \
<option value="medium">Medium</option> \
<option value="large">Large</option> \
</select></div>');

then append it to $valuePanel like this

var $valuePanel = fb.target._fieldset({ text: 'AdvancedProperties' })
.append(fb.target._oneColumn($textSize))

then add the below code

$("select option[value='" + fb.settings.size+ "']", $textSize
).attr('selected', 'true');
$('select', $textSize ).change(function (event) {
fb.settings.size= $(this).val();
fb.target._log('fb.settings.size= ' + fb.settings.size);
fb.target._updateSettings(fb.item);
});

[srenivas Kumar]

Hello hemanth

thanks for your reply, as i added the code it doesn't work, i think in order to display a dropdown box in that _getFieldSettingsGeneralSection we need to add some code like

_textSize: function(options) {
 		this._log('textSize(' + $.toJSON(options) + ')');
 		options.nobreak = true;
	 	var $textSize = this._label(options).append('&nbsp;<select>\
		    <option value="small">100</option> \
		    <option value="medium">200</option> \
		    <option value="large">300</option> \
		    </select>');		
		  var $select = $('select', $textSize);
		  if (options.value == 'default') {
			  $select.val(this._getFbOptions().settings.styles.width);
		  } else {
			  $select.val(options.value);
		  }
		  $select.attr('id', options.name);
		  return $textSize;
   } ,	


 _fontPanel:function(options) {
	  //fontFamily, fontSize, styles.fontStyles
	  var idPrefix = options.idPrefix ? options.idPrefix : '';
	  var names = [idPrefix + 'bold', idPrefix + 'italic', idPrefix + 'underline'];
	  var fontPanel = this._twoRowsOneRow(
			  this._fontPicker({ name: idPrefix + 'fontFamily', value: options.fontFamily }),
			  this._fontSize({ label: 'Size', name: idPrefix + 'fontSize', value: options.fontSize }),
              this._textSize({ label: 'field Size', name: idPrefix + 'textSize', value: options.width }),
			  this._fontStyles({ names: names, checked: options.fontStyles }).css('paddingLeft', '2em')
	    );

[srenivas Kumar]

after adding this code in widget.js i am able to see a dropdown in the UI , but i am unable to change the size.

and i think some cahnge need to be made in this section also

_createFieldProperties: function(name, options, settings, index) {
		// alert('name = ' + name + ', options._type = '+ options._type);
		var fieldId = 'fields[' + index + '].';
		var $fieldProperties = $('<div class="fieldProperties"> \
		<input type="hidden" id="' + fieldId + 'id" name="' + fieldId + 'id" value="null" /> \
		<input type="hidden" id="' + fieldId + 'name" name="' + fieldId + 'name" value="' + name + '" /> \
		<input type="hidden" id="' + fieldId + 'type" name="' + fieldId + 'type" value="' + options._type + '" /> \
		<input type="hidden" id="' + fieldId + 'settings" name="' + fieldId + 'settings" /> \
		<input type="hidden" id="' + fieldId + 'sequence" name="' + fieldId + 'sequence" value="' + index + '" /> \
		<input type="hidden" id="' + fieldId + 'status" name="' + fieldId + 'status" /> \
		</div>');
		$fieldProperties.find("input[id$='" + fieldId + "settings']").val($.toJSON(settings));
		return $fieldProperties;
    },    

 

 

[srenivas Kumar]

[kholoud hemmat]

no you don't nee to edit in _createFieldProperties method but you should edit in _getFieldSettingsLanguageSection in each control js file
for example: if you have a textbox control and has jquery.formbuilder.singlelinetext.js you will need to do the below steps:

 add size: 'default' inside the styles section in each language 

 edit _getFieldSettingsLanguageSection in it and add something similar to the below code:

var size = styles.size!= 'default' ? styles.size: fbStyles.size;
before $fontPanel initialization and then in
var $fontPanel = fb.target._fontPanel({......,size: size,
                          ...... });

then add

$("select[id$='field.size']", $fontPanel).change(function(event) {
var value = $(this).val();

//replace the below 3 line with whatever you want to do when the size change
fb.item.find('label').css('fontSize', value + 'px');
fb.item.find('.textInput').css('fontSize', value + 'px');
styles.fontSize = value;
//End

fb.target._updateSettings(fb.item);
});

On Wed, Mar 20, 2013 at 1:07 PM, srenivas Kumar <sreniva...@gmail.com> wrote:

On Tuesday, March 19, 2013 6:18:51 PM UTC+5:30, srenivas Kumar wrote:

I want to add a size property like, selecting the size of the text box (small, medium & large) how can i do that..?

[srenivas Kumar]

Hello Hemanth,

I followed the way you guided but it didn't work.... i can get the dropdown but its not mapping the size. please find the screen shot of the work,


Regards'
srenivas.

[srenivas Kumar]

Hello limcheekin

I have seen in some of your comments that you said ,no contribution from any developer, hope you can see this i developed this plugin for other field elements as well as section drag and drop ( which means you can drag and drop the whole section or form ) but i am stuck with adding additional properties, if you can provide some guidance that will be good to see. please find the screen shots of the work.

Regards,
srenivas

[kholoud hemmat]

Hello Kumar,

please check the attached solution. it contains a working copy after adding the text size new property. you will find the changes with //New comment in both widget.js and jquery.formbuilder.singlelinetext.js files

hope this will help you 

Regards, 

Kholoud

[srenivas Kumar]

Hello Hemmat

Thanks a lot for sharing the code, 1 method i was missing to code when i compared your code it works great. Now i am trying another property which is for drop down. when i select a drop down i need to add options to it from the field settings. I need to have text boxes in the settings and what ever entered in the text boxes should reflect in the dropdown options. I created a drop down widget which i can drag and drop, now i need to move further hope you will be support to me.

Regards,
srenivas 

[srenivas Kumar]

hello Hemmat,

For validations in the field settings next to required we have a drop down. which allows to choose numeric & alphanumeric, for this i written javascript codes and i need to append these functions on user selection. How can i do this ?  on selection of particular value (numeric) from the drop down, i need to append that particular javascript function to the singleline textbox. please find the files attached below.

[srenivas Kumar]

[srenivas Kumar]

Hello Hemmat,

hope you doing fine, can you look into this validation part please, i have attached related files. Waiting for your reply impatiently


Regards,
kumar

[kholoud hemmat]

Hello Kumar,

Check the attached file i added the validation. search for //Validation comment and replace it with whatever validation method you want to use 

Regards, 

Kholoud Hemmat

[srenivas Kumar]

Hello hemmat,

hope you doing fine, the code was very helpful for me thanks for your valuable time and interest. I started working on other properties How can i add drop down select list for drop down control, from the field settings.? how can i append that options in the field settings..?


Please find the attachment below.

Regards,
Kumar.