React to lookup changes

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.

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 3
value?.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 😉

Do you like it?