Panels not working in mixed (tabs & multi layout)

[azhar]

As stated in the subject, i followed instructions from bizzworxx.de

this is the below code in tablename-dv.js file

Code: Select all

var dv = AppGiniHelper.DV;

var row_1 = new AppGiniLayout([6, 6], "Booking Details", "my-panel-1", Variation.primary)
    .add(1, ["enquiry_no", "first_name"])
    .add(2, ["booking_status", "Id"])
    .wrapLabels();

var row_2 = new AppGiniLayout([6, 6])
    .add(1, ["date_booked", "email"])
    .add(2, ["contact", "destination"])
    .wrapLabels();

var row_3 = new AppGiniLayout([3, 3, 3, 3])
    .add(1, ["adults"])
    .add(2, ["children"])
    .add(3, ["infants"])
    .add(4, ["no_of_guests"])
    .wrapLabels();

var row_4 = new AppGiniLayout([6, 6], "Departure", "my-panel-2", Variation.primary)
    .add(1, ["flight1", "flight1_departure_date", "flight1_direct_indirect", "flight1_ref_no", "flight1_cost"])
    .add(2, ["flight1_from_airport", "flight1_to_airport", "flight1_baggage", "flight1_baggage_cost"])
    .wrapLabels();

var row_5 = new AppGiniLayout([6, 6], "Additional Flight", "my-panel-3", Variation.info)
    .add(1, ["flight2", "flight2_departure_date", "flight2_direct_indirect", "flight2_ref_no", "flight2_cost"])
    .add(2, ["flight2_from_airport", "flight2_to_airport", "flight2_baggage", "flight2_baggage_cost"])
    .wrapLabels();

var row_6 = new AppGiniLayout([6, 6], "Arrival", "my-panel-4", Variation.primary)
    .add(1, ["arriving_flight", "arriving_flight_departure_date", "arriving_flight_direct_indirect", "arriving_flight_ref_no", "arriving_flight_cost"])
    .add(2, ["arriving_flight_from_airport", "arriving_flight_to_airport", "arriving_flight_baggage", "arriving_flight_baggage_cost"])
    .wrapLabels();

var row_7 = new AppGiniLayout([6, 6], "Hotels", "my-panel-5", Variation.primary)
    .add(1, ["hotel1_country", "hotel1_name", "hotel1_check_in", "hotel1_ref_no"])
    .add(2, ["hotel1_city", "hotel1_room_type", "hotel1_check_out", "hotel1_cost"])
    .wrapLabels();

var row_8 = new AppGiniLayout([6, 6], "Additional Hotels", "my-panel-6", Variation.info)
    .add(1, ["hotel2_country", "hotel2_name", "hotel2_check_in", "hotel2_ref_no"])
    .add(2, ["hotel2_city", "hotel2_room_type", "hotel2_check_out", "hotel2_cost"])
    .wrapLabels();

var row_9 = new AppGiniLayout([6, 6], "Cost Summary", "my-panel-7", Variation.danger)
    .add(1, ["visa_type", "tours", "insurance", "total_cost", "profit", "balance_payment"])
    .add(2, ["visa_cost", "tours_cost", "insurance_cost", "selling_price", "amount_paid", "balance_payment_due_date"])
    .wrapLabels();



dv.addTab("tab1", "Customer", "icon")
    .add(row_1)
    .add(row_2)
    .add(row_3);

dv.addTab("tab2", "Airlines", "icon")
    .add(row_4)
    .add(row_5)
    .add(row_6);

dv.addTab("tab3", "Hotels", "icon")
    .add(row_7)
    .add(row_8);

dv.addTab("tab4", "Cost Summary", "icon")
    .add(row_9);

dv.addTab("tab5", "Notes", "icon", ["notes"]);

dv.addTab("tab6", "Attachments", "icon", ["attachments"]);

panels are not shown on site.. tabs and multi layout work fine...

additionally, i want to add collapsible panel too like for example for row_5 and row_8


i recently purchased both AG and AG helper, trying to help my friend for his travel agency..

thank you in advance..

[azhar]

Also, any possibility to display borders for the calculated fields as normal fields (with grey color inside) would be great..

[azhar]

As stated in the subject, i followed instructions from bizzworxx.de

this is the below code in tablename-dv.js file

Code: Select all

var dv = AppGiniHelper.DV;

var row_1 = new AppGiniLayout([6, 6], "Booking Details", "my-panel-1", Variation.primary)
    .add(1, ["enquiry_no", "first_name"])
    .add(2, ["booking_status", "Id"])
    .wrapLabels();

var row_2 = new AppGiniLayout([6, 6])
    .add(1, ["date_booked", "email"])
    .add(2, ["contact", "destination"])
    .wrapLabels();

var row_3 = new AppGiniLayout([3, 3, 3, 3])
    .add(1, ["adults"])
    .add(2, ["children"])
    .add(3, ["infants"])
    .add(4, ["no_of_guests"])
    .wrapLabels();

var row_4 = new AppGiniLayout([6, 6], "Departure", "my-panel-2", Variation.primary)
    .add(1, ["flight1", "flight1_departure_date", "flight1_direct_indirect", "flight1_ref_no", "flight1_cost"])
    .add(2, ["flight1_from_airport", "flight1_to_airport", "flight1_baggage", "flight1_baggage_cost"])
    .wrapLabels();

var row_5 = new AppGiniLayout([6, 6], "Additional Flight", "my-panel-3", Variation.info)
    .add(1, ["flight2", "flight2_departure_date", "flight2_direct_indirect", "flight2_ref_no", "flight2_cost"])
    .add(2, ["flight2_from_airport", "flight2_to_airport", "flight2_baggage", "flight2_baggage_cost"])
    .wrapLabels();

var row_6 = new AppGiniLayout([6, 6], "Arrival", "my-panel-4", Variation.primary)
    .add(1, ["arriving_flight", "arriving_flight_departure_date", "arriving_flight_direct_indirect", "arriving_flight_ref_no", "arriving_flight_cost"])
    .add(2, ["arriving_flight_from_airport", "arriving_flight_to_airport", "arriving_flight_baggage", "arriving_flight_baggage_cost"])
    .wrapLabels();

var row_7 = new AppGiniLayout([6, 6], "Hotels", "my-panel-5", Variation.primary)
    .add(1, ["hotel1_country", "hotel1_name", "hotel1_check_in", "hotel1_ref_no"])
    .add(2, ["hotel1_city", "hotel1_room_type", "hotel1_check_out", "hotel1_cost"])
    .wrapLabels();

var row_8 = new AppGiniLayout([6, 6], "Additional Hotels", "my-panel-6", Variation.info)
    .add(1, ["hotel2_country", "hotel2_name", "hotel2_check_in", "hotel2_ref_no"])
    .add(2, ["hotel2_city", "hotel2_room_type", "hotel2_check_out", "hotel2_cost"])
    .wrapLabels();

var row_9 = new AppGiniLayout([6, 6], "Cost Summary", "my-panel-7", Variation.danger)
    .add(1, ["visa_type", "tours", "insurance", "total_cost", "profit", "balance_payment"])
    .add(2, ["visa_cost", "tours_cost", "insurance_cost", "selling_price", "amount_paid", "balance_payment_due_date"])
    .wrapLabels();



dv.addTab("tab1", "Customer", "icon")
    .add(row_1)
    .add(row_2)
    .add(row_3);

dv.addTab("tab2", "Airlines", "icon")
    .add(row_4)
    .add(row_5)
    .add(row_6);

dv.addTab("tab3", "Hotels", "icon")
    .add(row_7)
    .add(row_8);

dv.addTab("tab4", "Cost Summary", "icon")
    .add(row_9);

dv.addTab("tab5", "Notes", "icon", ["notes"]);

dv.addTab("tab6", "Attachments", "icon", ["attachments"]);

panels are not shown on site.. tabs and multi layout work fine...

additionally, i want to add collapsible panel too like for example for row_5 and row_8


i recently purchased both AG and AG helper, trying to help my friend for his travel agency..

thank you in advance..

one more thing to add, the panels work fine if i remove the tabs..

[jsetzer]

Also, any possibility to display borders for the calculated fields as normal fields (with grey color inside) would be great..

There is a difference between <input/>-fields and (static) display text. There is no built-in function for converting (static) text to readonly <input/> fields.

I can not recommend it, because it may irritate users if static text elements sometimes look like input fields.

Having said this: If you just want to change the look of certain text-contents consider adding custom CSS styles. You can add border, background-color and padding styles to .form-control-static elements using CSS.

[jsetzer]

panels are not shown on site.. tabs and multi layout work fine...

Basic Usage

Create multi-column-panel (AKA "Layout") first, then create a tab and add panel to tab:

Code: Select all

var DV = AppGiniHelper.DV;

var row_1 = DV.createLayout([6, 6], "A Custom Panel", "my-panel-1", Variation.primary)
    .add(1, ["last_name", "first_name", "middle_names"])
    .add(2, ["gender_id", "id"])

DV.addTab("main", "Person", 'user', [
    row_1,
    "title_nobility",
    "artist_name",
    "country_id"
]);

pnflmsGGnB.png (32.47 KiB) Viewed 90321 times

[azhar]

panels are not shown on site.. tabs and multi layout work fine...

Basic Usage

Create multi-column-panel (AKA "Layout") first, then create a tab and add panel to tab:

Code: Select all

var DV = AppGiniHelper.DV;

var row_1 = DV.createLayout([6, 6], "A Custom Panel", "my-panel-1", Variation.primary)
    .add(1, ["last_name", "first_name", "middle_names"])
    .add(2, ["gender_id", "id"])

DV.addTab("main", "Person", 'user', [
    row_1,
    "title_nobility",
    "artist_name",
    "country_id"
]);

pnflmsGGnB.png

Hey Jan, thank very much for your reply..

I am sorry, but it didn't work..

//Multi-column layout with panels defined//

var row_1 = dv.createLayout([6, 6], "Booking Details", "my-panel-1", Variation.primary)
.add(1, ["enquiry_no", "first_name", "date_booked", "email"])
.add(2, ["booking_status", "Id", "contact", "destination"])
.wrapLabels();

var row_2 = dv.createLayout([3, 3, 3, 3])
.add(1, ["adults"])
.add(2, ["children"])
.add(3, ["infants"])
.add(4, ["no_of_guests"])
.wrapLabels();

var row_3 = dv.createLayout([6, 6], "Departure", "my-panel-2", Variation.primary)
.add(1, ["flight1", "flight1_from_airport", "flight1_direct_indirect", "flight1_ref_no", "flight1_cost"])
.add(2, ["flight1_departure_date", "flight1_to_airport", "flight1_baggage", "flight1_baggage_cost"])
.wrapLabels();

// Tabs defined //

dv.addTab("tab1", "Customer", "user")
.add(row_1)
.add(row_2);

dv.addTab("tab2", "Flights", "plane")
.add(row_3)
.add(row_4)
.add(row_5);

Output:

As you see below the multi-column tab layout works fine ... but the panels are missing... if I remove the tabs completely, the panels are shown..

if you can please check the code above, if it needs modifications

Thank you!

[azhar]

If i remove the code for tabs.. multi-column & panel works fine .. but in one page..

I am sure, it is a simple mistake by me... I am an IT engineer, not a programmer at all.. trying to learn new things..

[jsetzer]

Hmm, in your screenshot it looks as if the multi-column layouts are inside the tabs. Maybe I did not get the point.

Please note that the panels' titles will not be rendered when placed inside custom tabs.

See the note in the docs:
http://www.appgini.de/docs/Javascript-L ... ayout.html

There is a hint in chapter Add Multi-Column-Layout to Custom tab which says:

Note

When adding layout to a Custom Tab, title will not be rendered;

I hope this helps.

[azhar]

Hmm, in your screenshot it looks as if the multi-column layouts are inside the tabs. Maybe I did not get the point.

Please note that the panels' titles will not be rendered when placed inside custom tabs.

See the note in the docs:
http://www.appgini.de/docs/Javascript-L ... ayout.html

There is a hint in chapter Add Multi-Column-Layout to Custom tab which says:

Note

When adding layout to a Custom Tab, title will not be rendered;

I hope this helps.

Hey Jan,

sorry to bother you again.. check the below image from your website.. where in details tab, you can collapse and un-collapse the panel 'History'..

this is exactly what i am trying to achieve.. hope you understood.. if you can paste the code for patient-dv.js i will try to figure out...

[jsetzer]

Sorry, now I got it, I hope! It's about Multi-Column Layouts in Custom Tabs AND about collapsible panels in Custom Tabs:


Multi-column-layouts in custom tabs
See above

Collapsible panels in custom tabs

Code: Select all

var DV = AppGiniHelper.DV;

var tabMain = DV.addTab("main", "Person", 'user', ["last_name", "first_name", "middle_names"]);

DV.addGroup("collapsible_panel_1", "title of panel", ["title_nobility", "gender_id", "country_id"], Variation.primary, true);
//           ^
//           +---- this is the ID of the panel-element

tabMain.add($j('#collapsible_panel_1'));
//              ^
//              +---- this is the jQuery selector for the panel-element

chrome_PVbsQCQ1iw.png (22.27 KiB) Viewed 90294 times

Pro-Tip
as you can see, I am using a standard jQuery-selector for getting an element (here: Collapsible Panel element) and then adding it to tabMain using .add method. This means you can create any custom element and place it inside Custom Tab.

[azhar]

Sorry, now I got it, I hope! It's about Multi-Column Layouts in Custom Tabs AND about collapsible panels in Custom Tabs:


Multi-column-layouts in custom tabs
See above

Collapsible panels in custom tabs

Code: Select all

var DV = AppGiniHelper.DV;

var tabMain = DV.addTab("main", "Person", 'user', ["last_name", "first_name", "middle_names"]);

DV.addGroup("collapsible_panel_1", "title of panel", ["title_nobility", "gender_id", "country_id"], Variation.primary, true);
//           ^
//           +---- this is the ID of the panel-element

tabMain.add($j('#collapsible_panel_1'));
//              ^
//              +---- this is the jQuery selector for the panel-element

chrome_PVbsQCQ1iw.png

Pro-Tip
as you can see, I am using a standard jQuery-selector for getting an element (here: Collapsible Panel element) and then adding it to tabMain using .add method. This means you can create any custom element and place it inside Custom Tab.

I hope! It's about Multi-Column Layouts in Custom Tabs AND about collapsible panels in Custom Tabs:

Exactly, this is what i mean.. Multi-Column Layouts + Collapsible & Standard panels INSIDE Tabs

thanks for understanding..

3 questions

1. if 'main' is the first tab, what should be the name of other tabs?
2. if the panel is non collapsible i just need to remove 'true' right?
2. i have multi-layout in all tabs with rows [6. 6], [3,3,3,3] so on.. before i used

var row_1, row2, row3 and add them in tabs..

in your code above i don't see any rows for fields ...

sorry again to bother you, i am still trying to understand.. and this is the last thing i have to finish my project..

[jsetzer]

1) Name the tabs as you like but unique, for example tabMain, tabMedicalData, tabWhatever, tabMetaData.

2) if I remember right, yes

3) yes. Just make sure the column widths sum up to 12, e.g. 6+6, 4+4+4, 3+3+3+3, 6+3+3, 8+4, ...

4) don't know what you mean by 'rows'

[azhar]

1) Name the tabs as you like but unique, for example tabMain, tabMedicalData, tabWhatever, tabMetaData.

2) if I remember right, yes

3) yes. Just make sure the column widths sum up to 12, e.g. 6+6, 4+4+4, 3+3+3+3, 6+3+3, 8+4, ...

4) don't know what you mean by 'rows'

this is the example code for 2 tabs i have used which properly shows layout and tabs, panel are defined but doesn't show up..

Code: Select all

//Layout for fields//

var row_1 = dv.createLayout([6, 6], "Booking Details", "my-panel-1", Variation.primary) <-- panel defined but doesn't show up (attached screenshot)
    .add(1, ["enquiry_no", "first_name", "date_booked", "email"])
    .add(2, ["booking_status", "Id", "contact", "destination"])
    .wrapLabels();

var row_2 = dv.createLayout([3, 3, 3, 3])
    .add(1, ["adults"])
    .add(2, ["children"])
    .add(3, ["infants"])
    .add(4, ["no_of_guests"])
    .wrapLabels();
    
//Above 2 rows in Tabs below//

dv.addTab("tab1", "Customer", "user")
    .add(row_1)
    .add(row_2);

dv.addTab("tab2", "Flights", "plane")
    .add(row_3)
    .add(row_4)
    .add(row_5)
    .add(row_6);

[jsetzer]

Please check my example above:

In your code there is no variable for your tab named "tab1". Store tab in a variable.

var tab1 = DV.addTab(.......);

You have named the panel "my-panel-1". Use jQuery to get the element (panel) by id. Add the element to the tab using tab1.add(YOUR_ELEMENT)

tab1.add($j('#my-panel-1'));

[azhar]

Please check my example above:

In your code there is no variable for your tab named "tab1". Store tab in a variable.

var tab1 = DV.addTab(.......);

You have named the panel "my-panel-1". Use jQuery to get the element (panel) by id. Add the element to the tab using tab1.add(YOUR_ELEMENT)

tab1.add($j('#my-panel-1'));

Jan.. i tried what you said.. i am really noob in coding.. One last request.. can you PLEASE modify/adjust the below code, i will be really grateful..

Thank you!

Code: Select all

var dv = AppGiniHelper.DV;

var row_1 = dv.createLayout([6, 6], "Booking Details", "my-panel-1", Variation.primary)
    .add(1, ["enquiry_no", "first_name", "date_booked", "email"])
    .add(2, ["booking_status", "Id", "contact", "destination"])
    .wrapLabels();

var row_2 = dv.createLayout([3, 3, 3, 3])
    .add(1, ["adults"])
    .add(2, ["children"])
    .add(3, ["infants"])
    .add(4, ["no_of_guests"])
    .wrapLabels();
  
  
dv.addTab("tab1", "Customer", "user")
    .add(row_1)
    .add(row_2);
    

[jsetzer]

It's almost midnight. Gonna have a look tomorrow when I'm at the office

[azhar]

It's almost midnight. Gonna have a look tomorrow when I'm at the office

No problem Jan, just help me out in this .. thank you!!

[jsetzer]

Here is the code including comments. The only thing you have to do is replace my fieldnames by your fieldnames.

Code

Code: Select all

var dv = AppGiniHelper.DV; // get variable for DV

// just replace the fieldnames accordingly
var fields_a_1 = ['last_name', 'first_name', 'middle_names','title_nobility'];
var fields_a_2 = ['title_academic', 'maiden_name', 'artist_name', 'nick_name'];

// create a multi-column-layout (aka panel)
// this is a 2-column layout 6+6
// title and name are irrelevant here, because title will be hidden in tab
var panel_a = dv.createLayout([6, 6], "Panel 1", "panel-1")
    .add(1, fields_a_1)
    .add(2, fields_a_2)
    .wrapLabels();
   
// create another multi-column-layout (aka panel)
// this is a 4-column layout 3+3+3+3
// title and name are irrelevant here, because title will be hidden in tab
// just replace the fieldnames accordingly
// it is important to pass an array of fieldnames, even if this is only one fieldname
var panel_b = dv.createLayout([3, 3, 3, 3], "Panel 1", "panel-2")
    .add(1, ['date_of_birth'])
    .add(2, ['place_of_birth'])
    .add(3, ['date_of_death'])
    .add(4, ['place_of_death'])
    .wrapLabels();

var tab1 = dv.addTab("tabOne", "One", "cog", [panel_a, panel_b]);

Result

chrome_OQ7BpS46S4.png (13.28 KiB) Viewed 90265 times

tab (yellow) and panels (green) highlighted:

chrome_hQkFgvS4NV.png (17.88 KiB) Viewed 90265 times

fields_a_1 are in 1st column of first row
fields_a_2 are in 2nd column of first row



This code how to put multi-column-layouts into custom tabs.

For collapsible panels I am going to do another article the next 30 minutes.

[jsetzer]

Now I am going to add another (collapsible) panel.

Just replace the fieldnames ["gender_id", "country_id"] and ["name", "employee_id"] accordingly. Remember this has to be an array of strings like ["fieldname1", "fieldname2", "fieldname3"]

Additional Code

Code: Select all

var panel_c = dv.addGroup("panel_c", "More Data", ["gender_id", "country_id"], Variation.default, true);
tab1.add($j("#panel_c"));

var panel_d= dv.addGroup("panel_d", "Metadata", ["name", "employee_id"], Variation.default, true);
tab1.add($j("#panel_d"));

Result

chrome_oxOkgt390B.png (16.23 KiB) Viewed 90264 times

Expanded

chrome_gQVcsIVPEU.png (15.71 KiB) Viewed 90264 times

One last tip: If you need some space before the first collapsible panel, just add this to your CSS-file or to the <style>-section of your hooks/header-extras.php:

Code: Select all

.panel.appginihelper-fieldsgroup {
  margin-top: 15px;
}

Code_Xy4wgJwPBZ.png (2.21 KiB) Viewed 90264 times

[jsetzer]

Now, there may be one question left:

What if you want a multi-column layout inside a collapsible panel inside a custom tab like this:

• DV
  • Custom Tabs
    • Custom Tab
      • Collapsible Panel
        • Multi-Column-Layout
          • Column A
            • Field ...
            • Field ...
          • Column B
            • Field ...
            • Field ...

Well, this is quite specific, but AppGini Helper Javascript Library + some Javascript/jQuery can even help you on this task.

Here we go:

Code

Code: Select all

var dv = AppGiniHelper.DV; // get variable for DV

// create a custom tab
var tab1 = dv.addTab("tabOne", "One", "cog", []);

// just replace the fieldnames accordingly
var fields_a_1 = ['last_name', 'first_name', 'middle_names','title_nobility'];
var fields_a_2 = ['title_academic', 'maiden_name', 'artist_name', 'nick_name'];

// create a two-column-layout 6+6
// not title now!
var panel_a = dv.createLayout([6, 6])
    .add(1, fields_a_1)
    .add(2, fields_a_2)
    .wrapLabels();

// create the collapsible panel
var panel_e = dv.addGroup("panel_e", "Panel with 2-Column Layout", ["name"], Variation.Primary, true);
// add the collapsible panel to the tab
tab1.add($j("#panel_e"));

// append the two-column-layout to the collapsible panel's body
panel_a.getElement().appendTo("#panel_e-body");
//                             ^^      ^
//                             ||      +---- we need the panel's body
//                             |+---- this is the name of panel_e
//                             +---- indicator for "get element by ID"
  
// create another multi-column-layout (aka panel)
// this is a 4-column layout 3+3+3+3
// title and name are irrelevant here, because title will be hidden in tab
// just replace the fieldnames accordingly
// it is important to pass an array of fieldnames, even if this is only one fieldname
var panel_b = dv.createLayout([3, 3, 3, 3], "Panel 2", "panel-2")
    .add(1, ['date_of_birth'])
    .add(2, ['place_of_birth'])
    .add(3, ['date_of_death'])
    .add(4, ['place_of_death'])
    .wrapLabels();
tab1.add(panel_b);


 var panel_c = dv.addGroup("panel_c", "More Data", ["gender_id", "country_id"], Variation.default, true);
 tab1.add($j("#panel_c"));

 var panel_d= dv.addGroup("panel_d", "Metadata", ["employee_id"], Variation.default, true);
 tab1.add($j("#panel_d"));
 

Result

chrome_Sip9PsJ4o2.png (21.83 KiB) Viewed 90264 times

You see, this is a combination of all: Custom Tabs in DV, Collapsible-Panels inside Custom Tab, Multi-Column-Layout inside Collapsible-Panel inside Custom Tab. If you ignore all the code-comments: In relation to all the necessary HTML- and Javascript-code behind, it is not much code in your hook-file.

Summary

There is a lot we can do with AppGini + AppGini Helper + a little Javascript and perhaps CSS. But if you have very specific need and you want to fully customize almost everything, you will need some better understanding of HTML, DOM and Javascript. You should know how to inspect elements in your browser and how to use javascript/jQuery to get/find elements and manipulate them. If you don't have those skills you can still customize a lot with our one-liners.

[azhar]

Jan, I appreciate your assistance greatly! This is precisely what I had in mind.

The specific challenge I was facing revolved around panels, both collapsible {which is resolved now with your code examples above) and non-collapsible panels similar to the screenshot below, to serve as descriptors with titles, acting as separators for different sections within the tab.

No worries, though. I can make use of collapsible panels for now. My request is more related with CSS, I guess..

The reason I opted for the AppGini Helper was to streamline the code editing process and to add just one line of code, and it's doing a fantastic job. If any modifications are necessary, I'll focus solely on these tablename-dv.js files. Thanks again!

[azhar]

// title and name are irrelevant here, because title will be hidden in tab

I believe you've already addressed my question earlier. It seems the title functions without tabs only, and I was curious if it could also work within tabs. My apologies for not thoroughly reading the documentation. In the image above, where tabs are not used, which explains why the titles are visible.

[azhar]

Code: Select all

// create the collapsible panel
var panel_e = dv.addGroup("panel_e", "VISA", ["flight1"], Variation.danger, true);
// add the collapsible panel to the tab
tab1.add($j("#panel_e"));

// append the two-column-layout to the collapsible panel's body
panel_a.getElement().appendTo("#panel_e-body");
//                             ^^      ^
//                             ||      +---- we need the panel's body
//                             |+---- this is the name of panel_e
//                             +---- indicator for "get element by ID"

In the code above I don't want to append anything in the collapsible panel except the layout from panel_a

what should I remove? I tried to remove ["flight1"] completely but it didn't work, also tried to remove

panel_a.getElement().appendTo("#panel_e-body");

still it didn't work

I just want [6, 6] / [3, 3, 3, 3] layouts which is defined in the var createLayout to be in the collapsible panel..

[azhar]

Code: Select all

// create the collapsible panel
var panel_e = dv.addGroup("panel_e", "VISA", ["flight1"], Variation.danger, true);
// add the collapsible panel to the tab
tab1.add($j("#panel_e"));

// append the two-column-layout to the collapsible panel's body
panel_a.getElement().appendTo("#panel_e-body");
//                             ^^      ^
//                             ||      +---- we need the panel's body
//                             |+---- this is the name of panel_e
//                             +---- indicator for "get element by ID"

In the code above I don't want to append anything in the collapsible panel except the layout from panel_a

what should I remove? I tried to remove ["flight1"] completely but it didn't work, also tried to remove

panel_a.getElement().appendTo("#panel_e-body");

still it didn't work

I just want [6, 6] / [3, 3, 3, 3] layouts which is defined in the var createLayout to be in the collapsible panel..

Jan, I would highly appreciate it if you could help me with this. You've already assisted me a lot with the code above. This is the LAST thing I'll ask about on this topic.

Won't bother you again.

Thank you!

[azhar]

After two days of effort, I finally achieved what I wanted. Thank you so much, Jan. I took the time to understand your code and the explanation you provided in this thread and modified as per my requirements.. here's what I learned so far with AGH..

Multi-column layout + Tabs + Collapsible panels & Variations + Field caption rename + Placeholders

Also, the CSS code you provided in the 'Tips and Tricks' forum to change the look of dropdowns—I pay attention to minor details too.

I have 2 things if you can answer..

1. Each time I click 'Save,' is it possible to stay on the same tab? Right now, it goes to the first tab.

2. I tried the code for 'Beautify dropdowns' from your documentation, but the icons are not changing, like the view icon.