Show/Hide fields depending on Lookup

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
Posts: 20
Joined: 2018-07-06 06:03
Location: Kiel, Germany

Show/Hide fields depending on Lookup

Post by jsetzer » 2018-07-24 18:07


I have an events-table with a couple of date/time fields:
AppGini_2018-07-24_19-30-52.png (5.48 KiB) Viewed 195 times

Depending on the value of eventtype_id, which is a dropdown, I wanted to hide certain fields, for example...

...when selecting eventtype "Antragstellung" (Date of application) I only need one date...
chrome_2018-07-24_19-32-37.png (6.51 KiB) Viewed 195 times

...when selecting eventtype "Mehrtätiges Ereignis ohne Uhrzeiten" I need two dates but no times ...
chrome_2018-07-24_19-35-28.png (8.97 KiB) Viewed 195 times

...when selecting eventtype "Mehrtätiges Ereignis mit Uhrzeiten" I need two dates with times ...
chrome_2018-07-24_19-36-20.png (10.93 KiB) Viewed 195 times

As you can see the visibility of certain fields changes.

This is mainly done by listening to the change event of the dropdown, getting the id of the selected dropdown-item, pulling some JSON data from the server via ajax and finally hiding fields according to the JSON data.

I'm not only hiding fields, I'm also changing labels:

2nd screenshot "date_from"-label = "Datum"
3rd screenshot "date_from"-label = "Datum (von)"

This is the same field "date_from" in the database.

This is part of events-dv.js:

Code: Select all

    // on change of eventtype_id: update fields
    $j('#eventtype_id-container').change(function () {
        var id = $j(this).val();
    // ... there is more here
    // load eventtype by id using ajax with josn response
    $j.getJSON('hooks/eventtypes.api.php?id=' + id, function (data) {


        // ...
        // hide/show fields
        new AppGiniField('date_from')
            .label(data.show_date_from && data.show_date_till, 'Datum (von)', 'Datum')
        new AppGiniField('time_from')
            .label(data.show_time_from && data.show_time_till, 'Uhrzeit (von)', 'Uhrzeit')
        new AppGiniField('date_till').visible(data.show_date_till);
        new AppGiniField('time_till').visible(data.show_time_till);
        new AppGiniField('custom').visible(data.show_custom);

I have a separate eventtypes table which allows customers to customize the diffent lookup values and the visibility of fields like so:
chrome_2018-07-24_20-06-12.png (9.3 KiB) Viewed 195 times

User avatar
Site Admin
Posts: 883
Joined: 2012-09-27 14:46

Re: Show/Hide fields depending on Lookup

Post by a.gneady » 2018-08-08 13:01

Awesome! Thanks for sharing :)
AppGini: Responsive, collaborative web db apps in minutes.
:idea: Learn all the tips and tricks of customizing AppGini apps through our online course.

Post Reply