Componente Opzioni modulo (v1)

Il componente core Opzioni modulo consente la selezione di opzioni predefinite in vari formati.

Utilizzo

Il componente core Opzioni modulo consente di inviare diversi tipi di opzioni visualizzate in molti modi differenti ed è concepito per essere utilizzato insieme al componente Contenitore modulo.

La visualizzazione delle opzioni, delle etichette e delle singole opzioni può essere definita dall’editor di contenuto nella finestra di dialogo per configurazione.

Versione e compatibilità

Questo documento descrive la versione 1 del componente Opzioni modulo, originariamente introdotto con la versione 1.0.0 dei Componenti core in AEM 6.3.

La tabella che segue riporta la compatibilità della versione 1 del componente Opzioni modulo.

Esempio di output del componente

Di seguito è riportato un esempio tratto da We.Retail.

Schermata

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

Finestra di dialogo per configurazione

La finestra di dialogo per configurazione consente all’autore di contenuto di definire il tipo di opzioni da visualizzare, le etichette e le opzioni disponibili.

• Tipo
  Modalità di presentazione delle opzioni

  • Caselle di controllo
  • Pulsanti di scelta
  • Elenchi a discesa
  • Elenchi a discesa a selezione multipla

• Titolo: il titolo che verrà visualizzato come etichetta per le opzioni

• Nome: il nome del campo che viene inviato con i dati del modulo

• Origine: dove sono definite le opzioni

  • Locale: definito all’interno del componente
    • Tocca o fai clic sul pulsante Aggiungi per aggiungere un valore o sul pulsante Elimina per rimuovere un valore
    • Valore: valore salvato quando l’opzione viene selezionata al momento dell’invio del modulo
    • Testo: l’etichetta dell’opzione visualizzata sul modulo
    • Attiva: l’opzione viene contrassegnata come selezionata al caricamento del modulo
    • Disattivato: l’opzione non è selezionabile ma è ancora visualizzata
    • Elenco: per l’opzione viene utilizzato un elenco statico definito altrove in AEM
      • Elenco: il percorso dell’elenco statico in AEM
        • Utilizza il pulsante Sfoglia per individuare la risorsa elenco
    • Origine dati: un’origine dati utilizzata per le opzioni
      • Origine dati: tipo di risorsa dell’origine dati

• Messaggio di aiuto: suggerimento per l’utente per la compilazione del campo

Finestra di dialogo per progettazione

La finestra di dialogo per progettazione non è disponibile per il componente Opzioni modulo.

Dettagli tecnici

La documentazione tecnica più recente sul componente Opzioni modulo è disponibile su GitHub.

L’intero progetto dei Componenti core può essere scaricato da GitHub.

Per ulteriori informazioni sullo sviluppo di Componenti core, vedi la documentazione per gli sviluppatori di Componenti core.

Risorse Business.Adobe.com