Die Kernkomponente „Formularoptionen“ ermöglicht die Auswahl aus vordefinierten Optionen in verschiedenen Formaten.
Die Kernkomponente „Formularoptionen-Komponente“ ermöglicht die Übermittlung verschiedener Arten von Optionen, die auf vielerlei Arten präsentiert werden und die zusammen mit der Formular-Container-Komponente verwendet werden sollten.
Die Darstellung der Optionen, Beschriftungen und individuellen Optionen kann vom Inhaltseditor im Dialogfeld Konfigurieren definiert werden.
In diesem Dokument wird die v1 der Formularoptionen-Komponente beschrieben, die ursprünglich mit Version 1.0.0 der Kernkomponenten mit AEM 6.3 eingeführt wurde.
In der folgenden Tabelle ist die Kompatibilität von v1 der Formularoptionen-Komponente aufgeführt.
Komponentenversion | AEM 6.3 | AEM 6.4 |
---|---|---|
v2 | Kompatibel | Kompatibel |
v1 | Kompatibel | Kompatibel |
In diesem Dokument wird die v1 der Formularoptionen-Komponente beschrieben.
Weitere Informationen zur aktuellen Version der Formularoptionen-Komponente finden Sie im Dokument Formularoptionen-Komponente.
Im Folgenden finden Sie ein Beispiel von We.Retail.
<div class="cmp cmp-form aem-GridColumn aem-GridColumn--default--12">
<form method="POST" action="/content/we-retail/us/en/experience.html" id="new_form" name="new_form" enctype="multipart/form-data" class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<input type="hidden" name=":formstart" value="/content/we-retail/us/en/experience/jcr:content/root/responsivegrid/container">
<div class="cmp cmp-options aem-GridColumn aem-GridColumn--default--12">
<fieldset class="form-group checkbox">
<legend>What is your favorite type of toast?</legend>
<div class="checkbox-item">
<label>
<input type="checkbox" name="toasttypes" value="dry">
Plain dry toast
</label>
</div>
<div class="checkbox-item">
<label>
<input type="checkbox" name="toasttypes" value="french">
French toast
</label>
</div>
<div class="checkbox-item">
<label>
<input type="checkbox" name="toasttypes" value="texas">
Texas toast
</label>
</div>
</fieldset>
</div>
</form></div>
"container": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"columnCount": 12,
"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
":items": {
"options": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
":type": "weretail/components/form/options",
"name": "toastTypes",
"jcr:title": "What is your favorite type of toast?",
"source": "local",
"type": "checkbox"
}
},
":itemsOrder": [
"options"
],
":type": "weretail/components/form/container"
}
Für JSON-Exporte aus den Kernkomponenten ist Version 1.1.0 der Kernkomponenten erforderlich. Weitere Informationen finden Sie in den Kompatibilitätsinformationen für Kernkomponenten v1.
Im Dialogfeld „Konfigurieren“ kann der Inhaltsautor den Typ der Optionen festlegen, die angezeigt werden sollen, Beschriftungen definieren und festlegen, welche Optionen verfügbar sind.
Typ
Wie die Optionen angezeigt werden
Titel - Der Titel, der als Beschriftung für die Optionen angezeigt wird
Name - Der Name des mit den Formulardaten gesendeten Felds
Quelle - Wo die Optionen definiert sind
Hilfemeldung – Ein Hinweis für den Benutzer dahingehend, was im Feld eingegeben werden kann
Es gibt kein Dialogfeld „Design“ für die Formularoptionen-Komponente.
Die neueste technische Dokumentation zur Formularoptionen-Komponente finden Sie auf GitHub.
Das gesamte Kernkomponentenprojekt kann von GitHub heruntergeladen werden.
Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.