Using custom tabs allows you to group and organize fields by moving them into tab pages. Learn how to move remaining fields above the newly created tabs.

By design the custom tabs will be placed at the top of the detail view. Remaining fields will stay at ther original position below the newly created tabstrip.

If you want remaining fields to be placed above the tabstrip, you can use the following line of javascript code which moves the tab below the remaining fields.

// file: hooks/TABLENAME-dv.js
$j("#appginihelper-detailview-tabs").prepend("<hr/>").appendTo($j("fieldset"));

If you don’t want the additional separator line above the tabstrip but only a small gap, try this:

$j("#appginihelper-detailview-tabs").prepend("<p/>").appendTo($j("fieldset"));

Another short article about using the (BETA) onChange handler for reacting to radio button selection changes with minimum code.

This is just for demonstration purposes.

There is an options list, not required, with options a, b and c.

• If a is selected, show field 1
• if b is selected, show field 2
• if c is selected,show both fields
• if none of them is selected, hide both fields.

Result

Prerequisites

Model your field as an options list with radio-buttons display option:

Code

new AppGiniDetailView().ready(onReady);

function onReady() {
    new AppGiniField("test").onChange(onTestChanged);    
}

function onTestChanged(value) {
    console.log("test changed: "  + value);
    new AppGiniField("injured_first_name").show(value=='a' || value=='c');
    new AppGiniField("injured_last_name").show(value=='b' || value=='c');
}

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 already available in current version.

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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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);
}

That’s it. If you like it, follow me on twitter and/or spread the word 😉