[JS] setReadOnlyFields() Function to enable/disable fields

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

[JS] setReadOnlyFields() Function to enable/disable fields

Post by DevGiu » 2016-10-12 09:29

Well, I think this function is growing and deserves his own thread.

This function expects 2 parameters.
First, an array of fields. Second, a boolean value that represent if you want readonly or not. For lookup and/or date fields, buttons are hided.

The function

Code: Select all

function setReadOnlyFields(array_field_selector, state){
		var arrayLength = array_field_selector.length;
		style = state ? 'cursor: not-allowed; background-color: #EEE;' : '';
		for (var i = 0; i < arrayLength; i++) {
			var $field = $j('#'+array_field_selector[i]);
			if ($j('#'+array_field_selector[i]+'-container').length != 0) {
				// It's a dropdown field
				$j('#'+array_field_selector[i]+'-container').select2('enable', !state);
				$j('#'+array_field_selector[i]+'-container').parent().find('button').toggle();
			} else if ($j('#'+array_field_selector[i]).parents('.form-group').find('.date_combo').length) {
				// It's a date field
				$j('#'+array_field_selector[i]).parents('.form-group').find('.date_combo').find('select').each(function(){
						$j(this).prop('readonly', state);
						$j(this).prop('tabIndex', state ? -1 : 0);
						$j(this).prop('style', style);
						if (state) $j(this).mousedown(function(){return false;});
						else $j(this).off( "mousedown" );
				});
				$j('#'+array_field_selector[i]).parents('.form-group').find('button').toggle();
			} else {
				$j('#'+array_field_selector[i]).prop('readonly', state);
				$j('#'+array_field_selector[i]).prop('style', style);
				if (state) {
					$j('#'+array_field_selector[i]).prop('tabIndex', -1);
					$j('#'+array_field_selector[i]).mousedown(function(){
																																return false;
																															});
				} else {
					$j('#'+array_field_selector[i]).prop('tabIndex', 0);
					$j('#'+array_field_selector[i]).off( "mousedown");
				}
			}
		}
}
How to use it
FIrst, add declaration of this function somewhere (remember this is JS). I have my own api.js with common functions.
Now, you can call this function when needed. Simple example.

tablename-dv.js magic file

Code: Select all

$j(function(){
	var myfields = ["field1", "field2"];
	$j('#field3').on('change', function(){
		setReadOnlyFields(myfields, false);
	});
	
	setReadOnlyFields(myfields, true);

});
Once your detail view is loaded, field1 and field2 will be "disabled". When field3 is changed, field1 and 2 will be enabled.
Function is tested with date, lookups and text fields.
/Giuseppe
Professional Outsourcing Services

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [JS] setReadOnlyFields() Function to enable/disable fields

Post by DevGiu » 2016-10-12 09:56

Here a GIF showing it working
/Giuseppe
Professional Outsourcing Services

Post Reply