I have been asked a couple of times how to react to lookup selection changes and hide certain fields depending on the selection. Here is how I did it in a customer project.
Please note that I am using the new fade
-function which will be available from April 2020 version on. You can easily replace .fade
by .hide
which is available in older versions, too.
Table of Contents
Final Result
By default there is only one field type_id
visible. Depending on the selection, I am hiding/showing certain other fields.
Prerequisites
The field type_id
of table entries
has been modeled as lookup:
Full javascript code
// file: entries-dv.js var dv = AppGiniHelper.DV; dv.ready(onReady); function onReady() { type_id_init(); } function type_id_init() { var fieldname = "type_id"; var field = new AppGiniField(fieldname); var currentvalue = field.getValue(); // initially hide/show fields depending on current value hideOrShowFields(currentvalue); // register onChangeHandler (listener) field.onChange(onTypeIdChanged); } function onTypeIdChanged(value) { hideOrShowFields(value); } function hideOrShowFields(value) { // will be true if id of selected value = 1 var option_1_is_selected = value?.id == 1; // will be true if id of selected value = 2 var option_2_is_selected = value?.id == 2; // fade in common fields new AppGiniFields("injured_first_name,injured_last_name,date_dummy,timeslot_id") .fade(option_1_is_selected || option_2_is_selected); // fade in fields of option 1 new AppGiniFields("place_id,injury_types,injury_other,description,...more...") .fade(option_1_is_selected); // fade in fields for option 2 new AppGiniField("subtype_id") .fade(option_2_is_selected); }
Explanation
// file: entries-dv.js var dv = AppGiniHelper.DV; dv.ready(onReady); function onReady() { type_id_init(); }
Line 3
Get a variable dv
for handling DetailView changes.
Line 4
As soon as the page has been loaded completely (including lazy loaded lookups), call the function onReady
.
function type_id_init() { var fieldname = "type_id"; var field = new AppGiniField(fieldname); var currentvalue = field.getValue(); // initially hide/show fields depending on current value hideOrShowFields(currentvalue); // register onChangeHandler (listener) field.onChange(onTypeIdChanged); } function onTypeIdChanged(value) { hideOrShowFields(value); }
Line 4
Get a variable field
for handling the field named type_id
.
Line 5
Get the current value of field type_id
. The value can be null
or any of the available primary keys of the related lookup-master table.
Line 8
Call the function hideOrShowFields
and pass the currently selected value. This initially hides or shows fields depending on the default value.
Line 11
Register a change handler (callback function). Whenever the selected value of the lookup field type_id
changes, call the function onTypeIdChanged
and automatically pass in the currently selected value.
Lines 14ff
If this function is being called, it will call the function hideOrShowFields
and pass over the value
it got from the change handler.
function hideOrShowFields(value) { // will be true if id of selected value = 1 var option_1_is_selected = value?.id == 1; // will be true if id of selected value = 2 var option_2_is_selected = value?.id == 2; // fade in common fields new AppGiniFields("injured_first_name,injured_last_name,date_dummy,timeslot_id") .fade(option_1_is_selected || option_2_is_selected); // fade in fields of option 1 new AppGiniFields("place_id,injury_types,injury_other,description,...more...") .fade(option_1_is_selected); // fade in fields for option 2 new AppGiniField("subtype_id") .fade(option_2_is_selected); }
Finally, this is our function which hides or shows fields depending on the value
argument.
Please remember: value
can be null
if nothing was selected in the dropdown.
Line 3value?.id
returns null
or the primary of the selected record, if any. If this equals 1
, the variable will be true
.
Line 7
Get an object of type AppGiniFields
as a handler for those passed-in fields.
Line 8
Execute the fade
function on the fields handler. Please note that fade
will be available from April 2020 on. You can also use the hide
function. Passing true
will fade in, passing false
will fade out the fields.
That's it. If you like it, follow me on twitter and/or spread the word 😉