Page 1 of 1
Multiple colums detail view
Posted: 2019-09-04 16:05
by mekin
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.
Re: Multiple colums detail view
Posted: 2019-09-04 16:20
by jsetzer
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
Re: Multiple colums detail view
Posted: 2019-09-05 06:33
by mekin
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>
Re: Multiple colums detail view
Posted: 2019-09-05 07:36
by jsetzer
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 (3.95 KiB) Viewed 7293 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 (124.69 KiB) Viewed 7293 times
into this 2-column layout
- 2019-09-05_09-24-39.png (150.17 KiB) Viewed 7293 times
with just a few lines of JavaScript code:
- Code_2019-09-05_09-31-31.png (52.84 KiB) Viewed 7293 times
If you are interestested please send an email to
[email protected].
Kind regards,
Jan
Re: Multiple colums detail view
Posted: 2019-09-05 10:01
by mekin
Hello Jan,
this looks very good!
I send you a mail about your plugin.
gr. Mustafa.
Re: Multiple colums detail view
Posted: 2019-09-10 11:35
by mekin
I want to give a compliment to the AppGini-library that Jan made
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.
Re: Multiple colums detail view
Posted: 2019-09-12 05:59
by jsetzer
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 (132.07 KiB) Viewed 7033 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 (143.42 KiB) Viewed 7033 times
The compact() function has been documented here:
https://www.bizzworxx.de/en/appgini-hel ... s/compact/
Best,
Jan
Re: Multiple colums detail view
Posted: 2019-09-15 17:32
by jsetzer
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 (3.86 KiB) Viewed 6978 times
Compare with default look & feel
- ezgif.com-add-text.gif (122.18 KiB) Viewed 6978 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 (4.26 KiB) Viewed 6978 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