Tabs

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