Detail-View to the right of Table-View

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:

Detail-View to the right of Table-View

Post by jsetzer » 2018-11-06 09:29

Hi @all!

Usually I have my detail views on a separate page using the AppGini option "[X] Display detail view in a separate page". But sometimes data is easier to overview and to handle if you have details on the same page as the table view. By default details will be shown below the table.

But this time I wanted to have the details to the right of the table, not below. I did not find any built-in- or hook-solution for this. So I decided to try on my own.

And this is the result:
chrome_2018-11-06_10-07-12.png
chrome_2018-11-06_10-07-12.png (51.26 KiB) Viewed 6337 times

There are many changes starting with the 2-column-layout itself, changing the toolbar-buttons above the table, removing the text from the actionbar-buttons (save, back, ...), removing the header of the detail view, moving the (red) admin-button, remove panel-borders and -paddings and so on and so on.

This layout makes sense...
  • if you have at least a mid-size screen resolution (width >= 1024, the more, the better)
  • if the number of (visible) columns of the table view is not too big
On a smartphone or smaller display this layout does not make sense. I used the following trick to detect the screen-size.

Code: Select all

var is_xs = $j('.visible-xs').first().css('display') != 'none';
if (!is_xs) {
    // ...
}

Everything you see here has been done with JQuery. Changes will not be overwritten on next generation.

I hope you like it and it gives you a starting point.

Regards,
Jan

PS: See more AppGini UI-Improvements here:
https://www.bizzworxx.de/en/appgini-improvements/
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
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Detail-View to the right of Table-View

Post by ronwill » 2018-11-15 00:28

Hi Jan,

Isn't this similar to the included option in AppGini?

I have split table / detailed form on same page/screen view on a number of projects by selecting Template Option (under table view settings), then in pop up window, selecting Advanced and you can select how to show table/detail view classes there (i.e. half width table / half width form) or am I missing something different here?


Cheers, Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

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

Re: Detail-View to the right of Table-View

Post by jsetzer » 2018-11-15 06:24

Hi Ron,

you are totally right concerning the half-half-layout, thank you for pointing that out!

Beside the 50/50-layout, there are a couple more changes which I have marked in the screenshot below.
  • Upper half: screenshot of table view WITH MODIFICATIONS
  • Lower half: screenshot of the default half-half layout without further changes
tv-dv-diff-2.png
tv-dv-diff-2.png (229.11 KiB) Viewed 6246 times
  1. removed text from buttons
  2. moved column-toggle-button to the table (left hand side)
  3. moved and equal-sized admin-button
  4. moved details-buttons
  5. removed panel-title and panel-borders but kept the panel paddings
  6. removed text from action buttons.
In the beginning I only wanted to remove the button texts and keep the icons, because the button-texts are being cut even in a 1200px screen resolution.

All the magic is beging done in my Helper class. So in TABLENAME-dv.js I only have this one line on document ready:

Code: Select all

AppGiniHelper.tableview.layout([7, 5]);
I'm passing in an array of column widths, which can be [6, 6], [7, 5], [8, 4] or whatever fits best. For me this is quite flexible and I don't have to change, re-generate and re-publish the project.


Once again thank you, Ron, for taking the time and pointing out the advanced layout possibilities!

Kind 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
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Detail-View to the right of Table-View

Post by ronwill » 2018-11-17 16:18

Love what you have done with it, I'm always very keen in trying to make things visually better for the user and clearer/cleaner so I admire your work (BTW was impressed with your website, solutions show thereon).

Thanks again for all your contributions, they are very helpful and appreciated (even if a bit above and beyond us non programmers lol).


Just noticed you are in Kiel - I'm based mostly in UK, Cheltenham but my mothers extended family side (she's from Berlin) are all living in Kiel it's a small world!


Just a small question, wish list:

1. Have you ever had need of adding an admin editable html text area onto the front main AG home page? It's something I would like to have but don't know where to start with that or how to do it!

2. Is there an easy way to have the Navbar menu's (guest/anonymous users permitted access levels) appear on the starting home page when it's first loaded. At present users need to either go to log in or select a page menu table/panel first before the navbar menu appears (can be confusing for some). I think it would be better (for traditional menu users) to be able also to go straight to a normal navbar menu in 1 click not 2 - hope that makes sense?

Any help, guidance much appreciated

Cheers,
Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

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

Re: Detail-View to the right of Table-View

Post by jsetzer » 2018-11-19 12:54

Dear Ron,

first of all thanks a lot for your friendly words about my work and constributions. It feels good when people see and value my work!

Whenever you are planning to see your mothers family in Kiel, feel free to contact me so that we can meet for knowledge exchange or just for a beer (or coffee)!

Concerning your wishlist:

1) I have done lots of changes on homepage, but never needed a form or input fields there. But this is my idea:
There is no hook for home-page, as far as I know. We can only use header-extras.php or footer-extras.php for this, I guess. Unfortunately every change there will be applied to all pages. To change homepage only, you will first have to detect if you are on homepage or not. Only then, embed the html area (nicEdit is already beeing shipped with AppGini or use any other richtext-editor). Use a form or AJAX for submitting the contents to your server. You will need an additional php file on server side for receiving and storing the submitted data.

2) I would like to have the navBar on homepage, too. Please open incCommon.php and goto line 543. There it says that the navbar shall be rendered if not homepage. You can change that behaviour by removing the condition (delete lines 543 and 545). But changes would be overwritten next time you generate. From my point of view (@Ahmad) it would be great to have a checkbox in AppGini project settings like [x] Show menubar on homepage.

I hope this gives you a good starting point. Feel free to contact me via PM or Email!

Kind Regards and viele Grüße auch an Deine Mutter und deren Familie in Kiel!
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
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Detail-View to the right of Table-View

Post by ronwill » 2018-11-19 15:07

Thanks Jan,

I've followed your guidance and now have the navbar showing on the home screen. I'm not worried about it being overwritten as I keep all files I amend in a separate folder (1 for files, 1 for templates) every time I upload I just follow-up by then uploading all my amended files to re-set them! Not ideal as obviously I have to be sure any changes are still ok so I do a file compare on key changed files, anyway that works for me.

Concerning the text area for home page (would be nice to have a hooks file for this!) the reasoning is I have a client who would like to put up messages randomly on the home page (seasonal greetings, check this out type notes etc.) so just after something easy to do!

I may well be in your area next year for a family get together so definitely will take you up on the beer! I'd better do it soon before ant BREXIT travel restrictions kick in LOL!!!


Viele Grüße
Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

pasbonte
Veteran Member
Posts: 162
Joined: 2013-02-06 09:49

Re: Detail-View to the right of Table-View

Post by pasbonte » 2018-11-28 08:36

hello

"Hi Jan,

Isn't this similar to the included option in AppGini?

I have split table / detailed form on same page/screen view on a number of projects by selecting Template Option (under table view settings), then in pop up window, selecting Advanced and you can select how to show table/detail view classes there (i.e. half width table / half width form) or am I missing something different here?"


I do not see how to do that, you find or this possibility?
thank you

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

Re: Detail-View to the right of Table-View

Post by jsetzer » 2018-11-28 08:43

Hi Pascal,

have a look here:
2018-11-28_09-41-19.gif
2018-11-28_09-41-19.gif (168.97 KiB) Viewed 6065 times
I hope this helps.

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

pasbonte
Veteran Member
Posts: 162
Joined: 2013-02-06 09:49

Re: Detail-View to the right of Table-View

Post by pasbonte » 2018-11-28 10:07

MERCI !!!!

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

Re: Detail-View to the right of Table-View

Post by jsetzer » 2018-11-28 10:09

You are welcome!
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

Post Reply