Show/Hide fields depending on Lookup

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

Show/Hide fields depending on Lookup

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

Hi,

I have an events-table with a couple of date/time fields:
AppGini_2018-07-24_19-30-52.png
AppGini_2018-07-24_19-30-52.png (5.48 KiB) Viewed 8095 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
chrome_2018-07-24_19-32-37.png (6.51 KiB) Viewed 8095 times

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

...when selecting eventtype "Mehrtätiges Ereignis mit Uhrzeiten" I need two dates with times ...
chrome_2018-07-24_19-36-20.png
chrome_2018-07-24_19-36-20.png (10.93 KiB) Viewed 8095 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();
        updateFields(id);
    });
    
    // ... there is more here
    
    // load eventtype by id using ajax with josn response
    $j.getJSON('hooks/eventtypes.api.php?id=' + id, function (data) {

        console.log(data);

        // ...
        
        // hide/show fields
        new AppGiniField('date_from')
            .visible(data.show_date_from)
            .label(data.show_date_from && data.show_date_till, 'Datum (von)', 'Datum')
            ;
        new AppGiniField('time_from')
            .visible(data.show_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
chrome_2018-07-24_20-06-12.png (9.3 KiB) Viewed 8095 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
a.gneady
Site Admin
Posts: 1280
Joined: 2012-09-27 14:46
Contact:

Re: Show/Hide fields depending on Lookup

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

Awesome! Thanks for sharing :)
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1806
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Show/Hide fields depending on Lookup

Post by jsetzer » 2018-10-14 10:08

See also: Styling the default AppGini-Checkboxes
https://forums.appgini.com/phpbb/viewto ... f=4&t=2817
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Alisson
Veteran Member
Posts: 81
Joined: 2017-02-25 20:32

Re: Show/Hide fields depending on Lookup

Post by Alisson » 2018-11-12 18:11

This is what I been looking for, would you mind to share more info about this,like the content of the file "eventtypes.api.php"
and the code you use where is says ... there is more here.

Thank you.

xbox2007
Veteran Member
Posts: 129
Joined: 2016-12-16 16:49

Re: Show/Hide fields depending on Lookup

Post by xbox2007 » 2018-11-16 22:38

Thanks for sharing

will add this code inside tablename-dv.js

about this file ( eventtypes.api.php ) we should create and what code inside .

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1806
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Show/Hide fields depending on Lookup

Post by jsetzer » 2018-11-16 23:18

Recently I got a couple of requests for publishing code or for sending complete solutions. I'm sorry and I hope for your understanding that I cannot publish complete files due to complexity of includes (included libraries) and due to legal issues. To give you an example: my included JavaScript codefile contains more than 1600 lines of code providing dozens of UI-functions. And there are another 12 php files + included libraries full of helping functions for workflow, email processing, logging, html-generation and pdf creation.

The good thing is: To hide/show fields you do not need the content of eventtypes.api.php.

All you need is:
  • a server-side php file returning json for every field you need to hide/show.
  • Reading data from mysql using AppGini's sqlValue() or sql() function has been described in the forum and help files
  • To return database values as json: Search the php manual for "json_encode" function
  • Hiding fields has been described somewhere here in the forum. Try $j('#fieldname').closest('.form-group').hide();
Hope this will help you to solve the problem.

Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
rngoda
Veteran Member
Posts: 124
Joined: 2020-02-05 16:00
Location: KENYA
Contact:

Re: Show/Hide fields depending on Lookup

Post by rngoda » 2022-05-12 12:46

Thank you for this, really saved my day !!
I'm a software engineer specializing in web database application development for complex scalable web apps.

Buy AdminLTE Plugin For Appgini: HERE
Buy Cloud Storage Plugin For Appgini HERE

Checkout AdminLTE Plugin For Appgini Tutorials On Youtube

For support Email: [email protected] Whatsappp: Me Here

User avatar
RonP
Veteran Member
Posts: 219
Joined: 2013-08-27 13:36
Location: Heiloo, The Netherlands
Contact:

Re: Show/Hide fields depending on Lookup

Post by RonP » 2022-06-02 08:13

Hi,
This is exactly what I like to have aswel, Pbottcher you where very proactive with this solution in 2018 :D .
However, as I’m not a programmer It feels difficult for me to place the right statements in the right files.
Is there, in the meantime in developping AppGini, not a more friendly function come in place for this solution?
Ron

User avatar
RonP
Veteran Member
Posts: 219
Joined: 2013-08-27 13:36
Location: Heiloo, The Netherlands
Contact:

Re: Show/Hide fields depending on Lookup

Post by RonP » 2022-06-20 13:18

Hi,
I've tried to get the solution, given by jsetzer, to work out.... However the application doesn't start after that.
So I'm a nitwit and reach out for some help
Thanks in advance
Ron

User avatar
RonP
Veteran Member
Posts: 219
Joined: 2013-08-27 13:36
Location: Heiloo, The Netherlands
Contact:

Re: Show/Hide fields depending on Lookup

Post by RonP » 2022-07-09 12:55

Hi,
Anyone how can help me out with this subject?
I don't know enough about coding
Thank you in advance
Ron

Post Reply