Jump to main content Jump to doc navigation

Create 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.