Page 1 of 1
AppginiHelper multiple columns
Posted: 2023-08-13 21:16
by 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
Re: AppginiHelper multiple columns
Posted: 2023-08-14 09:17
by 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']);
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 6842 times
Re: AppginiHelper multiple columns
Posted: 2023-08-14 09:57
by 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
Re: AppginiHelper multiple columns
Posted: 2023-08-14 15:31
by dlee
Thank you so much Jan, I'll try these!
Re: AppginiHelper multiple columns
Posted: 2023-08-15 16:53
by 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]);
Re: AppginiHelper multiple columns
Posted: 2023-08-15 17:06
by 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();
Re: AppginiHelper multiple columns
Posted: 2023-08-15 18:01
by dlee
This is fantastic Jan, The AppGiniHelper library is amazing, thank you !
Re: AppginiHelper multiple columns
Posted: 2023-08-15 18:05
by jsetzer
Thank you! Glad you like it!