Guidekomponent wizard-adaptive-forms-core-component

En guidelayout i ett adaptivt formulär refererar till ett formulär som är uppdelat i flera steg eller på flera sidor där användaren förflyttar sig i formuläret ett steg i taget. Layouten kallas för en guide eftersom den guidar användaren genom formuläret steg för steg.

Varje steg i guiden innehåller vanligtvis en grupp relaterade formulärfält och en navigeringsmekanism, som knapparna Nästa och Bakåt, som du kan använda för att gå mellan stegen. Användaren kan bara fortsätta till nästa steg när det aktuella steget har slutförts och alla obligatoriska fält har fyllts i.

Guidelayouten är användbar för formulär som innehåller många fält eller information som behöver samlas in, eftersom den delar upp formuläret i mindre, mer hanterbara segment. Det hjälper också användarna att fokusera på en uppsättning fält i taget, vilket kan göra ifyllningsprocessen mindre överväldigande.

Det kan dock även göra formuläret mer komplicerat, eftersom användaren måste gå igenom flera sidor för att fylla i formuläret. Därför är det nödvändigt att utvärdera formulärets krav och användarens behov innan man bestämmer sig för att använda en guidelayout.
Du kan använda huvudkomponenten för guidelayouten i ett adaptivt formulär för att skapa en guidelayout.

Exempel

exempel

Användning reasons-to-use-wizard-in-an-adaptive-form

Det finns flera skäl till att det kan vara bra att använda en guidelayout i anpassad form:

  • Enkelt: Att dela upp ett formulär i flera steg kan göra det lättare för användarna att förstå och slutföra, eftersom de kan fokusera på en uppsättning fält i taget.

  • Organisation: En guidelayout kan hjälpa dig att ordna formulär efter ämne eller syfte, och den kan också gruppera relaterade fält tillsammans, vilket kan göra ifyllningsprocessen mer logisk och effektiv.

  • Validering: En guidelayout möjliggör stegvis validering, som kan hjälpa användare att identifiera och korrigera fel medan de arbetar, i stället för att vänta tills formuläret är slut.

  • Förloppsindikator: En guidelayout kan visa formulärets förlopp, vilket kan hjälpa användaren förstå hur mycket av formuläret som återstår att fylla i.

  • Långa formulär: Om formuläret innehåller många fält kan det vara överväldigande för användaren att se alla samtidigt, så att det blir mindre skrämmande om de delas upp i mindre, mer hanterbara segment.

  • Undvika övergivna: En guidelayout kan också bidra till att minska antalet avhopp från formulär, eftersom användarna lättare kan fylla i ett formulär om de kan se förloppet och förstå hur mycket som återstår att göra.

  • Mobil upplevelse: En guidelayout kan också vara bra för formulär som öppnas på mobila enheter, eftersom det gör det möjligt att läsa in mindre sidor snabbare och enklare att navigera i.

Generellt sett kan en guidelayout göra det enklare och effektivare att fylla i formulär, men det är viktigt att tänka på hur komplext formuläret är och användarens behov innan du bestämmer dig för att använda den här typen av layout.

Version och kompatibilitet version-and-compatibility

Kärnkomponenten i den adaptiva Forms-guiden Layout släpptes i februari 2023 som en del av kärnkomponenterna 2.0.4. Här är en tabell med alla versioner som stöds, AEM kompatibilitet och länkar till motsvarande dokumentation:

Komponentversion
AEM as a Cloud Service
v1
Kompatibel med
version 2.0.4 och senare

Mer information om versioner och versioner av kärnkomponenter finns i Huvudkomponentversioner -dokument.

Teknisk information technical-details

Den senaste informationen om den adaptiva huvudkomponenten i Forms Title finns i den tekniska dokumentationen om GitHub. Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.

Konfigurera dialogruta configure-dialog

Du kan enkelt anpassa guideupplevelsen för besökare med dialogrutan Konfigurera. Du kan också enkelt definiera guidealternativ för en smidig användarupplevelse.

Fliken Grundläggande basic-tab

fliken Grundläggande

  • Namn - Du kan enkelt identifiera en formulärkomponent med dess unika namn både i formuläret och i regelredigeraren, men namnet får inte innehålla blanksteg eller specialtecken.

  • Titel - Med dess titel kan du enkelt identifiera en komponent i ett formulär. Som standard visas titeln ovanpå komponenten.

  • Dölj titel - Välj alternativet om du vill dölja komponentens titel.

  • Gruppera underordnade komponenters data när formulär skickas (kapsla in data i objekt) - När alternativet är markerat kapslas data från dess underordnade komponenter in i den överordnade komponentens JSON-objekt. Om alternativet inte är markerat har inskickade JSON-data en platt struktur utan objekt för den överordnade komponenten. Till exempel:

    • När alternativet är markerat kapslas data från de underordnade komponenterna (till exempel Street, City och Zip Code) in i den överordnade komponenten (Address) som ett JSON-objekt. Detta skapar en hierarkisk struktur och data ordnas under den överordnade komponenten.

      Struktur på inlämnade uppgifter:

      code language-json
      { "Address":
      
      { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
      }
      
    • När alternativet inte är markerat har skickade JSON-data en platt struktur utan objekt för den överordnade komponenten (adress). Alla data finns på samma nivå, utan någon hierarkisk organisation.

      Struktur på inlämnade uppgifter:

      code language-json
         { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
  • Bindningsreferens - En bind referens är en referens till ett dataelement som lagras i en extern datakälla och används i ett formulär. Med den binda referensen kan du binda data dynamiskt till formulärfält så att formuläret kan visa de senaste data från datakällan. En bindningsreferens kan till exempel användas för att visa en kunds namn och adress i ett formulär baserat på kundens ID som anges i formuläret. Bindningsreferensen kan också användas för att uppdatera datakällan med data som anges i formuläret. På så sätt kan du med AEM Forms skapa formulär som interagerar med externa datakällor, vilket ger en smidig användarupplevelse för att samla in och hantera data.

  • Dölj komponent - Välj alternativet att dölja komponenten från formuläret. Komponenten är fortfarande tillgänglig för andra syften, som att använda den för beräkningar i regelredigeraren. Detta är användbart när du behöver lagra information som inte behöver visas eller ändras direkt av användaren.

  • Inaktivera komponent - Välj alternativet att inaktivera komponenten. Den inaktiverade komponenten är inte aktiv eller redigerbar av slutanvändaren. Användaren kan se fältets värde, men kan inte ändra det. Komponenten är fortfarande tillgänglig för andra syften, som att använda den för beräkningar i regelredigeraren.

  • Skrivskyddad - Välj alternativet att göra komponenten icke-redigerbar. Användaren kan se fältets värde, men kan inte ändra det. Komponenten är fortfarande tillgänglig för andra syften, som att använda den för beräkningar i regelredigeraren.

Fliken Repeat Wizard repeat-wizard-tab

Repeat wizard

Du kan använda alternativen för upprepning för att duplicera guiden och dess underordnade komponenter, definiera ett minsta och högsta antal upprepningar och underlätta replikering av liknande avsnitt i ett formulär. När du interagerar med Wizard-komponenten och använder dess inställningar visas följande alternativ:

  • Gör guiden repeterbar: En växlingsfunktion som gör att användarna kan aktivera eller inaktivera repeteringsfunktionen.
  • Minsta antal upprepningar: Anger det minsta antal gånger som guidepanelen kan upprepas. Värdet noll anger att guidepanelen inte upprepas. Standardvärdet är noll.
  • Maximalt antal upprepningar: Anger maximalt antal gånger som guidepanelen kan upprepas. Som standard är det här värdet obegränsat.

Om du vill hantera repeterbara avsnitt i guiden på ett effektivt sätt följer du stegen i Skapa formulär med repeterbara avsnitt artikel.

Fliken Objekt items-tab

Fliken Objekt

Med det här alternativet kan du lägga till adaptiva formulärkomponenter genom att klicka på knappen Lägg till, som visas som standard när guiden läggs till i redigeringsläge.

Fliken Hjälp help-tab

Fliken Hjälp

  • Kort beskrivning - En kort beskrivning är en kort textförklaring som ger ytterligare information eller förtydliganden om syftet med ett visst formulärfält. Det hjälper användaren att förstå vilken typ av data som ska anges i fältet och kan ge riktlinjer eller exempel som hjälper till att säkerställa att den angivna informationen är giltig och uppfyller de önskade kriterierna. Som standard är korta beskrivningar dolda. Aktivera Visa alltid kort beskrivning för att visa den under komponenten.

  • Visa alltid kort beskrivning - Aktivera alternativet att visa den korta beskrivningen under komponenten.

  • Hjälptext - Hjälptexten hänvisar till ytterligare information eller vägledning som användaren får för att hjälpa sig fylla i ett formulärfält på rätt sätt. Det visas när användaren klickar på hjälpikonen (i) som finns bredvid komponenten. Hjälptexten ger mer detaljerad information än etiketten eller platshållartexten för ett formulärfält och är utformad för att hjälpa användaren förstå fältets krav eller begränsningar. Den kan också ge förslag eller exempel som gör det enklare och exaktare att fylla i formuläret.

Fliken Tillgänglighet accessibility

Fliken Hjälpmedel

  • Text för skärmläsare - Text för skärmläsare avser text som är avsedd att läsas av hjälpmedelstekniker, t.ex. skärmläsare, som används av personer med nedsatt syn. Den här texten innehåller en ljudbeskrivning av formulärfältets syfte och kan innehålla information om fältets titel, beskrivning, namn och relevanta meddelanden (anpassad text). Skärmläsartexten ser till att formuläret är tillgängligt för alla användare, även användare med nedsatt syn, och ger dem en fullständig förståelse för formulärfältet och dess krav.

    • Egen text: Välj det här alternativet om du vill använda den anpassade texten för ARIA-hjälpmedelsetiketter. Om du väljer det här alternativet visas dialogrutan Egen text. Du kan lägga till relevant information i dialogrutan Egen text.
    • Beskrivning: Välj det här alternativet om du vill använda beskrivningen för hjälpmedelsetiketter för ARIA.
    • Titel: Välj det här alternativet om du vill använda titeln för ARIA-hjälpmedelsetiketter.
    • Namn: Välj det här alternativet om du vill använda namnet på ARIA-hjälpmedelsetiketter.
    • Ingen: Välj det här alternativet om du inte vill lägga till hjälpmedelsetiketter för ARIA.
  • HTML roll som skärmläsaren kan meddela - Rollen HTML är ett attribut som används för att ange syftet med ett HTML-element för hjälpmedelstekniker som skärmläsare. Rollattributet används för att ge ytterligare kontext och semantisk innebörd till ett element, vilket gör det enklare för skärmläsare att tolka och meddela innehållet till användaren. I AEM Forms kan till exempel etiketten för ett formulärfält ha rollen"label", och inmatningsfältet kan ha rollen"texbox". Detta gör att skärmläsaren förstår förhållandet mellan etiketten och inmatningsfältet och kan meddela användaren dem på rätt sätt.

Designdialogruta design-dialog

I designdialogrutan kan mallskapare styra hur saker visas som standard. För den adaptiva Forms-guidekomponenten kan du ange följande:

  • Huvudkomponenterna som en formulärskapare kan lägga till i guiden i Adaptive Forms Editor
  • Enkla namn på format (CSS-klasser) som kan användas i egenskapsdialogrutan för komponenten Wizard i den adaptiva Forms-redigeraren.

Detta gör det enklare och effektivare att skapa och anpassa formulär.

Fliken Tillåtna komponenter allowed-components-tab

Fliken Tillåtna komponenter

The Tillåtna komponenter kan mallredigeraren ange vilka komponenter som kan läggas till som objekt i panelerna i guidekomponenten i den adaptiva Forms-redigeraren.

Fliken Format styles-tab

Designdialogrutan används för att definiera och hantera CSS-format för en komponent. Core-komponenten för den adaptiva Forms-guiden stöder AEM Formatsystem.

Fliken Format

  • CSS-standardklasser: Du kan ange en standard-CSS-klass för den adaptiva Forms-guiden Core Component.

  • Tillåtna format: Du kan definiera format genom att ange ett namn och den CSS-klass som representerar formatet. Du kan till exempel skapa ett format med namnet"bold text" och ge CSS-klassen"font-weight: bold". Du kan använda eller tillämpa dessa format på ett adaptivt formulär i en anpassad Forms-redigerare. Om du vill använda ett format väljer du den komponent du vill använda formatet på i Adaptiv Forms-redigerare, navigerar till egenskapsdialogrutan och väljer önskat format i dialogrutan Stilar listruta. Om du behöver uppdatera eller ändra formaten går du tillbaka till designdialogrutan, uppdaterar formaten på formatfliken och sparar ändringarna.

Fliken Anpassade egenskaper

Fliken Anpassade egenskaper

Med anpassade egenskaper kan du koppla anpassade attribut (nyckelvärdepar) till en anpassad formulärets kärnkomponent med hjälp av formulärmallen. De anpassade egenskaperna återspeglas i egenskapsavsnittet i den headless-renderingen av komponenten. Det gör att du kan skapa dynamiskt formulärbeteende som anpassas baserat på anpassade attributvärden. Utvecklare kan till exempel utforma olika renderingar av en Headless Forms-komponent för mobiler, datorer eller webbplattformar, vilket avsevärt förbättrar användarupplevelsen på en mängd olika enheter.

  • Gruppnamn: Du kan ange ett namn som identifierar den anpassade egenskapsgruppen. Du kan lägga till, ta bort eller ordna om flera anpassade egenskapsgrupper. När du har lagt till den anpassade egenskapsgruppen kan du se följande alternativ:

    • Nyckelvärdepar: Du kan lägga till flera anpassade egenskapsnamn och anpassade egenskapsvärden genom att klicka på Lägg till för varje anpassad egenskapsgrupp.

    • Ta bort: Tryck eller klicka för att ta bort det anpassade egenskapsnamnet och det anpassade egenskapsvärdet.

    • Ordna om: Tryck eller klicka och dra för att ändra ordningen på det anpassade egenskapsnamnet och det anpassade egenskapsvärdet.

Relaterade artiklar related-articles

Se även see-also

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