Configurator-Version
Last updated Dec 9th, 2019 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$301 per month—let's make that $500!
Learn moreCreate varying layout-boxes with MIGX - Configurator Version¶
Its possible to use the MIGX - Configurator - CMP to create switchable formtabs. This Tutorial will show you, how. It descibes just the differences to the used Version.
The MIGX-Tv¶
Create a new TV.
General Information¶
Name¶
MultiColumn
Input Options¶
Input-type¶
migx
Configurations¶
layout_1
The MIGX-Configurations¶
Create three MIGX - Configurations in the MIGX - Configurator - CMP¶
layout_1¶
Name: layout_1 unique MIGX ID: layout_1
layout_2¶
Name: layout_2 unique MIGX ID: layout_2
layout_3¶
Name: layout_3 unique MIGX ID: layout_3
Add Formtabs and Columns¶
Open each Configuration with 'edit raw'
layout_1¶
Formtabs¶
[{
"caption": "Row Format",
"fields": [{
"field": "fake",
"inputTVtype": "hidden"
}, {
"field": "cell_2_image",
"caption": "Image",
"inputTVtype": "hidden"
}, {
"field": "cell_2_headline",
"caption": "Headline",
"inputTVtype": "hidden"
}, {
"field": "cell_2_content",
"caption": "Content",
"inputTVtype": "hidden"
}, {
"field": "cell_3_image",
"caption": "Image",
"inputTVtype": "hidden"
}, {
"field": "cell_3_headline",
"caption": "Headline",
"inputTVtype": "hidden"
}, {
"field": "cell_3_content",
"caption": "Content",
"inputTVtype": "hidden"
}]
}, {
"caption": "First",
"fields": [{
"field": "cell_1_image",
"caption": "Image",
"inputTVtype": "image"
}, {
"field": "cell_1_headline",
"caption": "Headline"
}, {
"field": "cell_1_content",
"caption": "Content",
"inputTVtype": "richtext"
}]
}]
under Multiple Formtabs select:
layout_1,layout_2,layout_3
Columns¶
[{
"header": "Row Format",
"width": "30",
"sortable": "true",
"dataIndex": "MIGX_formname"
}, {
"header": "First",
"width": "160",
"sortable": "false",
"dataIndex": "cell_1_image",
"renderer": "this.renderImage"
}, {
"header": "Second",
"width": "160",
"sortable": "false",
"dataIndex": "cell_2_image",
"renderer": "this.renderImage"
}, {
"header": "Third",
"width": "160",
"sortable": "false",
"dataIndex": "cell_3_image",
"renderer": "this.renderImage"
}]
layout_2¶
Formtabs¶
[{
"caption": "Row Format",
"fields": [{
"field": "fake",
"inputTVtype": "hidden"
}, {
"field": "cell_3_image",
"caption": "Image",
"inputTVtype": "hidden"
}, {
"field": "cell_3_headline",
"caption": "Headline",
"inputTVtype": "hidden"
}, {
"field": "cell_3_content",
"caption": "Content",
"inputTVtype": "hidden"
}]
}, {
"caption": "First",
"fields": [{
"field": "cell_1_image",
"caption": "Image",
"inputTVtype": "image"
}, {
"field": "cell_1_headline",
"caption": "Headline"
}, {
"field": "cell_1_content",
"caption": "Content",
"inputTVtype": "richtext"
}]
}, {
"caption": "Second",
"fields": [{
"field": "cell_2_image",
"caption": "Image",
"inputTVtype": "image"
}, {
"field": "cell_2_headline",
"caption": "Headline"
}, {
"field": "cell_2_content",
"caption": "Content",
"inputTVtype": "richtext"
}]
}]
layout_3¶
Formtabs¶
[{
"caption": "Row Format",
"fields": [{
"field": "fake",
"inputTVtype": "hidden"
}]
}, {
"caption": "First",
"fields": [{
"field": "cell_1_image",
"caption": "Image",
"inputTVtype": "image"
}, {
"field": "cell_1_headline",
"caption": "Headline"
}, {
"field": "cell_1_content",
"caption": "Content",
"inputTVtype": "richtext"
}]
}, {
"caption": "Second",
"fields": [{
"field": "cell_2_image",
"caption": "Image",
"inputTVtype": "image"
}, {
"field": "cell_2_headline",
"caption": "Headline"
}, {
"field": "cell_2_content",
"caption": "Content",
"inputTVtype": "richtext"
}]
}, {
"caption": "Third",
"fields": [{
"field": "cell_3_image",
"caption": "Image",
"inputTVtype": "image"
}, {
"field": "cell_3_headline",
"caption": "Headline"
}, {
"field": "cell_3_content",
"caption": "Content",
"inputTVtype": "richtext"
}]
}]
Make sure, you have all the same fieldnames in all formtab-setups. Unused fields in hidden-fields. Otherwise you will loose values, when you switch between formtabs.