Align Fields in Detail View

[jsetzer]

I have summarized here, in which way you can place fields in Detail View next to each other:

I. Multi-Column-Layout

Code: Select all

// file: hooks/TABLENAME-dv.js
var layout1 = AppGiniHelper.DV.createLayout([7, 5])
    .add(1, ['created_on', 'created_by'])
    .add(2, ['modified_on', 'modified_by']);

chrome_3JDvXz9vNC.png (4.12 KiB) Viewed 2345 times

---
II. Inline
With default caption, taken from first given field:

Code: Select all

// file: hooks/TABLENAME-dv.js
AppGiniHelper.DV.getFields(["created_on", "created_by"]).inline();
AppGiniHelper.DV.getFields(["modified_on", "modified_by"]).inline();

chrome_JWPs6wJxjI.png (3.33 KiB) Viewed 2345 times

---
III. Inline / custom caption
With custom caption, given in first parameter:

Code: Select all

// file: hooks/TABLENAME-dv.js
AppGiniHelper.DV.getFields(["created_on", "created_by"]).inline("Created on/by");
AppGiniHelper.DV.getFields(["modified_on", "modified_by"]).inline("Last modified on/by");

chrome_iDRQ5j7CEF.png (3.92 KiB) Viewed 2345 times

---
IV. Inline / custom caption & custom width
With custom caption, given in first parameter and widths-array in second:

Code: Select all

// file: hooks/TABLENAME-dv.js
AppGiniHelper.DV.getFields(["created_on", "created_by"]).inline("Created on/by", [3, 9]);
AppGiniHelper.DV.getFields(["modified_on", "modified_by"]).inline("Last modified on/by", [3, 9]);

chrome_6Yu4Ar7CBR.png (4.15 KiB) Viewed 2345 times

---
V. Tabs
Those features can also be used in custom tabs:

Code: Select all

// file: hooks/TABLENAME-dv.js
AppGiniHelper.DV.addTab("tabMeta", "Meta", null, ["created_on", "created_by", "modified_on", "modified_by"]);
AppGiniHelper.DV.getFields(["created_on", "created_by"]).inline();
AppGiniHelper.DV.getFields(["modified_on", "modified_by"]).inline();

chrome_1Mc4mTD4q6.png (4.5 KiB) Viewed 2345 times

---
VI. More panel-options

Code: Select all

// file: hooks/TABLENAME-dv.js
AppGiniHelper.DV.createLayout([6, 6], "Test", "my-panel-1", Variation.primary)
    .add(1, ['id'])
    .add(2, ['number'])

new AppGiniLayoutCollapsible([6, 6], "Test / Creation", true, Variation.success)
    .add(1, ['created_on'])
    .add(2, ['created_by']);

new AppGiniLayoutCollapsible([12], "Test / Modification", true, Variation.warning)
    .add(1, ['modified_on', 'modified_by']);
AppGiniHelper.DV.getFields(["modified_on", "modified_by"]).inline();

chrome_R6HzThDqtZ.png (9.73 KiB) Viewed 2345 times

1. Panel (not collapsible) with primary color variation and two columns
2. Expandable Panel with success color variation and two columns
3. Expandable Panel with warning color variation and two inline fields

I hope this helps you in layout issues.