Tabs

New since 2020/04: setPosition function for tabs. By default, the tabs will be inserted above remaining fields. Now you can decide if you want to display tabs above or below remainig fields. See chapter "SetPosition" at the bottom of this page.

Create custom tabs and move fields inside:

Syntax

// file: hooks/TABLENAME-dv.js

// get an instance of AppGiniDetailView
var dv = new AppGiniDetailView();

// create tab
var tab = dv.addTab( "name", "title", "icon" );

// add single field:
tab.add( "field1" );

// add multiple fields (array of fieldnames):
tab.add( ["field1", "field2", "field3"] );

// add a complete layout row:
// create a layout-row (widths: 8/12 + 4/12), add some fields to columns 1 and 2
var row = dv.addLayout([8, 4])
    .add(1, ["title", "date", "time"])
    .add(2, ["status"]);

// now add insert the whole row into the tab-panel
tab.add( row );

Examples

New Tab with fields

Create a tab named "meta-tab" with title "Metadata" and Glyphicon "glyphicon-cog":

// file: hooks/events-dv.js

var dv = new AppGiniDetailView();
var tab = dv.addTab( "meta-tab", "Metadata", "cog" );
  .add("created_by")
  .add(["modified_by", "modified_on"]);

New Tab with multi-column layout

Step 1: Create a multi-column layout row with 8/12 + 4/12 and add some fields

// file: hooks/events-dv.js
var dv = new AppGiniDetailView();

 var row_2 = dv.addLayout([8, 4])
     .add(1, ["title", "date", "time"])
     .add(2, ["status"]);

Step 2: Move that row into a newly created tab

// ...
dv.addTab("appointment-tab", "Appointment", "calendar")
  .add(row_2);

Complete code

// file: hooks/events-dv.js
var dv = new AppGiniDetailView().compact();

var row_1 = dv.addLayout([12])
    .add(1, ["name_patient"])
    .sizeLabels(2);

var row_2 = dv.addLayout([8, 4])
    .add(1, ["title", "date", "time"])
    .add(2, ["status"]);

var row_3 = new AppGiniLayout([12])
    .add(1, ["prescription", "diagnosis", "comments"])
    .sizeLabels(2);

dv.addTab("appointment-tab", "Appointment", "calendar")
    .add(row_1)
    .add(row_2);

dv.addTab("details-tab", "Details", "search")
    .add(row_3);

dv.addTab("meta-tab", "Metadata", "cog")
    .add(["created_by", "modified_by", "modified_on"]);

Another example from patients-dv.js

SetPosition

Be default, tabs will be inserted above existing fields. If you do not add all fields to tabs, there will be fields remaining below the tabs. With the new setPosition function you can switch positions.

Default

var dv = new AppGiniDetailView();
dv.addTab("tabGeneral", "Allgemein", "pencil", ["type_id","name", "description"]);
dv.addTab("tabCalculation", "Abrechnung", "euro", ["rate", "type_rate"]);

Move tabs below remaining fields

dv.getTabs().setPosition(TabPosition.Bottom);

Syntax

var position = TabPosition.Bottom;
// or
// var position = TabPosition.Top;

new AppGiniDetailView()
  .getTabs()
    .setPosition( position );

Tip: Need some extra space?

(1) Insert an empty paragraph

dv.getTabs().setPosition(TabPosition.Bottom);
dv.getField("position").insertBelow().p();

or (2) Insert a divider line

dv.getTabs().setPosition(TabPosition.Bottom);
dv.getField("position").insertBelow().hr();

Was this helpful?