Component Formulieropties (v1)

Met de component Core Component Form Options kunt u vooraf gedefinieerde opties in verschillende indelingen selecteren.

Gebruik

De component van de Opties van de Vorm van de Component van de Kern staat voor de voorlegging van verschillende types van opties toe die op vele verschillende manieren worden voorgesteld en is bedoeld om samen met de component van de vormcontainer worden gebruikt.

De presentatie van de opties, de etiketten, en de individuele opties kunnen door de inhoudsredacteur in vormen dialoog worden bepaald.

Versie en compatibiliteit

In dit document wordt versie 1 van de component Formulieropties beschreven, die oorspronkelijk is geïntroduceerd met versie 1.0.0 van de Core Components met AEM 6.3.

In de volgende tabel wordt de compatibiliteit van versie 1 van de component Formulieropties weergegeven.

Uitvoer van voorbeeldcomponent

Het volgende voorbeeld wordt genomen uit We.Retail.

Schermafbeelding

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

Dialoogvenster configureren

In het dialoogvenster Configureren kan de auteur van de inhoud het type opties definiëren dat moet worden weergegeven, de labels en de beschikbare opties.

• Typen
  Hoe de opties worden weergegeven

  • Selectievakjes
  • Keuzerondjes
  • Vervolgkeuzelijst
  • Vervolgkeuzelijst Multi-select

• Titel - De titel die als label voor de opties wordt weergegeven

• Naam - De naam van het veld dat met de formuliergegevens is verzonden

• Bron - Waar worden de opties gedefinieerd

  • Lokaal - Gedefinieerd binnen de component
    • Tik of klik op de knop Toevoegen om een waarde toe te voegen, Verwijderen om een waarde te verwijderen
    • Waarde - De waarde die wordt opgeslagen wanneer die optie is geselecteerd bij het verzenden van het formulier
    • Tekst - Het label voor de optie die op het formulier wordt weergegeven
    • Actief - De optie is gemarkeerd als geselecteerd wanneer het formulier wordt geladen
    • Uitgeschakeld - De optie kan niet worden geselecteerd, maar wordt wel weergegeven
    • List - Een statische lijst die elders in AEM is gedefinieerd, wordt gebruikt voor de optie
      • List - Het pad van de statische lijst in AEM
        • Gebruik de Browse knoop om van het lijstmiddel de plaats te bepalen
    • Gegevensbron - Een gegevensbron wordt gebruikt voor de opties
      • Gegevensbron - brontype van de gegevensbron

• Help-bericht - Een tip voor de gebruiker wat in het veld kan worden ingevoerd

Ontwerpdialoogvenster

Er is geen dialoogvenster voor het ontwerp van de component Formulieropties.

Technische details

De recentste technische documentatie over de Component van de Opties van de Vorm kan op GitHub worden gevonden.

Het volledige kerncomponentenproject kan van GitHub worden gedownload.

Meer details over het ontwikkelen van de Componenten van de Kern kunnen in de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.

Business.Adobe.com-bronnen