AppginiHelper multiple columns

[dlee]

I am trying to convert the blinds_layouts page in my app to use two column layout using AppginiHelper. I have placed the AppGiniHelper.min.js file in my hooks folder. I have created the blinds_layouts-dv.js file in the hooks folder and this is the code in that file:

Code: Select all

// file: hooks/blinds_layouts-dv.js
new AppGiniLayout([7, 5])
  .add(1, ["hunter_1", "hunter_1_Notes"])
  .add(2, ["hunter_2", "hunter_2_notes"])
  .add(3, ["hunter_3", "hunter_3_notes"])
  .add(4, ["hunter_4", "hunter_4_notes"])
  .add(4, ["hunter_5", "hunter_5_notes"]);

Attached is a screen capture of how the page looks now. I am getting the error "Uncaught ReferenceError: AppGiniLayout is not defined
<anonymous> http://localhost/..../hooks/blinds_layouts-dv.js:2

What am I doing wrong?
TD

[jsetzer]

Hi,

for a two-column layout, configured as widths-array of [7, 5], you should use .add(1, ...) and .add(2, ...) only, not 3, 4, ....

Can you please try this:

Code: Select all

// file: hooks/blinds_layouts-dv.js
new AppGiniLayout([7, 5])
  .add(1, ["hunter_1", "hunter_1_Notes", "hunter_3", "hunter_3_notes", "hunter_5", "hunter_5_notes"])
  .add(2, ["hunter_2", "hunter_2_notes", "hunter_4", "hunter_4_notes"])

If this does not help, please check for any (red) errors in console tab of your browser's developer tools.

Note
In new versions of our library you can also use AppGiniHelper.DV.createLayout([7, 5]) like this:

Code: Select all

// file: hooks/TABLENAME-dv.js
var layout1 = AppGiniHelper.DV.createLayout([7, 5])
        .add(1, ['field1', 'field2'])
        .add(2, ['field3', 'field4']);

Example

Here is an example of how it shold look like:

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_4DuucHhx7i.png (4.12 KiB) Viewed 6802 times

[jsetzer]

I have put together a few samples for aligning fields in Detail View using AppGiniHelper Javascript Library:
viewtopic.php?f=13&t=5188#p21546

[dlee]

Thank you so much Jan, I'll try these!

[dlee]

I now have the AppGiniHelper code working; thank you Jan for posting the examples!
My original problem was my fault, I had not added the code to the header-extra.php file.

Below is the final code and a screen capture is attached. I do have one question; how can I add a little separation, vertically, between the Guides row and the Hunter 1 row?

Thanks,
TD

Code: Select all

// file: hooks/blinds_layouts-dv.js
AppGiniHelper.DV.getFields(["blind_layout",""]).inline("Blind_Layout",[3,9]);
AppGiniHelper.DV.getFields(["guide",""]).inline("Guide",[6,6]);
AppGiniHelper.DV.getFields(["hunter_1","hunter_1_notes"]).inline("Hunter 1",[6,6]);
AppGiniHelper.DV.getFields(["hunter_2","hunter_2_notes"]).inline("Hunter 2",[6,6]);
AppGiniHelper.DV.getFields(["hunter_3","hunter_3_notes"]).inline("Hunter 3",[6,6]);
AppGiniHelper.DV.getFields(["hunter_4","hunter_4_notes"]).inline("Hunter 4",[6,6]);
AppGiniHelper.DV.getFields(["hunter_5","hunter_5_notes"]).inline("Hunter 5",[6,6]);

[jsetzer]

You may check out the insertXYZ()-functions documented here:
https://www.appgini.de/docs/Javascript- ... l?h=insert

Example

Code: Select all

var dv = AppGiniHelper.dv;

// insert h4 above "created_by" field
dv.getField("created_by").insertAbove().h4("Metadata");

// insert red alert below "is_overdue" field
dv.getField("is_overdue").insertBelow().alert("Task is overdue", Variation.danger);

// new: function is also available for multiple fields (fieldnames as string array)
dv.getFields(["modified_on", "assigned_on", "finished_on"]).insertAbove().hr();

[dlee]

This is fantastic Jan, The AppGiniHelper library is amazing, thank you !

[jsetzer]

Thank you! Glad you like it!