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 provenienti da servizi finanziari e 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 in moduli adattivi. Alcune delle funzionalità chiave che fornisce sono:
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.
Le celle di intestazione sono campi di testo. Per modificare l'etichetta di un'intestazione, fare clic con il pulsante destro del mouse sulla cella di intestazione e scegliere Modifica. Nella finestra di dialogo Modifica, aggiornare l'etichetta nel campo Valore e fare clic su OK.
Per impostazione predefinita, le celle corpo sono caselle di testo. È possibile sostituire una cella corpo con qualsiasi altro componente di modulo adattivo disponibile nella barra laterale, ad esempio una casella numerica, un selettore data o un elenco a discesa.
Ad esempio, la prima riga corpo nella 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 Merge. È inoltre possibile dividere una cella unita facendo clic con il pulsante destro del mouse e selezionando Dividi celle.
È 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 colonna. Nella parte superiore della colonna e a sinistra della riga viene visualizzato un menu a discesa. Il menu in alto contiene opzioni per aggiungere o eliminare la colonna, mentre il menu a sinistra consente di aggiungere, eliminare o spostare la riga.
Il menu a discesa della riga fornisce inoltre l'operazione Modifica per modificare le proprietà, le impostazioni e le opzioni di stile della riga.
Anche se è possibile aggiungere un numero qualsiasi di righe in una tabella, il numero massimo di colonne è sei. Inoltre, non è possibile eliminare la riga di intestazione dalla tabella.
Per impostare la larghezza della colonna per una tabella, procedere come segue:
Nella scheda Contenuto, toccate il componente Tabella e toccate l'icona Configura ().
Immettere l'elenco di valori separati da virgola nel campo 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 campo Larghezza colonna si ottiene l'impostazione della larghezza delle colonne come 2/12 per la prima colonna, 4/12 per la seconda colonna e 6/12 per la terza colonna. 2/12 come la larghezza per la prima colonna fa riferimento 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.
È possibile aggiungere una descrizione della tabella per spiegare in che modo le informazioni sono organizzate che gli assistenti vocali possono interpretare e leggere. Per aggiungere la descrizione:
È possibile definire lo stile di una tabella utilizzando la modalità Stile nella barra degli strumenti della pagina. Per passare alla modalità di stile e modificare lo stile della tabella, procedere come segue.
Nella barra degli strumenti della pagina, prima di Preview, toccare > Style.
Nella barra laterale selezionate la tabella e toccate il pulsante di modifica .
Potete visualizzare le proprietà di stile nella barra laterale.
È possibile modificare il tema colore per le righe di intestazione e le righe corpo modificando i valori delle variabili LESS. Per ulteriori informazioni, vedere Temi in AEM Forms.
Le tabelle forniscono supporto out-of-the-box per l'aggiunta o l'eliminazione dinamica di righe in fase di esecuzione.
In fase di esecuzione, saranno visualizzati i pulsanti +
e -
per aggiungere o eliminare una riga.
L'aggiunta o l'eliminazione dinamica di una riga non è supportata nelle intestazioni nel layout mobile sinistro delle tabelle.
Le tabelle nei moduli adattivi consentono di scrivere espressioni in JavaScript per indurre comportamenti quali mostrare o nascondere una tabella o una riga, sommare tutti i numeri e mostrare il totale in una cella, attivare o disattivare una cella, convalidare l'input dell'utente e così via. Queste espressioni utilizzano le API del modello di script dei moduli adattivi.
Mentre tabelle e righe supportano solo le espressioni di visibilità per controllarne la visibilità in base al valore restituito da un'espressione, le celle supportano le seguenti espressioni:
Se lo script XFA change/exit è applicato anche allo stesso campo, lo script XFA change/exit viene eseguito prima dello script Value Commit.
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, vedere Riferimento API della libreria JavaScript per i moduli adattivi.
Le tabelle nei moduli adattivi offrono un'esperienza senza confronti per i dispositivi mobili grazie ai layout fluidi e reattivi. AEM Forms offre due tipi di layout mobili per le tabelle: Intestazioni sulle colonne sinistra e Comprimibili.
È possibile configurare un layout mobile per una tabella dalla scheda Stile della finestra di dialogo del componente Modifica per una tabella.
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.
desktopViewFigura:Vista desktop di una tabella con il layout Intestazione a sinistra
headersontheleftFigure:visualizzazione mobile di una tabella con il layout Intestazione a sinistra
Nel layout della colonna Comprimibile, le colonne della tabella vengono ridotte per mostrare una o due colonne, a seconda della dimensione del dispositivo, mentre le altre colonne vengono ridotte. È possibile fare clic sull'icona di compressione/espansione per visualizzare altre colonne nella tabella.
Anche se il layout di colonna Comprimibile è ottimizzato per i dispositivi mobili, funzionerà anche su desktop, se la larghezza disponibile non è sufficiente per mostrare tutte le colonne di una tabella.
Le immagini seguenti confrontano l'aspetto di una tabella su un dispositivo con colonne compresse ed espanse.
colonnaFigura: Colonne ridotte di una tabella con solo due colonne visualizzate su un dispositivo mobile
columnFigure:colonna espansa di una tabella su un dispositivo mobile
Le tabelle in moduli adattivi consentono di compilare la tabella in fase di esecuzione utilizzando i dati provenienti da un file XML. Il file XML di dati può risiedere nel file system locale del computer in cui è in esecuzione server AEM Forms o nell'archivio CRX.
Esempio della tabella di riepilogo delle transazioni bancarie seguente che si desidera compilare con i dati provenienti da un file XML.
In questo esempio, la proprietà Nome elemento per:
Il file XML che contiene 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 per una riga sono definiti dai tag <Row1>
, che è il nome dell'elemento per la riga nella tabella. All'interno del tag <Row1>
, i dati di ciascuna cella sono definiti all'interno del tag relativo al nome dell'elemento, ad esempio <tableItem1>
, <tableItem2>
, <tableItem3>
e <type>
.
Per unire questi dati alla tabella in fase di esecuzione, è necessario indirizzare il modulo adattivo contenente la tabella nella posizione XML assoluta con wcmmode disattivato. Ad esempio, se il modulo adattivo si trova in corrispondenza di http://localhost:4502/myForms/bankTransaction.html e il file XML di dati viene salvato in corrispondenza di C:/myTransactions/bankSummary.xml, è possibile visualizzare la tabella con i dati al seguente URL:
http://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled
Se è stato creato un modulo adattivo basato su un modello di modulo XFA, gli elementi XFA sono disponibili nella scheda Modello dati di AEM Content Finder. È possibile trascinare questi elementi XFA, incluse le tabelle, nel modulo adattivo.
L’elemento tabella XFA è mappato sul componente Tabella e funziona out-of-the-box nei moduli adattivi. Tutte le proprietà e le funzionalità della tabella XDP vengono mantenute quando vengono spostate in un modulo adattivo e potete eseguire qualsiasi operazione su di esso, come avviene per la tabella di moduli adattivi nativi. Ad esempio, se una riga in una tabella XDP è contrassegnata come ripetibile, viene ripetuta anche se rilasciata in moduli adattivi.
È inoltre possibile trascinare il sottomodulo XDP per aggiungere una nuova riga nella tabella. Tuttavia, tenere presente che il rilascio di un sottomodulo nidificato non funziona.
Una tabella XDP senza riga di intestazione non verrà mappata al componente Tabella modulo adattivo. Verrà invece mappato sul componente Pannello modulo adattivo con layout fluido. Inoltre, quando si aggiunge una tabella nidificata da un XDP a un modulo adattivo, la tabella esterna viene convertita in un pannello mantenendo la tabella interna.
È inoltre possibile 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 eliminati gli elementi. Le celle create utilizzando gli elementi di tipo complesso XSD mantengono un riferimento di binding all'XSD. È inoltre possibile sostituire una cella corpo con un elemento di tipo complesso XSD rilasciando l'elemento sulla cella.
Il numero di elementi in un componente tabella XDP, un sottomodulo o un tipo complesso XSD non può superare il numero di celle in una riga. Ad esempio, non è possibile rilasciare quattro elementi su una riga con solo tre celle. Ne risulterà un errore.
Se il numero di elementi è inferiore al numero di celle in una riga, la nuova riga aggiunge prima le celle in base agli elementi, quindi le celle predefinite vengono aggiunte per riempire le celle rimanenti nella riga. Ad esempio, se rilasci un gruppo di tre elementi in una riga con quattro celle, le prime tre celle si basano sugli elementi rilasciati e la cella rimanente sarà quella predefinita.
Se si spostano le righe verso l'alto o il basso durante la creazione di una tabella basata su XSD, alcuni dati persi dalle righe della tabella vengono visualizzati nell'XML di 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 corpo predefinite della 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. Pertanto, è necessario rinominare i nomi degli elementi per le celle corpo predefinite in modo da mantenerle univoche tra le tabelle ed evitare la perdita di dati.
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.