Configurator-Version

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.