README

This module offers an input type for editing one or more records in backend and frontend.

Features

• input type to edit one or multiple records
• support for backend and frontend
• Encore bundle support

Install

Install with composer:

composer require heimrichhannot/contao-multi-column-editor-bundle

Technical instructions

Use the inputType "multiColumnEditor" for your field.

Minimal example:

$GLOBALS['TL_DCA']['tl_my_table']['fields']['mce_field'] = [
    'inputType' => 'multiColumnEditor',
    'eval'      => [
        'multiColumnEditor' => [
            'fields' => [
                'field1' => [
                    'label' => &$GLOBALS['TL_LANG']['tl_my_table']['field1'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px']
                ],
                'field2' => [
                    'label' => &$GLOBALS['TL_LANG']['tl_my_table']['field2'],
                    'inputType'               => 'select',
                    'options'                 => ['option1', 'option2'],
                    'eval' => ['groupStyle' => 'width:150px']
                ],
            ]
        ]
    ],
    'sql'       => "blob NULL"
];

All available options

'someField' => [
    'label'     => &$GLOBALS['TL_LANG']['tl_my_table']['someField'],
    'inputType' => 'multiColumnEditor',
    'exclude'   => true,
    // add 'compact' to tl_class if you want to display a reduced version of MCE
    'tl_class'  => 'compact', 
    'eval'      => [
        'multiColumnEditor' => [
            // set to true if the rows should be sortable (backend only atm)
            'sortable' => true,
            'class' => 'some-class',
            // set to 0 if it should also be possible to have *no* row (default: 1)
            'minRowCount' => 2,
            // set to 0 if an infinite number of rows should be possible (default: 0)
            'maxRowCount' => 5,
            // defaults to false
            'skipCopyValuesOnAdd' => false,
            'editorTemplate' => 'multi_column_editor_backend_default',
            // Optional: add palette and subpalette if you need supalettes support (otherwise all fields will be shows)
            // Legends are supported since verison 2.8
            'palettes'    => [
                '__selector__' => ['field1'],
                'default'      => 'field1',
            ],
            'subpalettes' => [
                'field1'  => 'field2', // key selector
                'field1_10' => 'field3' // key_value selector
            ],
            // place your fields here as you would normally in your DCA
            // (sql is not required)
            'fields' => [
                
                'field1' => [
                    'label' => ['field 1', 'The description of field 1'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px', 'submitOnChange' => true]
                ],
                'field2' => [
                    'label' => ['field 2', 'The description of field 2'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px']
                ],
                'field3' => [
                    'label' => ['field 3', 'The description of field 3'],
                    'inputType' => 'text',
                    'eval' => ['groupStyle' => 'width:150px']
                ]
            ]
        ]
    ],
    'sql'       => "blob NULL"
],

Add support for special fields (like fileTrees) in Rocksolid Custom Content Elements (RSCE)

Simply add the following to your project's config.php:

$GLOBALS['MULTI_COLUMN_EDITOR']['rsce_fields'] = array_merge(
    is_array($GLOBALS['MULTI_COLUMN_EDITOR']['rsce_fields']) ? $GLOBALS['MULTI_COLUMN_EDITOR']['rsce_fields'] : [], [
        'tl_content' => ['linkImage']
    ]
);

where this would be your RSCE config:

$element = [
     // ...
    'fields'          => [
        'links'              => [
            'label'     => &$GLOBALS['TL_LANG']['tl_content']['links'],
            'inputType' => 'multiColumnEditor',
            'eval'      => [
                'tl_class'          => 'long clr',
                'multiColumnEditor' => [
                    'minRowCount' => 0,
                    'fields'      => [
                        'linkImage'     => [
                            // ...
                            'inputType'               => 'fileTree',
                        ],
    // ...

Developers

Assets

Bundle assets are provided as yarn package. Sources and Javascript documentation can be found in src/Resources/npm-package.