Multiple colums detail view

Wish to see a specific feature/change in future releases? Feel free to post it here, and if it gets enough "likes", we'd definitely include it in future releases!
Post Reply
mekin
Posts: 14
Joined: 2019-04-22 17:09

Multiple colums detail view

Post by mekin » 2019-09-04 16:05

Hello, is there a way to show the fields in detailview in 2 columns?
I attached a screenshot, the 2 red squares would be where the data could be shown.

Now I have a table with like 20 fields and actually these are 10 yes/no fields with each his own comment-field.
So it would be nice show in the left column the yes/no field and in the right column the commend-field.
Attachments
Appgini1.jpg
Appgini1.jpg (77.58 KiB) Viewed 374 times

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

Re: Multiple colums detail view

Post by jsetzer » 2019-09-04 16:20

Sure! You can use JQuery to create a row with two columns and move your fields around as you wish.
  • create your TABLENAME-dv.js file
  • create a <div class="row"></div>
  • inside that div create two columns like <div id="left" class="col-md-6"></div><div id="right" class="col-md-6"></div>
  • now after everything has been loaded move your fields like so: $j("#myField").closest(".form-group").appendTo("#left");
  • that's it. Repeat if for every field.
Best,
Jan

mekin
Posts: 14
Joined: 2019-04-22 17:09

Re: Multiple colums detail view

Post by mekin » 2019-09-05 06:33

Hello Jan,

thanks for the tip! With that I found these websites:
https://www.w3schools.com/bootstrap/boo ... system.asp
https://bigprof.com/appgini/help/advanc ... agic-files

But I have a few questions, so if you help me on the way a little bit, it would be great.

What value must I set for "#myField" in de script.
Do you have an example/startup for me?

Table: audit
Fields: id, status, quest1, quest1info, quest2, quest2info, etc.

Now I have the following:

<div class="container">
<div class="row">
<div id="left" class="col-md-6">$j("#myField").closest(".form-group").appendTo("#left");</div>
<<div id="right" class="col-md-6"></div>
</div>
</div>

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

Re: Multiple colums detail view

Post by jsetzer » 2019-09-05 07:36

Good morning,

that's a good start, but you have to separate HTML from JavaScript code. Please try with the following code:

Code: Select all

<div class="container">
<div class="row">
<div id="left" class="col-md-6"></div>
<<div id="right" class="col-md-6"></div>
</div>
</div>
<script>
$j(function(){
  $j("#myField").closest(".form-group").appendTo("#left");
});
</script>
Just in case you are interested:
I'm offering a JavaScript library containing many functions for UI changes at a low price. With that lib included you can get a two-column-layout and move fields to left or right column using the following code for example:

chrome_2019-09-05_09-14-04.png
chrome_2019-09-05_09-14-04.png (3.95 KiB) Viewed 354 times

This is quite flexible as you can modify columns and widths and even change the order of the fields without re-generating the app itself.

To give you an example from AppGini's Online Clinic Management System (OCMS), the patient's detail view can be turned from this default layout...

2019-09-05_09-28-10.png
2019-09-05_09-28-10.png (124.69 KiB) Viewed 354 times

into this 2-column layout

2019-09-05_09-24-39.png
2019-09-05_09-24-39.png (150.17 KiB) Viewed 354 times

with just a few lines of JavaScript code:

Code_2019-09-05_09-31-31.png
Code_2019-09-05_09-31-31.png (52.84 KiB) Viewed 354 times

If you are interestested please send an email to appgini@bizzworxx.de.

Kind regards,
Jan

mekin
Posts: 14
Joined: 2019-04-22 17:09

Re: Multiple colums detail view

Post by mekin » 2019-09-05 10:01

Hello Jan,

this looks very good!

I send you a mail about your plugin.

gr. Mustafa.

mekin
Posts: 14
Joined: 2019-04-22 17:09

Re: Multiple colums detail view

Post by mekin » 2019-09-10 11:35

I want to give a compliment to the AppGini-library that Jan made :D

It makes it very easy to make multiple columns and play with labels.
If needed you can add extra buttons, in different colors.

Below a screenshot how my webapp is now, after the function-library of Jan from BizzWorxx.
Great work and thanks for the adjustments/improvements for my case.
Attachments
Appgini2.jpg
Appgini2.jpg (113.17 KiB) Viewed 126 times

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

Re: Multiple colums detail view

Post by jsetzer » 2019-09-12 05:59

Thank you @mekin, that looks nice and structured!

Sometimes there is need for as much space as possible. With latest version of the lib you can reduce the buttons' width (right hand side) to get more space for your data with only one line of code:

POWERPNT_2019-09-11_07-21-12.png
POWERPNT_2019-09-11_07-21-12.png (132.07 KiB) Viewed 94 times

Additionally the width of the tabs at the bottom of your page can be increased which also gives more space for data:

2019-09-11_07-21-34.png
2019-09-11_07-21-34.png (143.42 KiB) Viewed 94 times

The compact() function has been documented here:
https://www.bizzworxx.de/en/appgini-hel ... s/compact/

Best,
Jan

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

Re: Multiple colums detail view

Post by jsetzer » 2019-09-15 17:32

Good evening AppGineers!

There will be a new version of our AppGini Helper JavaScript Library this month with some nice new features for input fields and readonly-fields (static fields):

You will be able to add (Glyph-) icons and/or text before and/or after and input-fields. Have a look here:

2019-09-15_18-57-51.png
2019-09-15_18-57-51.png (3.86 KiB) Viewed 39 times

Compare with default look & feel

ezgif.com-add-text.gif
ezgif.com-add-text.gif (122.18 KiB) Viewed 39 times

Once again the code will be easy to read and to understand even for non-programmers, I hope:

Code: Select all

new AppGiniField("age").prepend("~").append(" years");
new AppGiniField("weight").prependIcon("download-alt").append("kg");
new AppGiniField("height").prependIcon("resize-vertical").append("cm");

One more variation with addons only before and addons only after the inputs.

2019-09-15_19-18-01.png
2019-09-15_19-18-01.png (4.26 KiB) Viewed 39 times

From my point of view this functionality may help your users filling your forms. Hope you like it!

Kind regards,
Jan

PS: Glyphicon overview: https://glyphicons.bootstrapcheatsheets.com

Post Reply