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.
Multiple colums detail view
Multiple colums detail view
- Attachments
-
- Appgini1.jpg (77.58 KiB) Viewed 7254 times
Re: Multiple colums detail view
Sure! You can use JQuery to create a row with two columns and move your fields around as you wish.
Jan
- 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.
Jan
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Multiple colums detail view
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>
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
Good morning,
that's a good start, but you have to separate HTML from JavaScript code. Please try with the following code:
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:
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...
into this 2-column layout
with just a few lines of JavaScript code:
If you are interestested please send an email to [email protected].
Kind regards,
Jan
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>
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:
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...
into this 2-column layout
with just a few lines of JavaScript code:
If you are interestested please send an email to [email protected].
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Multiple colums detail view
Hello Jan,
this looks very good!
I send you a mail about your plugin.
gr. Mustafa.
this looks very good!
I send you a mail about your plugin.
gr. Mustafa.
Re: Multiple colums detail view
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.
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 (113.17 KiB) Viewed 7006 times
Re: Multiple colums detail view
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:
Additionally the width of the tabs at the bottom of your page can be increased which also gives more space for data:
The compact() function has been documented here:
https://www.bizzworxx.de/en/appgini-hel ... s/compact/
Best,
Jan
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:
Additionally the width of the tabs at the bottom of your page can be increased which also gives more space for data:
The compact() function has been documented here:
https://www.bizzworxx.de/en/appgini-hel ... s/compact/
Best,
Jan
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Multiple colums detail view
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:
Compare with default look & feel
Once again the code will be easy to read and to understand even for non-programmers, I hope:
One more variation with addons only before and addons only after the inputs.
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
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:
Compare with default look & feel
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.
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
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools