Formularoptionen-Komponente (v1)

Die Kernkomponente „Formularoptionen“ ermöglicht die Auswahl aus vordefinierten Optionen in verschiedenen Formaten.

Nutzung

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.

Version und Kompatibilität

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.

Musterkomponentenausgabe

Im Folgenden finden Sie ein Beispiel von We.Retail.

Screenshot

HTML

<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>

JSON

"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"
            }

Dialogfeld „Konfigurieren“

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

  • Kontrollkästchen
  • Optionsfelder
  • Dropdown
  • Dropdown für mehrere Auswahlen

• 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

  • Lokal - Definiert in der Komponente
    • Tippen oder klicken Sie auf die Schaltfläche Hinzufügen, um einen Wert hinzuzufügen, und auf Entfernen, um einen Wert zu entfernen.
    • Wert - Der Wert, der gespeichert wird, wenn diese Option beim Senden des Formulars ausgewählt wird.
    • Text - Die Bezeichnung für die Option, die im Formular angezeigt wird
    • Aktiv - Die Option wird als ausgewählt markiert, wenn das Formular geladen wird
    • Deaktiviert - Die Option ist nicht auswählbar, wird aber trotzdem angezeigt
    • Liste - Eine an anderer Stelle in AEM definierte statische Liste wird für die Option verwendet
      • Liste - Der Pfad der statischen Liste in AEM
        • Verwenden Sie die Schaltfläche „Durchsuchen“, um die Listenressource zu finden.
    • Datenquelle - Eine Datenquelle wird für die Optionen verwendet
      • Datenquelle – Der Ressourcentyp der Datenquelle

• Hilfemeldung – Ein Hinweis für den Benutzer dahingehend, was im Feld eingegeben werden kann

Dialogfeld „Design“

Es gibt kein Dialogfeld „Design“ für die Formularoptionen-Komponente.

Technische Details

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.