since 2019/10
Group fields in panels
The Javascript code for grouping fields is quite simple.
// file: hooks/patients-dv.js
var dv = new AppGiniDetailView();
dv.addGroup("grp_history", "History", ["surgical_history", "obstetric_history"]);
dv.addGroup("grp_more", "More", ["genetic_diseases", "other_details"]);Shorter code variant
// file: hooks/patients-dv.js
new AppGiniDetailView()
.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
addGroup("unique_name", "title", ["field1", "field2", "..."], Variation.default);
Variations
Just pass one of the available Variation constants as 4th parameter:
dv.addGroup("grp_history", "History", ["surgical_history", "obstetric_history"], Variation.primary);- Variation.default
- Variation.info
- Variation.primary
- Variation.success
- Variation.warning
- Variation.danger
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.
// file: hooks/patients-dv.js
var dv = new AppGiniDetailView();
//...
// 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"]);
// ...
