Expandable/Collapsible panels in detail view

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"]);
// ...
Social media & sharing icons powered by UltimatelySocial