Tabelle nei moduli adattivi tables-in-adaptive-forms
L’utilizzo delle tabelle rappresenta un modo efficace, semplificato e organizzato di presentare dati complessi. Consente agli utenti di identificare facilmente le informazioni e fornire gli input in una disposizione ordinata di righe e colonne. La maggior parte dei moduli dei servizi finanziari e delle organizzazioni governative richiede tabelle di dati di grandi dimensioni per inserire numeri ed eseguire calcoli.
AEM Forms fornisce un componente Tabella nel browser Componenti nella barra laterale che consente di creare tabelle nei moduli adattivi. Alcune delle funzionalità chiave che offre sono:
- Layout reattivo su dispositivi mobili
- Righe e colonne configurabili
- Aggiunta e eliminazione dinamiche delle righe in fase di runtime
- Combinare o unire celle e dividerle
- Accessibile dagli assistenti vocali
- Layout personalizzato con CSS
- Compatibile e mappato con il componente tabella XDP
- Supporto per l'aggiunta di righe o celle utilizzando elementi di tipo complesso XSD
- Unione di dati da un file XML
Creare una tabella create-a-table
Per creare una tabella, trascinate il componente Tabella dal browser Componenti nella barra laterale del modulo adattivo. Per impostazione predefinita, la tabella contiene due colonne e tre righe, inclusa la riga di intestazione.
Informazioni sulle celle di intestazione e corpo about-header-and-body-cells
Le celle di intestazione sono campi di testo. Per modificare l’etichetta di un’intestazione, fai clic con il pulsante destro del mouse sulla cella di intestazione e fai clic su Modifica. Nella finestra di dialogo Modifica , aggiorna l’etichetta nel Valore campo e fai clic su OK.
Per impostazione predefinita, le celle corpo sono caselle di testo. È possibile sostituire una cella corpo con qualsiasi altro componente di moduli adattivi disponibile nella barra laterale, ad esempio una casella numerica, un selettore data o un elenco a discesa.
Ad esempio, la prima riga corpo della tabella seguente include come celle i componenti casella di testo, selezione data e elenco a discesa.
Per unire due o più celle corpo, selezionare le celle da unire, fare clic con il pulsante destro del mouse e selezionare Unisci. Inoltre, è possibile dividere una cella unita facendo clic con il pulsante destro del mouse e selezionando Dividi celle.
Aggiungi, elimina, sposta righe e colonne add-delete-move-rows-and-columns
È possibile aggiungere ed eliminare una riga o una colonna e spostare una riga verso l’alto o il basso all’interno di una tabella.
Per aggiungere o eliminare una riga o una colonna o spostare una riga, fare clic su una cella della riga o della colonna. Nella parte superiore della colonna e a sinistra della riga viene visualizzato un menu a discesa. Il menu in alto fornisce le opzioni per aggiungere o eliminare la colonna, mentre il menu a sinistra consente di aggiungere, eliminare o spostare la riga.
- L’operazione Aggiungi aggiunge una riga sotto o una colonna a destra della riga o colonna selezionata.
- L’operazione Elimina elimina la riga o la colonna selezionata.
- L’operazione Sposta su e Sposta giù sposta la riga selezionata verso l’alto o verso il basso.
Il menu a discesa della riga fornisce inoltre l’operazione Modifica per modificare le proprietà, le impostazioni e le opzioni di stile della riga.
Impostare la larghezza della colonna per una tabella set-column-width
Esegui i seguenti passaggi per impostare la larghezza della colonna per una tabella:
-
In Contenuto tocca Tabella e tocca Configura (
-
Inserisci l’elenco di valori separati da virgole nel Larghezza colonna per specificare la larghezza proporzionale di ciascuna colonna della tabella. Ad esempio, per una tabella che include 3 colonne, specificando 2,4,6 come valore nel Larghezza colonna il campo restituisce come valore di larghezza le colonne 2/12 per la prima colonna, 4/12 per la seconda colonna e 6/12 per la terza colonna. 2/12 in quanto la larghezza della prima colonna si riferisce a un sesto della larghezza della tabella. Analogamente, 4/12 imposta la seconda larghezza della colonna come un terzo della larghezza della tabella e 6/12 imposta la terza larghezza della colonna come metà della larghezza della tabella.
Aggiungi descrizione tabella add-table-description
È possibile aggiungere una descrizione della tabella per spiegare come sono organizzate le informazioni che gli assistenti vocali possono interpretare e leggere. Per aggiungere la descrizione:
- Seleziona la tabella e tocca
- Specificare il riepilogo nella scheda Accessibilità.
- Fai clic su Fine.
Configurare lo stile di tabella configure
È possibile definire lo stile di una tabella utilizzando la modalità Stile nella barra degli strumenti della pagina. Esegui i seguenti passaggi per passare alla modalità stile e modificare lo stile della tabella
-
Nella barra degli strumenti della pagina, prima di Anteprima, tocca
-
Nella barra laterale seleziona la tabella e tocca il pulsante di modifica
Le proprietà di stile vengono visualizzate nella barra laterale.
Aggiungere o eliminare una riga in modo dinamico add-or-delete-a-row-dynamically
Le tabelle forniscono supporto predefinito per l’aggiunta o l’eliminazione dinamica di righe in fase di runtime.
- Seleziona una riga di tabella e tocca
- Nella scheda Ripeti impostazioni specificare i conteggi minimo e massimo per limitare il numero di righe nella tabella.
- Fai clic su Fine.
In fase di esecuzione, vedrai + e - per aggiungere o eliminare una riga.
Espressioni in una tabella expressions-in-a-table
Le tabelle nei moduli adattivi consentono di scrivere espressioni in JavaScript per indurre comportamenti come mostrare o nascondere una tabella o una riga, sommare tutti i numeri e mostrare il totale in una cella, abilitare o disabilitare una cella, convalidare l’input dell’utente e così via. Queste espressioni utilizzano API per modelli di script di moduli adattivi.
Mentre tabelle e righe supportano solo espressioni di visibilità per controllarne la visibilità in base al valore restituito da un'espressione, le celle supportano le seguenti espressioni:
- Script di inizializzazione: per eseguire un'azione sull'inizializzazione di un campo.
- Script di commit dei valori: per modificare i componenti di un modulo dopo la modifica del valore di un campo.
- Calcolare espressioni: per calcolare automaticamente il valore di un campo.
- Espressioni di convalida: per convalidare un campo.
- Espressioni di accesso: per abilitare/disabilitare un campo.
- Espressione di visibilità: per controllare la visibilità di un campo e di un pannello.
L’espressione di visibilità per una tabella o una riga può essere definita nella scheda Proprietà pannello della finestra di dialogo corrispondente del componente Modifica . Le espressioni per una cella possono essere definite nella scheda Script della finestra di dialogo del componente Modifica.
Per l’elenco completo delle classi, degli eventi, degli oggetti e delle API pubbliche dei moduli adattivi, consulta Riferimento API della libreria JavaScript per i moduli adattivi.
Layout dei dispositivi mobili mobile-layouts
Le tabelle nei moduli adattivi offrono ai dispositivi mobili un’esperienza senza pari a causa dei layout fluidi e reattivi. AEM Forms offre due tipi di layout per dispositivi mobili per le tabelle: intestazioni a sinistra e colonne comprimibili.
Puoi configurare un layout mobile per una tabella dalla scheda Stile della finestra di dialogo Modifica componente per una tabella.
Intestazioni a sinistra headers-on-left
Nel layout Intestazioni a sinistra, l’intestazione della tabella viene trasposta a sinistra con una sola cella che appare su un’intestazione. Ogni riga in questo layout viene visualizzata come una sezione distinta. Le immagini seguenti confrontano una tabella su un desktop con quella su un dispositivo mobile.
Figura: Vista desktop di una tabella con layout Intestazione a sinistra
Figura: Visualizzazione mobile di una tabella con layout Intestazione a sinistra
Layout delle colonne comprimibili collapsible-columns-layout
Nel layout a colonne comprimibili, le colonne della tabella vengono compresse per mostrare una o due colonne, a seconda delle dimensioni del dispositivo, mentre le altre colonne vengono compresse. È possibile fare clic sull’icona di compressione/espansione per visualizzare altre colonne della tabella.
Le immagini seguenti confrontano l’aspetto di una tabella su un dispositivo con colonne compresse ed espanse.
Figura: Colonne compresse di una tabella con solo due colonne visualizzate su un dispositivo mobile
Figura: Colonna espansa di una tabella su un dispositivo mobile
Unione di dati in una tabella merge-data-in-a-table
Le tabelle nei moduli adattivi consentono di compilare la tabella in fase di esecuzione utilizzando i dati di un file XML. Il file XML di dati può trovarsi nel file system locale del computer in cui è in esecuzione il server AEM Forms o nell'archivio CRX.
Esempio della seguente tabella di riepilogo delle transazioni bancarie che si desidera compilare con i dati di un file XML.
In questo esempio, la proprietà Nome elemento per:
- la riga è Riga1
- la cella corpo in Data transazione è tableItem1
- la cella corpo sotto Descrizione è tableItem2
- la cella corpo sotto il tipo di transazione è type
- la cella corpo sotto Importo in USD è tableItem3
File XML contenente i dati nel formato seguente:
<?xml version="1.0" encoding="UTF-8"?><afData>
<afUnboundData>
<data>
<typeSelect>0</typeSelect>
<Row1>
<tableItem1>2015-01-08</tableItem1>
<tableItem2>Purchase laptop</tableItem2>
<type>0</type>
<tableItem3>12000</tableItem3>
</Row1>
<Row1>
<tableItem1>2015-01-05</tableItem1>
<tableItem2>Transport expense</tableItem2>
<type>0</type>
<tableItem3>120</tableItem3>
</Row1>
<Row1>
<tableItem1>2014-01-08</tableItem1>
<tableItem2>Laser printer</tableItem2>
<type>0</type>
<tableItem3>500</tableItem3>
</Row1>
<Row1>
<tableItem1>2014-12-08</tableItem1>
<tableItem2>Credit card payment</tableItem2>
<type>0</type>
<tableItem3>300</tableItem3>
</Row1>
<Row1>
<tableItem1>2015-01-06</tableItem1>
<tableItem2>Interest earnings</tableItem2>
<type>1</type>
<tableItem3>12000</tableItem3>
</Row1>
<Row1>
<tableItem1>2015-01-05</tableItem1>
<tableItem2>Payment from a client</tableItem2>
<type>1</type>
<tableItem3>500</tableItem3>
</Row1>
<Row1>
<tableItem1>2015-01-08</tableItem1>
<tableItem2>Food expense</tableItem2>
<type>0</type>
<tableItem3>120</tableItem3>
</Row1>
</data>
</afUnboundData>
<afBoundData>
<data/>
</afBoundData>
<afBoundData/>
</afData>
Nell’XML di esempio, i dati di una riga sono definiti dalla variabile <Row1> tag, che è il nome dell’elemento per la riga nella tabella. All'interno di <Row1> i dati di ogni cella vengono definiti all’interno del tag per il nome dell’elemento, ad esempio <tableItem1>, <tableItem2>, <tableItem3>e <type>.
Per unire questi dati alla tabella in fase di runtime, è necessario indirizzare il modulo adattivo contenente la tabella al percorso XML assoluto con wcmmode disattivato. Ad esempio, se il modulo adattivo si trova in http://localhost:4502/myForms/bankTransaction.html e il file XML di dati viene salvato in C:/myTransactions/bankSummary.xml, puoi visualizzare la tabella con i dati al seguente URL:
http://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled
Utilizzare componenti XDP e tipi complessi XSD use-xdp-components-and-xsd-complex-types
Se hai creato un modulo adattivo basato su un modello di modulo XFA, gli elementi XFA sono disponibili nella scheda Modello dati di AEM Content Finder. Puoi trascinare questi elementi XFA, incluse le tabelle, nel modulo adattivo.
L’elemento di tabella XFA è mappato sul componente Tabella e funziona preconfigurato nei moduli adattivi. Tutte le proprietà e le funzionalità della tabella XDP vengono mantenute quando vengono spostate in forma adattiva e puoi eseguire qualsiasi operazione su di essa, proprio come per la tabella di moduli adattivi nativi. Ad esempio, se una riga in una tabella XDP è contrassegnata come ripetibile, viene ripetuta anche quando viene rilasciata in moduli adattivi.
È inoltre possibile trascinare il sottomodulo XDP per aggiungere una nuova riga nella tabella. Tuttavia, il rilascio di un sottomodulo nidificato non funziona.
Inoltre, puoi trascinare un gruppo di elementi di tipo complesso XSD per creare una riga di tabella. Viene creata una nuova riga immediatamente sotto la riga in cui sono stati rilasciati gli elementi. Le celle create utilizzando gli elementi di tipo complesso XSD mantengono un riferimento di binding a XSD. È inoltre possibile sostituire una cella corpo con un elemento di tipo complesso XSD rilasciando l'elemento sulla cella.
Considerazioni fondamentali key-considerations
-
Se si spostano le righe in alto e in basso durante l’authoring di una tabella basata su XSD, alcuni dati persi dalle righe di tabella vengono visualizzati nell’XML dati generato all’invio del modulo.
-
A ogni cella corpo di una tabella predefinita è associato un nome di elemento predefinito. Se si aggiunge un’altra tabella nel modulo adattivo, le celle del corpo predefinite nella nuova tabella avranno lo stesso nome di elemento della prima tabella. In questo caso, i dati generati al momento dell’invio del modulo includeranno i dati nelle celle corpo predefinite di una sola tabella. Assicurati pertanto di rinominare i nomi degli elementi per le celle corpo predefinite in modo da mantenerle univoche tra le tabelle ed evitare la perdita di dati.
Si noti che questo è applicabile solo alle celle corpo predefinite. Se si aggiungono più righe o colonne a una tabella, verranno generati automaticamente nomi di elementi univoci per le celle corpo non predefinite.