Align Fields in Detail View

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1792
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Align Fields in Detail View

Post by jsetzer » 2023-08-14 09:56

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
chrome_3JDvXz9vNC.png (4.12 KiB) Viewed 1828 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
chrome_JWPs6wJxjI.png (3.33 KiB) Viewed 1828 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
chrome_iDRQ5j7CEF.png (3.92 KiB) Viewed 1828 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
chrome_6Yu4Ar7CBR.png (4.15 KiB) Viewed 1828 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
chrome_1Mc4mTD4q6.png (4.5 KiB) Viewed 1828 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
chrome_R6HzThDqtZ.png (9.73 KiB) Viewed 1828 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.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply