Configurator-Version

{ Page history | Improve this page | Report an issue }

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.