Componente pannello a soffietto accordion-component-adaptive-forms-core-component

Il componente core per pannello a soffietto consente agli utenti di creare sezioni espandibili e comprimibili in un modulo adattivo. Viene spesso utilizzato per organizzare e semplificare moduli lunghi o complessi suddividendoli in sezioni più piccole e gestibili. Ogni sezione di un pannello a soffietto è in genere rappresentata da un’intestazione, su cui l’utente può fare clic per espandere o comprimere il contenuto corrispondente. Il contenuto può essere qualsiasi componente core.

esempio

Utilizzo usage

Ci sono diversi motivi per cui è utile includere un pannello a soffietto in un modulo adattivo, tra cui:

  • Risparmio di spazio: un pannello a soffietto consente agli utenti di espandere e comprimere le sezioni di un modulo, riducendo la quantità di spazio necessaria per visualizzare tutti i campi del modulo contemporaneamente.

  • Navigazione: un pannello a soffietto può essere utilizzato per creare una struttura di navigazione gerarchica, facilitando agli utenti la ricerca dei campi modulo necessari.

  • Esperienza utente: il pannello a soffietto può essere utilizzato per rendere il modulo più semplice da usare, fornendo agli utenti un modo chiaro e intuitivo di accedere ai campi del modulo e compilarli.

  • Moduli lunghi: il pannello a soffietto è un componente ideale per gestire i moduli lunghi, in quanto consente agli utenti di concentrarsi su una sezione alla volta, anziché cercare di elaborare molte informazioni contemporaneamente.

Puoi utilizzare:

  • La finestra di dialogo per la configurazione specifica le proprietà del componente pannello a soffietto.

  • La Finestra popover Seleziona pannello definisce l’ordine dei pannelli del pannello a soffietto. Questo consente all’autore di disporre i pannelli nell’ordine in cui dovrebbero essere visualizzati.

  • Opzioni dell’autore di un modulo per abilitare o disabilitare determinate funzioni nella finestra di dialogo di progettazione. Ad esempio, un autore può scegliere di disattivare alcuni campi o sezioni di un modulo. Queste opzioni consentono all’autore di avere un maggiore controllo sulla struttura e sulle funzionalità del modulo, facilitando la creazione di moduli personalizzati in base alle esigenze specifiche dell’organizzazione.

La finestra di dialogo per la configurazione, la finestra di dialogo per la progettazione e la finestra popover seleziona pannello fanno parte dei componenti core creati per semplificare la creazione dei moduli e fornire un modo efficiente per creare moduli complessi.

Versione e compatibilità version-and-compatibility

Il componente core per pannello a soffietto adattivo dei moduli adattivi è stato rilasciato a febbraio 2023 come parte dei componenti core 2.0.4. Questa tabella mostra tutte le versioni supportate, la compatibilità con AEM e i collegamenti alla documentazione corrispondente:

Versione del componente
AEM as a Cloud Service
v1
Compatibile con
versione 2.0.4 e successive

Per informazioni sulle versioni dei componenti core, consulta il documento Versioni dei componenti core.

Dettagli tecnici technical-details

Per informazioni aggiornate sul componente Pannello a soffietto, consulta la documentazione tecnica disponibile su GitHub. Per ulteriori informazioni sullo sviluppo dei componenti core, consulta la Documentazione per gli sviluppatori di componenti core.

Finestra di dialogo per la configurazione configure-dialog

Puoi personalizzare facilmente l’esperienza del pannello a soffietto per i visitatori tramite la finestra di dialogo per la configurazione. È inoltre possibile definire elementi del pannello a soffietto, pannelli, comportamento e aspetto con facilità per un’esperienza utente semplice.

Scheda Base basic-tab

Scheda Base

  • Nome: è possibile identificare facilmente un componente modulo con il suo nome univoco sia nel modulo che nell’editor di regole, ma il nome non deve contenere spazi o caratteri speciali.

  • Titolo : con il relativo titolo è possibile identificare facilmente un componente in un modulo e, per impostazione predefinita, il titolo viene visualizzato sopra il componente. Se non aggiungi un titolo, al posto del testo del titolo viene visualizzato il nome del componente.

  • Consenti testo formattato per titolo: questa funzione permette agli utenti di formattare i titoli in testo normale, incorporando opzioni come il grassetto, il corsivo, il testo sottolineato, vari font, dimensioni dei font, colori e altre opzioni per migliorare la presentazione visiva e la personalizzazione. Offre maggiore flessibilità e controllo creativo nel far risaltare i titoli all’interno di documenti, siti web o applicazioni.
    Dopo aver selezionato la casella di controllo Consenti testo formattato per titolo, le opzioni di formattazione diventano visibili per applicare lo stile al titolo del componente. Per accedere a tutte le opzioni di formattazione disponibili, fai clic sulla scheda Icona schermo intero .

    Supporto testo RTF

  • Nascondi titolo: seleziona l’opzione per nascondere il titolo del componente.

  • Raggruppa dati dei componenti secondari all’invio del modulo (racchiudi dati nell’oggetto): quando questa opzione è selezionata, i dati dei relativi componenti secondari sono nidificati all’interno dell’oggetto JSON del componente principale. Tuttavia, se l’opzione non è selezionata, i dati JSON inviati hanno una struttura semplice, senza alcun oggetto per il componente principale. Ad esempio:

    • Quando l’opzione è selezionata, i dati dei componenti secondari (ad esempio, Via, Città e CAP) vengono nidificati all’interno del componente principale (Indirizzo) come oggetto JSON. In questo modo viene creata una struttura gerarchica e i dati vengono organizzati sotto il componente principale.

      Struttura dei dati inviati:

      code language-json
      { "Address":
      
      { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
      }
      
    • Quando l’opzione non è selezionata, i dati JSON inviati hanno una struttura semplice senza alcun oggetto per il componente principale (Indirizzo). Tutti i dati si trovano allo stesso livello, senza alcuna organizzazione gerarchica.

      Struttura dei dati inviati:

      code language-json
         { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
  • Riferimento di binding: un riferimento di binding è un riferimento a un elemento dati memorizzato in un’origine dati esterna e utilizzato in un modulo. Il riferimento di binding consente di eseguire un binding dinamico dei dati ai campi del modulo, in modo che il modulo possa visualizzare i dati più aggiornati dell’origine dati. Ad esempio, è possibile utilizzare un riferimento di binding per visualizzare il nome e l’indirizzo di un cliente in un modulo, in base all’ID cliente immesso nel modulo. È inoltre possibile utilizzare il riferimento di binding per aggiornare l’origine dati con i dati immessi nel modulo. In questo modo, AEM Forms consente di creare moduli che interagiscono con origini dati esterne, fornendo un’esperienza utente fluida per la raccolta e la gestione dei dati.

  • Nascondi componente: seleziona questa opzione per nascondere il componente del modulo. Il componente rimane accessibile per altri scopi, ad esempio per i calcoli nell’editor di regole. Questa funzione è utile quando devi memorizzare informazioni che non devono essere viste o modificate direttamente dall’utente.

  • Disattiva componente: seleziona questa opzione per disabilitare il componente. Il componente disabilitato non è attivo o modificabile dall’utente finale. L’utente può visualizzare il valore del campo, ma non può modificarlo. Il componente rimane accessibile per altri scopi, ad esempio per i calcoli nell’editor di regole.

  • Sola lettura: seleziona questa opzione per rendere il componente non modificabile. L’utente può visualizzare il valore del campo, ma non può modificarlo. Il componente rimane accessibile per altri scopi, ad esempio per i calcoli nell’editor di regole.

Ripeti pannello a soffietto repeat-accordion

ripeti pannello a soffietto

È possibile utilizzare le opzioni di ripetibilità per duplicare i pannelli a soffietto e i relativi componenti secondari, definire un numero di ripetizioni minimo e massimo e facilitare la replica di sezioni simili all’interno di un modulo. Quando si interagisce con il componente Pannello a soffietto e si accede alle relative impostazioni, vengono visualizzate le seguenti opzioni:

  • Rendi ripetibile il pannello a soffietto: funzione di attivazione/disattivazione che consente agli utenti di abilitare o disabilitare la funzione di ripetibilità.
  • Numero minimo di ripetizioni: stabilisce il numero minimo di volte in cui il pannello a soffietto può essere ripetuto. Il valore zero indica che il pannello a soffietto non è ripetuto; il valore predefinito è zero.
  • Numero massimo di ripetizioni: imposta il numero massimo di ripetizioni del pannello a soffietto. Per impostazione predefinita, questo valore è illimitato.

Per gestire in modo efficace le sezioni ripetibili nel pannello a soffietto, segui i passaggi descritti nell’articolo Creazione di moduli con sezioni ripetibili.

Scheda Elementi items-tab

Scheda Elementi

Il pulsante Aggiungi consente di selezionare un componente da aggiungere come pannello dalla finestra di selezione del componente. Dopo aver aggiunto il componente, puoi vedere le seguenti opzioni:

  • Icona: l’icona identifica il componente del pannello nell’elenco. Passa il puntatore del mouse sull’icona per visualizzare il nome completo del componente come descrizione comando.
  • Descrizione: la descrizione utilizzata come testo del pannello. Per impostazione predefinita, il nome del componente è selezionato per il pannello.
  • Elimina: tocca o fai clic per eliminare il pannello dal componente Pannello a soffietto.
  • Ridisponi: tocca o fai clic e trascina per modificare l’ordine dei pannelli.

Scheda Contenuto Guida help-content

Scheda Contenuto Guida

  • Breve descrizione: una breve descrizione è una breve spiegazione testuale che fornisce informazioni aggiuntive o chiarimenti sullo scopo di un campo modulo specifico. Aiuta l’utente a capire quale tipo di dati deve essere immesso nel campo e può fornire linee guida o esempi per garantire che le informazioni immesse siano valide e soddisfino i criteri desiderati. Per impostazione predefinita, le descrizioni brevi rimangono nascoste. Abilita l’opzione Mostra sempre una breve descrizione per visualizzarla sotto il componente.

  • Mostra sempre una breve descrizione: abilita l’opzione per visualizzare la descrizione breve sotto il componente.

  • Testo guida: il testo guida si riferisce a informazioni o indicazioni aggiuntive fornite all’utente per aiutarlo a compilare correttamente un campo del modulo. Viene visualizzato quando l’utente fa clic sull’icona dell’aiuto (i) posta vicino al componente. Il testo guida fornisce informazioni più dettagliate rispetto all’etichetta o al testo segnaposto di un campo del modulo ed è progettato per consentire all’utente di comprendere i requisiti o i vincoli del campo. Può inoltre offrire suggerimenti o esempi per rendere più semplice e precisa la compilazione del modulo.

Scheda Accessibilità accessibility

Scheda Accessibilità

Nella scheda Accessibilità è possibile impostare i valori per le etichette di accessibilità ARIA del componente. Sono disponibili varie opzioni per l’utilizzo del testo per l’assistente vocale:

  • Testo per utilità per la lettura dello schermo: il testo per le utilità per la lettura dello schermo si riferisce al testo aggiuntivo destinato specificamente ad essere letto da tecnologie di assistenza, come le utilità per la lettura dello schermo, utilizzate da persone ipovedenti. Questo testo fornisce una descrizione audio dello scopo del campo modulo e può includere informazioni sul titolo, la descrizione, il nome del campo ed eventuali messaggi rilevanti (testo personalizzato). Il testo dell’assistente vocale consente di garantire l’accesso al modulo da parte di qualsiasi utente, comprese le persone ipovedenti, consentendo di comprendere appieno il campo del modulo e i relativi requisiti.

    • Testo personalizzato: seleziona questa opzione per utilizzare il testo personalizzato per le etichette di accessibilità ARIA. Selezionando questa opzione, viene visualizzata la finestra di dialogo Testo personalizzato. Puoi aggiungere informazioni rilevanti nella finestra di dialogo Testo personalizzato.
    • Descrizione: seleziona questa opzione per utilizzare la descrizione per le etichette di accessibilità ARIA.
    • Titolo: seleziona questa opzione per utilizzare il titolo per le etichette di accessibilità ARIA.
    • Nome: seleziona questa opzione per utilizzare il nome per le etichette di accessibilità ARIA.
    • Nessuno: seleziona questa opzione in caso tu non voglia aggiungere etichette di accessibilità ARIA.

Finestra di dialogo per la progettazione design-dialog

La finestra di dialogo per la progettazione consente ai creatori di modelli di controllare la modalità di visualizzazione predefinita degli elementi. Per il componente pannello a soffietto dei moduli adattivi, puoi impostare gli elementi seguenti:

  • Tipo di elementi di intestazione HTML consentiti e impostati come predefiniti (ad esempio H1, H2, H3, ecc.)
  • I componenti core che un creatore di moduli può aggiungere al pannello a soffietto nell’editor di moduli adattivi
  • Nomi semplici per gli stili (classi CSS) che possono essere applicati nella finestra di dialogo delle proprietà del componente pannello a soffietto nell’editor di moduli adattivi.

Questo permette di rendere il processo di creazione e personalizzazione dei moduli più semplice ed efficace.

Scheda Proprietà properties-tab-design

La scheda Proprietà consente agli autori del modello di impostare gli elementi di intestazione HTML predefiniti e consentiti per gli autori del modulo:

Scheda proprietà della finestra di dialogo per la progettazione

  • Elementi di intestazione consentiti: un elenco a discesa con più opzioni che consente all’autore del modello di scegliere gli elementi di intestazione del modulo da utilizzare per il pannello a soffietto.

  • Elemento di intestazione predefinito: un elenco a discesa imposta l’elemento intestazione predefinito per il componente a soffietto.

Scheda Componenti Consentiti allowed-components-tab

Scheda Componente consentito della finestra di dialogo per la progettazione

La scheda Componenti consentiti consente all’editor dei modelli di impostare i componenti che possono essere aggiunti come elementi ai pannelli nel componente Pannello a soffietto nell’editor dei moduli adattivi.

Scheda Stili styles-tab

Scheda Proprietà della finestra di dialogo della scheda Stile

La finestra di dialogo per la progettazione consente di definire e gestire gli stili CSS per un componente. Il componente core del pannello a soffietto dei moduli adattivi supporta il Sistema di stili di AEM.

  • Classi CSS predefinite: puoi fornire una classe CSS predefinita per il componente pannello a soffietto.

  • Stili consentiti: puoi definire gli stili fornendo un nome e la classe CSS che rappresenta lo stile. Ad esempio, puoi creare uno stile denominato “testo in grassetto” e fornire la classe CSS “spessore carattere: grassetto”. Puoi utilizzare o applicare questi stili a un modulo adattivo nell’editor di moduli adattivi. Per applicare uno stile, nell’editor dei moduli adattivi, seleziona il componente a cui applicare lo stile, passa alla finestra di dialogo delle proprietà e seleziona lo stile desiderato dall’elenco a discesa Stili. Per aggiornare o modificare gli stili, è sufficiente tornare alla finestra di dialogo per la progettazione, aggiornare gli stili nella scheda Stili e salvare le modifiche.

Proprietà personalizzate

accordion-custom-properties-tab Le proprietà personalizzate consentono di associare attributi personalizzati (coppie chiave-valore) a un componente core del modulo adattivo utilizzando il modello di modulo. Le proprietà personalizzate vengono riflesse nella sezione delle proprietà della rappresentazione headless del componente. Consentono di creare un comportamento di modulo dinamico che si adatta in base ai valori degli attributi personalizzati. Ad esempio, gli sviluppatori possono progettare diverse rappresentazioni di un componente moduli headless su piattaforme mobili, desktop o web, migliorando in modo significativo l’esperienza utente su un’ampia gamma di dispositivi.

  • Nome gruppo: puoi fornire un nome per identificare il gruppo di proprietà personalizzate. È possibile aggiungere, eliminare o ridisporre più gruppi di proprietà personalizzate. Dopo aver aggiunto il gruppo di proprietà personalizzate, puoi visualizzare le seguenti opzioni:

    • Coppie chiave-valore: puoi aggiungere più nomi e valori della proprietà personalizzata facendo clic sul pulsante Aggiungi per ogni gruppo di proprietà personalizzate.

    • Elimina: tocca o fai clic per eliminare il nome e il valore della proprietà personalizzata.

    • Ridisponi: tocca o fai clic e trascina per ridisporre l’ordine del nome e del valore della proprietà personalizzata.

Articoli correlati related-articles

Consulta anche see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c