Show Menu
TOPICS×

Componente Opzioni modulo

Il componente Opzioni modulo per componenti core consente la selezione da opzioni predefinite in vari formati.

Utilizzo

Il componente Opzioni modulo per componenti core consente di inviare diversi tipi di opzioni presentate in diversi modi e deve essere utilizzato insieme al componente Contenitore modulo.
La presentazione delle opzioni, delle etichette e delle singole opzioni può essere definita dall'editor di contenuti nella finestra di dialogo di configurazione.

Versione e compatibilità

La versione corrente del componente Opzioni modulo è v2, introdotto con la release 2.0.0 dei componenti core nel gennaio 2018, ed è descritto in questo documento.
La tabella seguente elenca tutte le versioni supportate del componente, le versioni AEM con cui sono compatibili le versioni del componente e i collegamenti alla documentazione delle versioni precedenti.
Versione componente
AEM 6.3
AEM 6.4
AEM 6.5
v2
Compatibile
Compatibile
Compatibile
Compatibile
Compatibile
Compatibile
Per ulteriori informazioni sulle versioni e sulle versioni dei componenti core, consulta il documento Versioni dei componenti core.

Output componente di esempio

Esempio tratto da We.Retail .

Schermata

HTML

<form method="POST" action="/content/we-retail/us/en/experience.html" id="new_form" name="new_form" enctype="multipart/form-data" class="cmp-form 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="hidden aem-GridColumn aem-GridColumn--default--12"> <input type="hidden" id="form-hidden-66464844" name="hidden"> </div> <div class="hidden aem-GridColumn aem-GridColumn--default--12"> <input type="hidden" id="form-hidden-858231075" name="hidden"> </div> <div class="hidden aem-GridColumn aem-GridColumn--default--12"> <input type="hidden" id="form-hidden-862566768" name="hidden"> </div> <div class="container responsivegrid aem-GridColumn aem-GridColumn--default--12"> <input type="hidden" name=":formstart" value="/content/we-retail/us/en/experience/jcr:content/root/responsivegrid/container/container"> <div class="options aem-GridColumn aem-GridColumn--default--12"> <fieldset class="cmp-form-options"> <legend class="cmp-form-options__legend">What is your favorite type of toast?</legend> <label class="cmp-form-options__field-label"> <input class="cmp-form-options__field cmp-form-options__field--radio" type="radio" name="favToast" value="dryToast"> Plain dry toast </label> <label class="cmp-form-options__field-label"> <input class="cmp-form-options__field cmp-form-options__field--radio" type="radio" name="favToast" value="frenchToast"> French Toast </label> <label class="cmp-form-options__field-label"> <input class="cmp-form-options__field cmp-form-options__field--radio" type="radio" name="favToast" value="texasToast"> Texas Toast </label> </fieldset> </div> </div></form>

JSON

"container":{ "columnClassNames":"aem-GridColumn aem-GridColumn--default--12", "columnCount":12, "gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12", ":items":{ "options_816658469":{ "columnClassNames":"aem-GridColumn aem-GridColumn--default--12", "id":"form-options-269951232", "title":"What is your favorite type of toast?", "name":"favToast", "type":"RADIO", "items":[ { "value":"dryToast", "text":"Plain dry toast", "selected":false, "disabled":false }, { "value":"frenchToast", "text":"French Toast", "selected":false, "disabled":false }, { "value":"texasToast", "text":"Texas Toast", "selected":false, "disabled":false } ], ":type":"core/wcm/sandbox/components/form/options/v2/options" } }, ":itemsOrder":[ "options_816658469" ], ":type":"core/wcm/sandbox/components/form/container/v2/container" }

Dettagli tecnici

La documentazione tecnica più recente sul componente Opzioni modulo è disponibile su GitHub .
Per ulteriori informazioni sullo sviluppo dei componenti core, consulta la documentazione per lo sviluppatore di componenti core.

Configura finestra di dialogo

La finestra di dialogo di configurazione consente all’autore del contenuto di definire il tipo di opzioni da presentare, le etichette e le opzioni disponibili.
  • Tipi
    - Modalità di presentazione delle opzioni
    • Caselle di controllo
    • Pulsanti di scelta
    • A discesa
    • Menu a discesa a selezione multipla
  • Titolo
    Titolo che verrà visualizzato come etichetta per le opzioni
  • Nome
    Il nome del campo inviato con i dati del modulo
  • Origine
    Dove sono definite le opzioni
    • Locale
      definito nel componente
      • Toccate o fate clic sul pulsante
        Aggiungi
        per aggiungere un valore,
        Elimina
        per rimuovere un valore
      • Valore
        Il valore salvato quando l'opzione viene selezionata all'invio del modulo
      • Testo
        Etichetta per l'opzione visualizzata sul modulo
      • Attivo
        L'opzione è contrassegnata come selezionata al caricamento del modulo
      • Disattivato
        L'opzione non è selezionabile ma continua a essere visualizzata
      • Elenco
        Per le opzioni viene utilizzato un elenco statico definito altrove in AEM
        • Elenco
          Percorso dell’elenco statico in AEM
          • Utilizzare il pulsante Sfoglia per individuare la risorsa dell'elenco
      • Origine
        dati Un'origine dati viene utilizzata per le opzioni
        • Origine
          dati Tipo di risorsa dell'origine dati
  • Messaggio
    della Guida Un suggerimento per l'utente di ciò che può essere immesso nel campo

Finestra di dialogo Progettazione

Scheda Stili

Il componente Opzioni modulo supporta AEM Style System .