Skip to content

Multi-Column-Layout

Creation

Recommended constructor:

1
2
3
// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.DV;
var layout = dv.createLayout([6, 6]);

With title:

1
2
var dv = AppGiniHelper.DV;
var layout = dv.createLayout([6, 6], "My Title");

With title and different variation:

1
2
var dv = AppGiniHelper.DV;
var layout = dv.createLayout([6, 6], "My Title", Variation.warning);

Add fields to Layout-columns

1
2
3
AppGiniHelper.dv.createLayout([6, 6])
    .add(1, ["fieldname_1", "fieldname_2", ...])
    .add(2, ["fieldname_3", "fieldname_4", ...]);

Alignment of labels and controls

Due to Bootstraps 12-column grid-system there may be problems with alignment of labels and controls when using different layouts on the same page.

Parameters

  1. column index, starting at 1
  2. array (!) of fielnames

Note

Parameter 2 must be an array, not a string.

Deprecated constructor (do not use):

1
2
3
new AppGiniLayout([6, 6], "title", true | false)
    .add(1, ["fieldname_1", "fieldname_2", ...])
    .add(2, ["fieldname_3", "fieldname_4", ...]);

Please use dv.createLayout() instead.

Add Multi-Column-Layout to Custom tab

1
2
3
4
5
6
7
// create layout
var layout = dv.createLayout()
    .add(1, ["field1", "field2"])
    .add(2, ["field3", "field4"]);

// create tab, append layout
var tab = dv.addTab("tab1", "Caption 1", "icon", [layout]);

Note

When adding layout to a Custom Tab, title will not be rendered;

Mix Layout with fields in Custom Tab

1
2
3
4
5
6
7
// create layout
var layout = dv.createLayout()
    .add(1, ["field1", "field2"])
    .add(2, ["field3", "field4"]);

// create tab, append fields, layout, fields
var tab = dv.addTab("tab1", "Caption 1", "icon", ["field5", "field6", layout, "field7", "field8"]);

Note

When adding layout to a Custom Tab, title will not be rendered;

Example

1
2
3
4
// file: hooks/TABLENAME-dv.js
new AppGiniLayout([8, 4])
    .add(1, ["last_name", "first_name"])
    .add(2, ["image", "gender"]);

Creates a new row with two columns. Column #1 will have a width of 8 (which means 8/12 ~= 67%), and column #2 will have a width of 4 (which means 4/12 ~= 33%). Fields last_name and first_name will be inserted into column #1 Fields image and gender will be inserted into column #2

Alignment: background information

Bootstrap’s grid-system provides automatic width calculation for up to 12 columns on different devices. AppGini assigns width of 3/12 of the total column width to labels and 9/12 to controls. As long as you only have rows of the same width that aligns perfectly as you can see below:

UI design flaw

Now the library provides layout functions which allows you to split rows into columns of different widths. You can even mix different layouts per page. As as result there may be flaws with alignment as you can see in this example where we have create first row with width of [12], then second row with widths of [8, 4]:

1
2
3
4
5
6
7
8
9
// file: hooks/TABLENAME-dv.js
var row_1 = new AppGiniLayout([12])
    .add(1, ["#Patient", "last_name", "first_name"]);

var row_2 = new AppGiniLayout([8, 4])
    .add(1, ["#Anamnesis", "tobacco_usage", "alcohol_intake", "history"])
    .add(2, ["#Details")
    // ...
    ;
What’s happening here is that Bootstrap calculates the label width as 3/12 of the total width. If the total width changes, this means that 3/12 of the width changes, too: This means that all label- and control-widths have been calculated correctly, but from UI point of view there is need to optimize the alignment:

Solutions

Our library provides two solutions for these scenarios

Wrapping You can break label and input into two lines using the wrapLabels()-function: 

1
2
3
4
5
6
7
8
// file: hooks/TABLENAME-dv.js
new AppGiniLayout([12])
    .add(1, ["#Patient", "last_name", "first_name"])
    .wrapLabels();

new AppGiniLayout([8, 4])
    .add(1, ["#Anamnesis", "tobacco_usage", "alcohol_intake", "history"])
    .wrapLabels();
Now the labels and controls are all left aligned.

Warning

If you don't have any lookup field (dropdown), the wrapLabel() function may not work in Add New mode of detail views. If so, please add the following line to your TABLENAME-dv.js file: 

1
$j.ajax("ajax_check_login.php");

Sizing

And there is a second option which may result in better results in certain combinations – but not in all.

There is a sizeLabels()-function you can apply to all labels of a row. 

1
2
3
4
5
6
7
8
// file: hooks/TABLENAME-dv.js
new AppGiniLayout([12])
    .add(1, ["#Patient", "last_name", "first_name"])
    .sizeLabels(2); // <-- set label width to 2

new AppGiniLayout([8, 4])
    .add(1, ["#Anamnesis", "tobacco_usage", "alcohol_intake", "history"])
    .add(1, ["#History", "surgical_history"]);
The labels of first [12] row have the same width as the labels of the first column of the seconds row [8, 4

Attention

The sizeLabels() method will only work for column-widths of 4, 8 and 12 because in the 12-column grid only 3/12 of 4, 8 and 12 evaluates to integer values.

See also