Feature: #80196 - EXT:form - support multiple form elements per row

See Issue #80196

Description

Two new form element types have been added to the form framework:

  • GridContainer
  • GridRow

Using these 'container' form elements will enable you to define multiple form elements per row.

Example:

type: Form
identifier: example-form-gridcontainer
label: 'Form Grid Container'
prototypeName: standard
renderables:
  -
    type: Page
    identifier: page-1
    label: Page
    renderables:
      -
        type: GridContainer
        identifier: gridcontainer-2
        label: 'Grid: Container'
        renderables:
          -
            type: GridRow
            identifier: gridrow-2
            label: 'Grid: Row'
            renderables:
              -
                type: SingleSelect
                identifier: singleselect-1
                label: 'Single select'
                properties:
                  gridColumnClassAutoConfiguration:
                    viewPorts:
                      xs:
                        numbersOfColumnsToUse: 12
                      lg:
                        numbersOfColumnsToUse: 2
              -
                type: Text
                identifier: text-1
                label: Text
                properties:
                  gridColumnClassAutoConfiguration:
                    viewPorts:
                      xs:
                        numbersOfColumnsToUse: 6
                      lg:
                        numbersOfColumnsToUse: 5
              -
                type: MultiSelect
                identifier: multiselect-1
                label: 'Multi select'
                properties:
                  gridColumnClassAutoConfiguration:
                    viewPorts:
                      xs:
                        numbersOfColumnsToUse: 6
                      sm:
                        numbersOfColumnsToUse: 5
      -
        type: GridContainer
        identifier: gridcontainer-1
        label: 'Grid: Container'
        renderables:
          -
            type: GridRow
            identifier: gridrow-1
            label: 'Grid: Row'
            renderables:
              -
                type: Password
                identifier: password-1
                label: Password

Per default, the resulting markup is compatible to Twitter Bootstrap.

The following options are available now:

GridContainer:
  ...
  properties:
    columnClassAutoConfiguration:
      gridSize: 12
      viewPorts:
        xs:
          classPattern: 'col-xs-{@numbersOfColumnsToUse}'
        sm:
          classPattern: 'col-sm-{@numbersOfColumnsToUse}'
        md:
          classPattern: 'col-md-{@numbersOfColumnsToUse}'
        lg:
          classPattern: 'col-lg-{@numbersOfColumnsToUse}'

and

<formElementIdentifier>:
  ...
  properties:
    gridColumnClassAutoConfiguration:
      viewPorts:
        xs:
          numbersOfColumnsToUse: 12
        ...
        lg:
          numbersOfColumnsToUse: 2

GridContainer.properties.columnClassAutoConfiguration

The example form definition shown above generates the following HTML markup

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
            ...
        </div>
        <div class="col-xs-6 col-sm-3 col-md-4 col-lg-5">
            ...
        </div>
        <div class="col-xs-6 col-sm-5 col-md-4 col-lg-5">
            ...
        </div>
    </div>
</div>

GridContainer.properties.columnClassAutoConfiguration.gridSize

Total amount of grid columns (default: 12).

GridContainer.properties.columnClassAutoConfiguration.viewPorts.<viewPortName>.classPattern

This pattern will be used to generate the HTML class attribute values for each viewport. The wildcard '{@numbersOfColumnsToUse}' will be replaced with the calculated grid column numbers. At the end, all 'classPattern' items for each viewport will be merged together and written into the class attribute of each form element (all form elements within a 'GridRow').

The calculation depends on the option 'gridSize', the amount of the form elements within the 'GridRow' form element and the optional option 'gridColumnClassAutoConfiguration' from the form element configurations.

<formElementIdentifier>.properties.gridColumnClassAutoConfiguration (otional)

Each form elements within a 'GridRow' element can define the number of grid columns to use on a 'per viewport' base.

<formElementIdentifier>.properties.gridColumnClassAutoConfiguration.viewPorts.<viewPortName>

The array keys '<viewPortName>' must match with the array keys '<viewPortName>' from the configuration 'GridContainer.properties.columnClassAutoConfiguration.viewPorts.<viewPortName>'

<formElementIdentifier>.properties.gridColumnClassAutoConfiguration.viewPorts.<viewPortName>.numbersOfColumnsToUse

The number of grid columns to be used by this element for the viewport '<viewPortName>'.

This number goes hard to the '{@numbersOfColumnsToUse}' wildcard from the configuration 'GridContainer.properties.columnClassAutoConfiguration.viewPorts.<viewPortName>.classPattern'

If nothing is set, the {@numbersOfColumnsToUse} will be calculated automatically.

Impact

You are now able to add multiple form elements per row via the API and the form editor.