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"]); // ...