Jedes <field> in form.xml kombiniert zwei Angaben: formElement (welches Eingabe-Widget) und dataType (welcher Datentyp erwartet wird). Dieses Kapitel geht die wichtigsten Kombinationen durch.

Text und Textarea

<field name="title" formElement="input">
    <settings>
        <dataType>text</dataType>
        <label translate="true">Title</label>
    </settings>
</field>

<field name="message" formElement="textarea">
    <settings>
        <dataType>text</dataType>
        <label translate="true">Message</label>
    </settings>
</field>

WYSIWYG-Editor

Für formatierten Text (HTML) übernimmt Magento_Ui/js/form/element/wysiwyg die Einbindung des TinyMCE-Editors:

<field name="message" formElement="wysiwyg">
    <settings>
        <wysiwygConfigData xsi:type="array">
            <item name="add_variables" xsi:type="boolean">false</item>
            <item name="add_widgets" xsi:type="boolean">false</item>
        </wysiwygConfigData>
        <dataType>text</dataType>
        <label translate="true">Message</label>
        <component>Magento_Ui/js/form/element/wysiwyg</component>
    </settings>
</field>

Select und Boolean

Select-Felder nutzen dieselbe OptionSourceInterface-Klasse wie die Grid-Filter aus Kapitel 6 - eine Quelle der Wahrheit für beide Stellen:

<field name="is_active" formElement="checkbox">
    <settings>
        <valueMap>
            <map name="false" xsi:type="number">0</map>
            <map name="true" xsi:type="number">1</map>
        </valueMap>
        <dataType>boolean</dataType>
        <label translate="true">Enabled</label>
        <dataScope>is_active</dataScope>
    </settings>
    <formElements>
        <checkbox>
            <settings>
                <valueMap>
                    <map name="false" xsi:type="number">0</map>
                    <map name="true" xsi:type="number">1</map>
                </valueMap>
            </settings>
        </checkbox>
    </formElements>
</field>

valueMap übersetzt zwischen dem, was das Häkchen visuell darstellt (true/false), und dem, was tatsächlich in der Datenbank steht (1/0) - ohne diese Zuordnung würde ein deaktiviertes Häkchen als String "false" statt als Integer 0 gespeichert.

Bild-Upload

Ein Upload-Feld braucht neben der XML-Deklaration einen eigenen Upload-Controller, der die Datei entgegennimmt und speichert (Kapitel 16 baut diesen konkret für Kundenstimmen). Die Deklaration selbst:

<field name="image" formElement="imageUploader">
    <settings>
        <dataType>string</dataType>
        <label translate="true">Image</label>
    </settings>
    <formElements>
        <imageUploader>
            <settings>
                <uploaderConfig>
                    <param name="url" xsi:type="url" path="mironsoft_announcement/announcement/upload"/>
                </uploaderConfig>
                <previewTmpl>Magento_Catalog/image-preview</previewTmpl>
                <allowedExtensions>jpg jpeg png gif</allowedExtensions>
                <maxFileSize>2097152</maxFileSize>
            </settings>
        </imageUploader>
    </formElements>
</field>

uploaderConfig>url zeigt auf einen Controller, der \Magento\Framework\File\Uploader nutzt, die Datei validiert (Dateityp, Größe) und im Medienverzeichnis ablegt. Ohne diesen Controller zeigt das Feld nur eine funktionslose Drag-&-Drop-Fläche.

Übersicht: formElement/dataType-Kombinationen

• input / text - einzeiliges Textfeld.
• textarea / text - mehrzeiliges Textfeld.
• wysiwyg / text - formatierter HTML-Editor (TinyMCE).
• select / select - Dropdown mit OptionSourceInterface.
• checkbox / boolean - An/Aus-Häkchen mit valueMap.
• imageUploader / string - Bild-Upload mit Drag & Drop.