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
chrome_2019-09-05_09-14-04.png (3.95 KiB) Viewed 7137 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 7137 times

into this 2-column layout

2019-09-05_09-24-39.png
2019-09-05_09-24-39.png (150.17 KiB) Viewed 7137 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 7137 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 :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.

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
POWERPNT_2019-09-11_07-21-12.png (132.07 KiB) Viewed 6877 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 6877 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
2019-09-15_18-57-51.png (3.86 KiB) Viewed 6822 times

Compare with default look & feel

ezgif.com-add-text.gif
ezgif.com-add-text.gif (122.18 KiB) Viewed 6822 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 6822 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