Introduktion till utveckling av adaptiva formulär

Översikt

Med adaptiva formulär kan du skapa formulär som är engagerande, responsiva, dynamiska och anpassningsbara. AEM Forms har ett intuitivt användargränssnitt och färdiga komponenter för att skapa och arbeta med anpassningsbara formulär. Du kan välja att skapa ett anpassat formulär baserat på en formulärmodell eller ett schema eller utan en formulärmodell. Det är viktigt att du noga väljer den formulärmodell som inte bara passar dina behov, utan som utökar dina befintliga infrastrukturinvesteringar och resurser. Du kan välja mellan följande alternativ för att skapa ett anpassat formulär:

  • Använda en formulärdatamodell
    Med dataintegrering kan ni integrera enheter och tjänster från olika datakällor i en formulärdatamodell som ni kan använda för att skapa anpassade formulär. Välj formulärdatamodell om det adaptiva formulär du skapar inbegriper hämtning och skrivning av data från och till flera datakällor.

  • Använda en XDP-
    formulärmall Det är en idealisk formulärmodell om du har investeringar i XFA-baserade eller XDP-formulär. Det är ett direkt sätt att konvertera XFA-baserade formulär till anpassningsbara formulär. Alla befintliga XFA-regler behålls i de tillhörande adaptiva formulären. De färdiga adaptiva formulären har stöd för XFA-konstruktioner, till exempel valideringar, händelser, egenskaper och mönster.

  • Om du använder en XSD (XML Schema Definition) eller ett JSON
    SchemaXML- och JSON-schema representerar detta strukturen i vilken data produceras eller används av företagets back-end-system. Du kan koppla schemat till ett anpassat formulär och använda dess element för att lägga till dynamiskt innehåll i det anpassningsbara formuläret. Elementen i schemat kommer att vara tillgängliga för användning på fliken Datamodellobjekt i innehållsläsaren när du redigerar adaptiva formulär.

  • Om du använder ingen eller utan en
    formulärmodell används ingen formulärmodell när adaptiva formulär skapas med det här alternativet. Data-XML som genereras från sådana formulär har en platt struktur med fält och motsvarande värden.

Mer information om hur du skapar ett adaptivt formulär finns i Skapa ett adaptivt formulär.

Anpassat gränssnitt för formulärutveckling

Det pekoptimerade användargränssnittet för att skapa anpassningsbara formulär är intuitivt och ger:

  • Dra-och-släpp-funktioner
  • Standardformulärkomponenter
  • Integrerad databas för resurser

När du skapar ett nytt eller redigerar ett befintligt anpassat formulär använder du följande gränssnittselement:

Gränssnitt för redigering av anpassningsbara formulär

A. Sidofält B. Sidverktygsfält C. Adaptiv formulärsida

Med sidofältet kan du

  • Se formulärinnehåll som paneler, komponenter, fält och layout.
  • Redigera komponentegenskaper.
  • Sök, visa och använd resurser i din AEM DAM-databas (Digital Asset Management).
  • Lägg till komponenter i formuläret.

Sidebar

A. Innehållsläsaren B. Egenskapsläsaren C. Resursläsaren D. Components

Sidlisten innehåller följande webbläsare:

  • InnehållsläsarenI
    innehållsläsaren kan du se

    • Formulärobjekt
      Visar formulärets objekthierarki. Författaren kan navigera till en viss formulärkomponent genom att trycka på det elementet i formulärobjektträdet. Författaren kan söka efter objekt och ordna om dem från det här trädet.

    • DatamodellsobjektHär kan du
      se formulärmodellens hierarki.
      Det gör att du kan dra och släppa formulärmodellelement i det anpassade formuläret. De tillagda elementen konverteras automatiskt till formulärkomponenter samtidigt som deras ursprungliga egenskaper behålls. Du kan se datamodellsobjekt när formuläret använder XML-schema, JSON-schema eller XDP-mall.

  • Egenskapswebbläsaren

    Gör att du kan redigera egenskaperna för en komponent. Egenskaperna ändras enligt en komponent. Så här visar du egenskaper för den adaptiva formulärbehållaren:

    Markera en komponent, tryck sedan på fältnivå > Adaptive Form Container och tryck sedan på cmpr.

  • Resursläsaren

    Segmenterar olika typer av innehåll, t.ex. bilder, dokument, sidor, filmer och så vidare.

  • Komponentwebbläsare

    Innehåller komponenter som du kan använda för att skapa ett anpassat formulär. Du kan dra komponenter från till det adaptiva formuläret för att lägga till formulärelement och konfigurera tillagda element enligt kraven. I följande tabell beskrivs komponenterna i komponentwebbläsaren.

Komponent Funktionalitet
Adobe Sign Block Lägger till ett textblock med platshållare för fält som ska fyllas i när du signerar med Adobe Sign.
Knapp Lägger till en knapp som du kan konfigurera för att utföra åtgärder som att spara, återställa, gå vidare, gå till föregående och så vidare.
Captcha Lägger till CAPTCHA-validering med Google reCAPTCHA-tjänsten. Mer information finns i Använda CAPTCHA i adaptiva formulär.
Diagram Lägger till ett diagram som du kan använda i adaptiva formulär och dokument för visuell representation av tvådimensionella data i repeterbara paneler och tabellrader.
Kryssruta Lägger till en kryssruta.
Datumindatafält Använd datumindatafält i formuläret för att låta kunderna fylla i dag, månad och år separat i tre rutor. Du kan anpassa komponentens utseende och känsla och ändra datumformatet. Du kan till exempel låta kunderna ange datum i formaten MM/DD/ÅÅÅÅ eller DD/MM/ÅÅÅÅ.
Datumväljaren Lägger till ett kalenderfält för att välja ett datum.
Dokumentfragment Gör att du kan lägga till återanvändbara komponenter i en korrespondens.
Dokumentfragmentgrupp Gör att du kan lägga till en grupp med relaterade dokumentfragment som du kan använda i en brevmall som en enskild enhet.
Nedrullningsbar lista Lägger till en nedrullningsbar lista - en eller flera markeringar
E-post

Lägger till ett fält för att hämta e-postadressen. E-postkomponenten validerar som standard e-postadresser med följande reguljära uttryck.

^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$

Bifogad fil

Lägger till en knapp som gör att användare kan bläddra bland och bifoga stöddokument till ett formulär. Du kan bifoga flera filer till en bifogad filkomponent. Du kan också ange **Maximum File Size** och **Supported File Types** för de bifogade filerna i egenskapswebbläsaren för komponenten.

Obs!

  • Komponenten stöder inte bifogade filer med filnamn som börjar med tecken (.), som innehåller tecknen \ / : * ? " < > | ; % $, eller innehåller speciella filnamn som är reserverade för Windows-operativsystem som null, prn, con, lpt eller com.
  • Om du vill bifoga flera filer till en bifogad fil som öppnas i Apple Safari-webbläsaren, markerar och bifogar du filerna en i taget. Du kan inte markera och bifoga flera filer samtidigt.
  • Komponenten Bifogad fil stöder en fördefinierad uppsättning filformat i adaptiva formulär som är aktiverade för Adobe Sign. Mer information finns i Filformat som stöds.

Lista över bifogade filer Lägger till ett fält som visar alla bifogade filer som har överförts med komponenten Bifogad fil.
Header
Lägger till sidhuvudet som vanligtvis innehåller en företagslogotyp, formulärets rubrik och sammanfattning.
Sidfot Lägger till sidfoten som vanligtvis innehåller copyrightinformation och länkar till andra sidor.
Bild Gör att du kan infoga en bild.
Bildval Gör att kunderna kan välja en bild som ger information. Ni kan använda informationen för att tillhandahålla personaliserade tjänster till era kunder.
Knappen Nästa Lägger till en knapp för att navigera till nästa panel i ett formulär.
Numerisk ruta Lägger till ett fält för att hämta numeriska värden
Numerisk stege Använd Numeric Stepper i formuläret för att låta kunderna ange ett numeriskt värde som de kan öka eller minska baserat på ett fördefinierat steg.
Panel

Lägger till en panel eller underpanel.

Du kan också lägga till en panelkomponent från den överordnade panelens verktygsfält med knappen Lägg till underordnad panel. På samma sätt kan du lägga till ett panelspecifikt verktygsfält med knappen Lägg till panelverktygsfält. Du kan konfigurera placeringen av panelens verktygsfält med hjälp av dialogrutan Redigera panel.

Lösenordsruta Lägger till ett fält för att hämta ett lösenord.
Knappen Föregående Lägger till en knapp som användare behöver för att gå tillbaka till föregående sida eller panel.
Alternativknapp Lägger till alternativknappar.
Knappen Återställ Lägger till en knapp för att återställa formulärfält.
Spara-knapp Lägger till en knapp för att spara formulärdata.
Klottra signaturer Lägger till ett fält för att hämta skriptsignaturer.
Avgränsare Gör att panelerna i formuläret kan delas upp visuellt.
Signatursteg Visar informationen i formuläret och signaturfälten som användaren kan använda för att verifiera och signera formuläret.
Text Gör att du kan ange statisk text.
Skicka-knapp Lägger till en skicka-knapp för att skicka formuläret till den konfigurerade skicka-åtgärden.
Sammanfattningssteg Skickar formuläret och visar en sammanfattning som författarna anger när formuläret har skickats.
Byt Lägger till en växel som utför en åtgärd för att växla eller aktivera/inaktivera. Du kan inte lägga till fler än två alternativ i komponenten Switch. Eftersom en switch bara kan ha två värden: På eller av är obligatoriskt inte tillämpligt. Minst ett värde sparas oavsett användarens indata.
Tabell Lägger till en tabell där du kan ordna data i rader och kolumner.
Telefonnummer

Lägger till ett fält för att hämta telefonnummer. Med telefonkomponenten kan författare konfigurera någon av följande telefonnummertyper. Varje typ är associerad med ett reguljärt standarduttryck för validering.

  • Typen International valideras av ^[+][0-9]{0,14}$.
  • Typen USPhoneNumber valideras av {'+1 ('999') '999-9999}.
  • Typen UKPhoneNumber valideras av text{'+'99 999 999 9999}.
  • Typen Anpassad innehåller inget standardvalideringsmönster. Den får värdet för den senast valda telefonnummertypen. Du kan också ange ett eget valideringsmönster.
Villkor
Lägger till ett fält som författare kan använda för att ange villkoren som användare ska granska innan formuläret fylls i.
Textruta

Lägger till en textruta där en användare kan ange nödvändig information.

Komponenten Textruta accepterar som standard bara oformaterad text. Du kan aktivera en textrutekomponent för att acceptera RTF. En RTF-aktiverad textkomponent innehåller alternativ för att lägga till rubriker, ändra teckenformat (fet, kursiv, stryka under tecknen), skapa sorterade och osorterade listor, ändra textbakgrund och textfärg samt lägga till hyperlänkar. Om du vill aktivera RTF-text för en textruta aktiverar du alternativet Tillåt RTF i komponentegenskaperna.

Titel Anger en rubrik för det adaptiva formuläret.
Verifiera steg

Lägger till en platshållare som visar det ifyllda formuläret för verifiering av användaren.

Obs: Adaptiv form som innehåller Verifiera-komponenten stöder inte anonyma användare. Du bör inte heller använda komponenten Verify i ett adaptivt formulärfragment.

Bästa tillvägagångssätt för att arbeta med komponenter

Här följer några tips och viktiga saker du bör komma ihåg när du arbetar med adaptiva formulärkomponenter:

  • Varje komponent har tillhörande egenskaper som styr dess utseende och funktion. Om du vill konfigurera egenskaperna för en komponent trycker du på komponenten och trycker på cmpr för att öppna komponentegenskaperna i egenskapsläsaren.

  • En komponent identifieras med sitt elementnamn. När du trycker på cmpr kan du ändra komponentens namn genom att ändra fältvärdet Element Name i egenskapsläsaren. Endast bokstäver, siffror, bindestreck (-) och understreck (_) godkänns i fältet Elementnamn. Andra specialtecken tillåts inte och elementnamnet måste börja med en bokstav.

  • Du kan ändra egenskapen Title för en adaptiv formulärkomponent infogad i formulärredigeraren utan att öppna egenskapsgranskaren så länge titeln visas i formuläret. Så här gör du:

    1. Tryck för att markera en komponent som har en Title-egenskap och vars Hide title-egenskap är inaktiverad.

    2. Tryck på aem_6_3_edit för att göra titeln redigerbar.

    3. Ändra titeln och tryck på Retur-tangenten eller var som helst utanför komponenten för att spara ändringarna. Tryck på Esc för att ignorera ändringarna.

  • Vissa adaptiva formulärkomponenter som e-post och telefon innehåller färdiga valideringsmönster. Du kan dock ange anpassad validering genom att uppdatera fältet Validation Pattern under dragspelsfliken Mönster i komponentegenskaperna. Mer information om standardvalideringar finns i komponentbeskrivningarna i tabellen ovan.

  • Anpassningsbara formulärfält, t.ex. Numerisk ruta och E-post, kan konfigureras så att de innehåller speciella HTML5-indatatyper. När de här fälten är i fokus på mobila enheter och surfplattor visas särskilda alfabet, siffror och tecken som är vanliga för inmatningsinformation i fälten. Det gör det lättare för användarna att ange information snabbt utan att behöva växla mellan teckenuppsättningar på knappsatsen. Om du vill tillåta specialiserade indata för en komponent aktiverar du kryssrutan Use HTML Type Number i komponentegenskaperna.

  • Du kan aktivera en textrutekomponent för att acceptera RTF. Om du vill aktivera RTF-text för en textruta aktiverar du kryssrutan Allow Rich Text i komponentegenskaperna.

  • Du kan aktivera komponenterna Textruta, E-post och Telefon för att autofylla värden för fält som namn, adress, kreditkort, telefon och e-post från informationen som lagras i webbläsarens autofyllningsinställningar. Om du vill aktivera den här funktionen väljer du Enable Autofill i komponentegenskaperna och väljer en Autofill Attribute. När en användare fyller i ett anpassat formulär föreslås värdena från profilen för automatisk ifyllning i webbläsaren eller baserat på de värden som användaren tidigare fyllt i. Observera att Autofyll fungerar om autofyllningsinställningarna i användarens webbläsare är aktiverade.

  • Ange värden för alternativknappar och kryssruteobjekt i {value}={text}-format i komponentegenskaper.

  • Komponenten för bifogad fil tillåter som standard att användaren bara kan bifoga en fil. Du kan dock konfigurera komponentegenskaperna så att de stöder flera bifogade filer. Om en användare dessutom bifogar flera filer med samma filnamn kan de bifogade filerna orsaka problem. Därför rekommenderar vi att du kopplar en unik identifierare till varje bifogad fil när formuläret skickas. Så här gör du:

    1. På din AEM Forms-server går du till Adobe Experience Manager > Tools > Operations > Web Console.
    2. Sök och tryck på Adaptive Forms Configuration Service.
    3. Aktivera Make File Names Unique i dialogrutan Adaptiv Forms Configuration Service. Som standard är den inaktiverad.
  • Om du vill att användare ska kunna bifoga en PDF-fil med Safari-webbläsaren kontrollerar du att application/pdf har lagts till i egenskapen Filtyper som stöds i komponenten för bifogade filer. Anpassningsbara formulär som skapats med en tidigare version av AEM Forms kan innehålla .pdf i stället för application/pdf i egenskapen Filtyper som stöds.

Mer information om adaptiva formulär finns i Bästa tillvägagångssätt för att arbeta med adaptiva formulär.

OBSERVERA

Anpassade formulärkomponenter har inte stöd för höger till vänster-språk. Till exempel hebreiska.

Verktygsfältet Sida

Verktygsfältet längst upp på sidan innehåller alternativ som gör att du kan förhandsgranska formuläret, ändra formuläregenskaper och redigera formulärlayouten. Du kan förhandsgranska formuläret när du redigerar det och göra ändringar i det. I verktygsfältet visas:

  • Växla sidopanel: Här kan du visa eller dölja sidofältet.

  • Sidinformationstema-alternativ  : Gör att du kan visa sidegenskaper, publicera/avpublicera ett formulär, starta ett formulärarbetsflöde och öppna formuläret i klassiskt gränssnitt.

  • Emulatorlinjal: Gör att du kan emulera formulärutseendet för olika visningsstorlekar, till exempel för surfplattor och telefoner.

  • Redigera: Här kan du välja andra lägen, till exempel: Edit, Style, Developer och Design.

    • Redigera: Här kan du redigera egenskaperna för formuläret och dess komponenter. Du kan till exempel lägga till en komponent, släppa en bild och ange obligatoriska fält.

    • Format: Gör att du kan formatera utseendet på komponenter i formuläret. I stilläge kan du till exempel markera en panel och ange dess bakgrundsfärg.

    • Utvecklare: Låter en utvecklare:

      • Upptäck vad formulären består av.
      • Felsök vad som händer var och när, vilket i sin tur hjälper till att lösa problem.
    • Design. Gör att du kan aktivera eller inaktivera anpassade komponenter eller komponenter som inte finns med i sidofältet.

  • Förhandsgranska: Gör att du kan förhandsgranska hur formuläret ser ut när du publicerar det.

Komponentverktygsfältet

Komponentverktygsfältet i pekrörelsegränssnittet

När du markerar en komponent visas ett verktygsfält där du kan arbeta med den. Du får alternativ för att klippa ut, klistra in, flytta och ange egenskaper för komponenterna. Dina alternativ är:

A.Konfigurera: När du trycker på Configure visas komponentegenskaperna i sidofältet. Om du konfigurerar dessa egenskaper kan du anpassa datainhämtningen. Du kan ändra komponentens elementnamn och ange etikettexten i komponentens rubrikfält. Med elementnamnet kan du hämta värden som användarna anger med komponenten. I komponentegenskaperna anger du komponentens beteende och hanterar användarindata. Konfigurera egenskaperna i sidofältet för att hämta användardata och använda dem för vidare bearbetning. Med egenskaper för adaptiv formulärbehållare kan du ange klientbibliotek, layouter, teman, inställningar för dokumentdokument, inställningar för att spara, inställningar för överföring och metadatainställningar.

B.Kopiera: Du kan använda kopieringsalternativet för att kopiera en komponent och klistra in den på andra platser i formuläret. När du klistrar in en komponent får den inklistrade komponenten ett nytt elementnamn men behåller den kopierade komponentens egenskaper.

C.Klipp ut: Du kan använda alternativet Klipp ut för att flytta en komponent från en plats till en annan i det adaptiva formuläret.

D. Ta bort: Gör att du kan ta bort komponenten från formuläret.

E. Infoga: Gör att du kan infoga en komponent ovanför den markerade komponenten.

F. Klistra in: Gör att du kan klistra in komponenten som du klipper ut eller kopierar med alternativen som beskrivs ovan.

G. Redigera regler: Gör att du kan öppna regelredigeraren. Mer information finns i Regelredigeraren.

H. Grupp: Gör att du kan markera flera komponenter om du vill klippa ut, kopiera eller klistra in mer än en komponent tillsammans.

Jag. Överordnad: Gör att du kan välja en komponents överordnade. Ett textfält ligger till exempel i ett underavsnitt som finns i ett avsnitt. Avsnittet finns i stödlinjens rotpanel och den adaptiva formulärbehållaren är överordnad en stödlinjens rotpanel. För en komponent kan du se alla alternativ med hierarkin sorterad längst ned.

Om du till exempel trycker på Parent för en textruta kan du se:

  • Underavsnitt
  • Avsnitt
  • guideRootPanel
  • Adaptiv formulärbehållare

J. Övriga: Innehåller fler alternativ för att arbeta med den markerade komponenten.

  • Visa SOM-uttryck
  • Spara en panel som fragment (endast för paneler)
  • Lägg till underordnad panel (endast för paneler)
  • Verktygsfältet Lägg till panel (endast för paneler)
  • Ersätt (inte för paneler)

Adaptiv formulärsida

Den anpassningsbara formulärsidan är det faktiska formuläret. Det är som vilken annan WCM-sida som helst som är modellerad som WCM-komponenten cq:Page. Följande bild visar innehållsstrukturen i ett typiskt anpassat formulär.

Innehållsstruktur för en WCM-sida med anpassat formulär

Innehållsstrukturen innehåller vanligtvis följande primära komponenter:

  • guideContainer: Roten för ett adaptivt formulär, som är markerat som Start of adaptive form i gränssnittet för det adaptiva formuläret. I den här komponenten kan du ange:

    • Mobil layout för det adaptiva formuläret: Definierar formulärets utseende på mobila enheter.
    • Tack! Definierar sidan där användaren omdirigeras efter att formuläret har skickats.
    • Skicka åtgärd: Definierar hur formuläret ska bearbetas på servern när användaren skickar formuläret.
    • Format: Anger sökvägen till CSS-filen som används för att anpassa formulärets utseende.
  • rootPanel: Rotpanelen i ett adaptivt formulär. Den kan innehålla underpaneler under objektnoden. Varje panel, inklusive rotpanelen, kan ha en tillhörande layout. Panelens layout bestämmer hur formuläret placeras. I dragspelslayouten placeras till exempel objekten som dragspelssteg.

  • verktygsfält: En adaptiv formulärbehållare har ett associerat globalt verktygsfält som är globalt för formuläret. Det här verktygsfältet kan läggas till med åtgärden Add Toolbar i redigeringsfältet, som gör att författare kan lägga till åtgärder som Skicka, Spara, Återställ och så vidare.

  • resurser: Den här noden innehåller ytterligare information som används för formulärredigering. Exempel: formulärmodellinformation, lokaliseringsinformation osv.).

På denna sida