Skip to content

Collapsible Panels

Group fields in panels The Javascript code for grouping fields is quite simple.

1
2
3
4
5
// file: hooks/patients-dv.js

var dv = AppGiniHelper.DV;
dv.addGroup("grp_history", "History", ["surgical_history",  "obstetric_history"]);
dv.addGroup("grp_more", "More", ["genetic_diseases",    "other_details"]);
Shorter code variant 
1
2
3
AppGiniHelper.DV
  .addGroup("grp_history", "History", ["surgical_history",  "obstetric_history"])
  .addGroup("grp_more", "More", ["genetic_diseases",    "other_details"]);

The status (expanded/collpased) will be stored automatically if your borwser supports “localstorage” (which most browsers do).

Syntax

1
addGroup("unique_name", "title", ["field1", "field2", "..."], Variation.default);

For unique name please use a-z, A-Z, 0-9, _ (underscore) or - (minus) only.

Danger

I strongly recommend NOT to use other special characters in unique_name variable.

Variations

Just pass one of the available Variation constants as 4th parameter: 

1
2
3
// file: hooks/patients-dv.js
var dv = AppGiniHelper.DV;
dv.addGroup("grp_history", "History", ["surgical_history", "obstetric_history"], Variation.primary);

See also

Groups in multi-column-layout

You can also place panels inside columns of multi-column-layouts. Therefore you will need the (unique) name of the group.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// file: hooks/patients-dv.js
var dv = AppGiniHelper.DV;
//...

// add group named "grp_history" 
dv.addGroup("grp_history", "History", ["surgical_history",  "obstetric_history"]);

// add group named "grp_more"
dv.addGroup("grp_more", "More", ["genetic_diseases",    "other_details"]);

// multi-column layout
var row_2 = new AppGiniLayout([8, 4]);
row_2.add(1, ["#Anamnesis", "tobacco_usage",    "alcohol_intake", "history"]);

// add both groups (identified by their names) to the column    #1
row_2.add(1, ["#More", "grp_history", "grp_more"]);
// ...

See also: