Tabeller i adaptiv form tables-in-adaptive-forms

Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenterfor skapa ny Adaptive Formseller lägga till adaptiv Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.

Att använda tabeller är ett effektivt, förenklat och organiserat sätt att presentera komplexa data. Det gör det enkelt för användarna att identifiera information och lägga in data i en ordnad ordning av rader och kolumner. De flesta formulär från finanssektorn och myndigheter kräver stora datatabeller för att skicka siffror och utföra beräkningar.

AEM Forms tillhandahåller en tabellkomponent i komponentwebbläsaren i sidofältet som gör att du kan skapa tabeller i adaptiva formulär. Några av de viktigaste funktionerna i den är:

Skapa en tabell create-a-table

Om du vill skapa en tabell drar och släpper du tabellkomponenten från komponentwebbläsaren i sidosparken på det adaptiva formuläret. Tabellen innehåller som standard två kolumner och tre rader, inklusive rubrikraden.

Om rubrik- och brödceller about-header-and-body-cells

Rubrikcellerna är textfält. Om du vill ändra rubrikens etikett högerklickar du på rubrikcellen och klickar på Redigera. Uppdatera etiketten i dialogrutan Redigera Värde fält och klicka OK.

Tabellcellerna är som standard textrutor. Du kan ersätta en innehållscell med andra adaptiva formulärkomponenter som är tillgängliga i sidosparken, till exempel en numerisk ruta, datumväljare eller listruta.

Den första innehållsraden i följande tabell innehåller t.ex. textruta, datumväljare och nedrullningsbara listkomponenter som celler.

Du kan sammanfoga två eller flera innehållsceller genom att markera cellerna som du vill sammanfoga, högerklicka och markera Sammanfoga. Du kan också dela en sammanfogad cell genom att högerklicka på den och markera Dela celler.

Lägga till, ta bort, flytta rader och kolumner add-delete-move-rows-and-columns

Du kan lägga till och ta bort en rad eller kolumn och flytta en rad uppåt och nedåt i en tabell.

Lägga till, ta bort eller flytta en rad

Om du vill lägga till, ta bort eller flytta raden klickar du på någon av radens celler. öppna innehållsläsaren och markerar motsvarande rad markeras den markerade raden med verktygsfältsalternativet där du kan lägga till, ta bort eller flytta raden uppåt eller nedåt.

Dubbelklicka på raden för att konfigurera egenskaper för en rad, till exempel Namn, Bind-referens, Upprepa inställningar, CSS-klass.

Lägga till eller ta bort en kolumn

Om du vill lägga till eller ta bort en kolumn klickar du på textcellen i rubrikavsnittet. Ett verktygsfält öppnas med alternativ för att lägga till eller ta bort en kolumn:

Lägg till tabellbeskrivning add-table-description

Du kan lägga till en beskrivning av tabellen för att förklara hur informationen är organiserad och att skärmläsare kan tolka och läsa upp den. Så här lägger du till beskrivningen:

Sortera kolumner i en tabell sortcolumnstable

Du kan sortera data baserat på valfri kolumn i en tabell i det anpassade formuläret. Värdena i kolumnen kan sorteras i stigande eller fallande ordning.

Sortering kan användas för tabellkolumner som innehåller:

Om du vill använda sortering på tabellkolumner måste tabellkolumncellerna innehålla någon av följande komponenter: Numerisk ruta, Numerisk nummerlista, Datumindatafält, Datumväljare, Text eller Textruta.

Så här aktiverar du sortering:

Ange kolumnbredd för en tabell set-column-width

Gör så här för att ange kolumnbredd för en tabell:

Konfigurera tabellformat configure

Du kan definiera formatet för en tabell med hjälp av stilläget i verktygsfältet på sidan. Utför följande steg för att växla till formateringsläge och redigera tabellformatet

Lägga till eller ta bort en rad dynamiskt add-or-delete-a-row-dynamically

Tabeller har färdiga funktioner för att dynamiskt lägga till eller ta bort rader vid körning.

Vid körning eller förhandsgranskning visas + och för att lägga till eller ta bort en rad.

Uttryck i en tabell expressions-in-a-table

Tabeller i anpassningsbara formulär gör att du kan skriva uttryck i JavaScript för att skapa beteenden som att visa eller dölja en tabell eller en rad, lägga till alla tal och visa summan i en cell, aktivera eller inaktivera en cell, validera användarindata och så vidare. Dessa uttryck använder API:er för adaptiva formulärskriptmodeller.

Tabellerna och raderna har endast stöd för synlighetsuttryck som styr synligheten baserat på värdet som returneras av ett uttryck, men cellerna har stöd för följande uttryck:

Synlighetsuttrycket för en tabell eller rad kan definieras på fliken Panelegenskaper i motsvarande dialogruta för redigeringskomponenter. Uttrycken för en cell kan definieras på fliken Skript i dialogrutan Redigera komponent.

En fullständig lista över adaptiva formulärklasser, händelser, objekt och offentliga API:er finns på API-referens för JavaScript-bibliotek för adaptiva formulär.

Mobillayouter mobile-layouts

Tabeller i anpassningsbara formulär ger oöverträffad upplevelse i mobila enheter tack vare dess flytande och responsiva layouter. AEM Forms erbjuder två typer av mobila layouter för tabeller - rubriker till vänster och Komprimerbara kolumner.

Du kan konfigurera en mobil layout för en tabell på fliken Format i dialogrutan Redigera komponent för en tabell.

Sidhuvuden till vänster headers-on-left

I sidhuvudena i den vänstra layouten flyttas tabellhuvudet till vänster och bara en cell visas mot en rubrik. Varje rad i den här layouten visas som ett distinkt avsnitt. I följande bilder jämförs en tabell på en dator med den på en mobil enhet.

Skrivbordsvy av en tabell med sidhuvud i vänsterlayout

Mobil vy av en tabell med sidhuvud i vänster layout

Komprimerbar kolumnlayout collapsible-columns-layout

I kolumnlayouten Komprimerbar komprimeras kolumnerna i tabellen så att en eller två kolumner visas, beroende på enhetens storlek, medan andra kolumner komprimeras. Du kan klicka på ikonen för att komprimera/expandera om du vill visa andra kolumner i tabellen.

Följande bilder jämför hur en tabell ser ut på en enhet med komprimerade och expanderade kolumner.

Komprimerade kolumner i en tabell där bara två kolumner visas på en mobil enhet

Utökad kolumn i en tabell på en mobil enhet

Sammanfoga data i en tabell merge-data-in-a-table

Tabeller i anpassningsbara formulär gör att du kan fylla i tabellen under körning med data från en XML-fil. Data-XML-filen kan finnas i det lokala filsystemet på den dator där AEM Forms-servern körs eller i CRX-databasen.

Låt oss ta ett exempel på följande sammanfattande tabell över banktransaktioner som vi vill fylla med data från en XML-fil.

I det här exemplet används elementnamnegenskapen för:

XML-filen som innehåller data i följande format:

<?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>

I XML-exemplet definieras data för en rad av <Row1> -taggar, som är elementnamnet för raden i tabellen. I <Row1> -taggen definieras data för varje cell i -taggen för elementnamnet, till exempel <tableItem1>, <tableItem2>, <tableItem3>och <type>.

Om du vill sammanfoga dessa data med tabellen vid körning måste vi peka det adaptiva formuläret som innehåller tabellen mot den absoluta XML-platsen med wcmmode inaktiverat. Om det adaptiva formuläret till exempel är https://localhost:4502/myForms/bankTransaction.html och XML-filen sparas på C:/myTransactions/bankSummary.xml kan du visa tabellen med data på följande URL:

https://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled

Använd XDP-komponenter och komplexa XSD-typer use-xdp-components-and-xsd-complex-types

Om du har skapat ett adaptivt formulär baserat på en XFA-formulärmall är XFA-elementen tillgängliga på fliken Datamodell AEM Content Finder. Du kan dra och släppa dessa XFA-element, inklusive tabeller, i det anpassningsbara formuläret.

XFA-tabellelementet mappas till tabellkomponenten och fungerar som det ska i adaptiva former. Alla egenskaper och funktioner i XDP-tabellen bevaras när den flyttas till ett anpassat formulär, och du kan utföra vilken åtgärd som helst på den på samma sätt som du gör med en intern adaptiv formulärtabell. Om en rad i en XDP-tabell till exempel är markerad som upprepningsbar upprepas den även när den tas bort i anpassningsbara former.

Dessutom kan du dra och släppa XDP-delformulär för att lägga till en ny rad i tabellen. Observera dock att det inte går att släppa ett kapslat delformulär.

Dessutom kan du dra och släppa en grupp XSD-element med komplex typ för att skapa en tabellrad. En ny rad skapas precis nedanför den rad där du släppte elementen. Cellerna som skapas med XSD-elementen för komplexa typer behåller en bindningsreferens till XSD. Du kan också ersätta en innehållscell med ett XSD-element av komplex typ genom att släppa elementet i cellen.

Viktiga överväganden key-considerations

Se även see-also