[BUGFIX] EXT:form - set maximum field length as attribute "maxlength"
[Packages/TYPO3.CMS.git] / typo3 / sysext / core / Documentation / Changelog / master / Feature-80196-ExtFormSupportMultipleFormElementsPerRow.rst
1 .. include:: ../../Includes.txt
2
3 ====================================================================
4 Feature: #80196 - EXT:form - support multiple form elements per row
5 ===================================================================
6
7 See :issue:`80196`
8
9
10 Description
11 ===========
12
13 Two new form element types have been added to the form framework:
14
15 * GridContainer
16 * GridRow
17
18 Using these 'container' form elements will enable you to define multiple form elements per row.
19
20 Example:
21
22 .. code-block:: typoscript
23
24 type: Form
25 identifier: example-form-gridcontainer
26 label: 'Form Grid Container'
27 prototypeName: standard
28 renderables:
29 -
30 type: Page
31 identifier: page-1
32 label: Page
33 renderables:
34 -
35 type: GridContainer
36 identifier: gridcontainer-2
37 label: 'Grid: Container'
38 renderables:
39 -
40 type: GridRow
41 identifier: gridrow-2
42 label: 'Grid: Row'
43 renderables:
44 -
45 type: SingleSelect
46 identifier: singleselect-1
47 label: 'Single select'
48 properties:
49 gridColumnClassAutoConfiguration:
50 viewPorts:
51 xs:
52 numbersOfColumnsToUse: 12
53 lg:
54 numbersOfColumnsToUse: 2
55 -
56 type: Text
57 identifier: text-1
58 label: Text
59 properties:
60 gridColumnClassAutoConfiguration:
61 viewPorts:
62 xs:
63 numbersOfColumnsToUse: 6
64 lg:
65 numbersOfColumnsToUse: 5
66 -
67 type: MultiSelect
68 identifier: multiselect-1
69 label: 'Multi select'
70 properties:
71 gridColumnClassAutoConfiguration:
72 viewPorts:
73 xs:
74 numbersOfColumnsToUse: 6
75 sm:
76 numbersOfColumnsToUse: 5
77 -
78 type: GridContainer
79 identifier: gridcontainer-1
80 label: 'Grid: Container'
81 renderables:
82 -
83 type: GridRow
84 identifier: gridrow-1
85 label: 'Grid: Row'
86 renderables:
87 -
88 type: Password
89 identifier: password-1
90 label: Password
91
92 Per default, the resulting markup is compatible to Twitter Bootstrap.
93
94 The following options are available now:
95
96 .. code-block:: typoscript
97
98 GridContainer:
99 ...
100 properties:
101 columnClassAutoConfiguration:
102 gridSize: 12
103 viewPorts:
104 xs:
105 classPattern: 'col-xs-{@numbersOfColumnsToUse}'
106 sm:
107 classPattern: 'col-sm-{@numbersOfColumnsToUse}'
108 md:
109 classPattern: 'col-md-{@numbersOfColumnsToUse}'
110 lg:
111 classPattern: 'col-lg-{@numbersOfColumnsToUse}'
112
113 and
114
115 .. code-block:: typoscript
116
117 <formElementIdentifier>:
118 ...
119 properties:
120 gridColumnClassAutoConfiguration:
121 viewPorts:
122 xs:
123 numbersOfColumnsToUse: 12
124 ...
125 lg:
126 numbersOfColumnsToUse: 2
127
128
129 GridContainer.properties.columnClassAutoConfiguration
130 -----------------------------------------------------
131
132 The example form definition shown above generates the following HTML markup
133
134 .. code-block:: html
135
136 <div class="container">
137 <div class="row">
138 <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
139 ...
140 </div>
141 <div class="col-xs-6 col-sm-3 col-md-4 col-lg-5">
142 ...
143 </div>
144 <div class="col-xs-6 col-sm-5 col-md-4 col-lg-5">
145 ...
146 </div>
147 </div>
148 </div>
149
150
151 GridContainer.properties.columnClassAutoConfiguration.gridSize
152 --------------------------------------------------------------
153
154 Total amount of grid columns (default: 12).
155
156
157 GridContainer.properties.columnClassAutoConfiguration.viewPorts.<viewPortName>.classPattern
158 -------------------------------------------------------------------------------------------
159
160 This pattern will be used to generate the HTML class atrribute values for each viewport.
161 The wildcard '{@numbersOfColumnsToUse}' will be replaced with the calculated grid column numbers.
162 At the end, all 'classPattern' items for each viewport will be merged together
163 and written into the class attribute of each form element (all form elements within a 'GridRow').
164
165 The calculation depends on the option 'gridSize', the amount of the form elements within the
166 'GridRow' form element and the optional option 'gridColumnClassAutoConfiguration' from the
167 form element configurations.
168
169
170 <formElementIdentifier>.properties.gridColumnClassAutoConfiguration (otional)
171 -----------------------------------------------------------------------------
172
173 Each form elements within a 'GridRow' element can define the number of grid columns
174 to use on a 'per viewport' base.
175
176
177 <formElementIdentifier>.properties.gridColumnClassAutoConfiguration.viewPorts.<viewPortName>
178 --------------------------------------------------------------------------------------------
179
180 The array keys '<viewPortName>' must match with the array keys '<viewPortName>'
181 from the configuration 'GridContainer.properties.columnClassAutoConfiguration.viewPorts.<viewPortName>'
182
183
184 <formElementIdentifier>.properties.gridColumnClassAutoConfiguration.viewPorts.<viewPortName>.numbersOfColumnsToUse
185 ------------------------------------------------------------------------------------------------------------------
186
187 The number of grid columns to be used by this element for the viewport '<viewPortName>'.
188
189 This number goes hard to the '{@numbersOfColumnsToUse}' wildcard from the configuration
190 'GridContainer.properties.columnClassAutoConfiguration.viewPorts.<viewPortName>.classPattern'
191
192 If nothing is set, the {@numbersOfColumnsToUse} will be calculated automatically.
193
194
195 Impact
196 ======
197
198 You are now able to add multiple form elements per row via the API and the form editor.
199
200
201 .. index:: Backend, Frontend, ext:form