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.

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

  • modmore
  • Jens Wittmann – Gestaltung & Entwicklung
  • Digital Penguin
  • eydolan
  • deJaya
  • Following Sea
  • Sepia River Studios
  • Nick Clark
  • Lefthandmedia
  • YJ
  • Murray Wood
  • Dannevang Digital
  • Richard

Budget

$217 per month—let's make that $500!

Learn more