Using inline fields in multi-column layout

[SkayyHH]

Unfortunately I have not found anything about it here in the forum. Is it also possible to use the inline fields function for e.g. use first_name and last_name inline in a multi-column layout?

I apologize if I missed this somewhere.

Thank you in advance,

[SkayyHH]

I would like to specify my problem in more detail.

I have a multi-column layout.

The code for this is basic:

Code: Select all

new AppGiniLayout ([column_1_width, column_2_width, ...])
     .add (column_index_1, ["fieldname_1", "fieldname_2", ...])
     .add (column_index_2, ["fieldname_3", "fieldname_4", ...]);

I would like to use an inline field for one of these fields (e.g. fieldname_1). For this the code is:

Code: Select all

new AppGiniFields (["last_name", "first_name"]). inline ("Name");

How can I combine the code for the inline field with the code for the multi-column layout? So that I have the inline field for first_name and last_name in one column of the multi-column layout?

Thanks much, Kai

[jsetzer]

Hi,

I've just set up a test page. Combination of multi-colunm layout + inline fields works perfectly here, even inside custom tabs:

chrome_JItrj2ZqYi.png (55.61 KiB) Viewed 1949 times

So, what and how did you try so far?

I'm wondering what errors you get or if there is anything wrong with the output. A screenshot would help us understanding the problem. Also relevant fragments of your javascript code (not the code from the documentation) could help us

• Are there any AppGini Helper errors in console?
• Are there any AppGini Helper warnings in console?
• Did you clear browser cache?
• Did you spell the field names correctly (letter-casing)?

Related docs

• https://appgini.bizzworxx.de/products/j ... mn-layout/
• https://appgini.bizzworxx.de/products/j ... ne-fields/
• https://appgini.bizzworxx.de/products/j ... view/tabs/

[SkayyHH]

Hello,

that's exactly what i need

I just have no idea how to get the code for the inline field into the multi column field. I have no bugs or anything else.

Code: Select all

new AppGiniFields(["last_name", "first_name"]).inline("Name");

var row_1 = dv.addLayout([6,6])
    .add(1, ["-", "job_title", "employment_duration"])
    .add(2, ["personnel_number", "-", "date_of_birth" , "age"])
;

var row_2 = dv.addLayout([6,6])
    .add(1, ["personnel_number", "department", "-", "date_started", "termination_date", "-", "phone", "mobile", "email"])
    .add(2, ["gender", "marital_status", "children", "-", "adress", , "emergency_contact"])
;

var row_3 = dv.addLayout([12])
    .add(1, ["notes"])
    .sizeLabels(1)
;

dv.addTab("employee-tab", "Stammdaten", "calendar")
    .add(row_1);

dv.addTab("data-tab", "Detaildaten", "calendar")
    .add(row_2);

dv.addTab("notes-tab", "Notizen", "calendar")
    .add(row_3);

dv.getTabs().setPosition(TabPosition.Bottom);

I would like to have the inline field (name, first name) to the left of the personnel number field.

Thanks again, Kai

[jsetzer]

You have simply forgotten to add the fields to the layout:

Code: Select all

new AppGiniFields(["first_name", "last_name", "..."]).inline();

// add fields first_name and last_name (and more) to the layout
let layout = new AppGiniLayout([6, 6], "Personal Data", "layoutPersonalData", Variation.primary)
        .add(1, ["#Name", "first_name", "last_name", "..."])
        .add(2, ["#Contact", "email", "phone", "..."])
        ;
dv.addTab("tabEmployee", "Employee", "user", layout);

[SkayyHH]

Hello Jan,

thank you very much. I didn't think it was that easy

and it looks wonderful ...

Greetings, Kai

[jsetzer]

Great, glad you got it running!